第詳解Vue全局變量，局部變量局組件和局部組件

1.先定義組件Vponent('組件名',{組件模板對象})

注意:組件名不要使用原生的標簽名,若組件名定義時用的是駝峰命名法,則調(diào)用時用中劃線分割后小寫

例如:組件--mtText使用時--my-text/my-text

2.配置組件的模板注意:組件的模板內(nèi)容有且只有一個根元素

3.在視圖層里調(diào)用,用雙標簽

4.組件是一個獨立的作用域,也可以看成一個特殊的vue實例,可以有data,methods,computed等等

注意:組件的data是函數(shù),函數(shù)中需要返回一個對象作為組件的data

全局組件案例

body

divid="app"

my-component/my-component

/div

scriptsrc="lib/vue-2.4.0.js"/script

script

//全局組件

Vponent('myComponent',{

//1.組件的內(nèi)容/模板

template:'divdiv頭部組件/divh1@click="fn"呵呵{{msg}}/h1/div',

data(){

return{

msg:'hello,組件'

methods:{

fn(){

console.log(this.msg);

letvm=newVue({

el:"#app",

data:{

methods:{

/script

/body

局部組件案例

body

divid="app"

my-component/my-component

my-test/my-test

/div

templateid="box1"

h1haha/h1

/template

templateid="box2"

div

liv-for="iteminarr"

{{item}}

/li

/ul

/div

/template

scriptsrc="lib/vue-2.4.0.js"/script

script

letvm=newVue({

el:"#app",

data:{

methods:{

//局部子組件

components:{

//組件名:{配置項}

"myComponent":{

template:'#box1',

data(){

return{

msg:"哈哈"

"myTest":{

template:"#box2",

data(){

return{

arr:[1,2,3,4]

/script

/body

組件切換：法一

body

divid="app"

ahref=""@click.prevent="rel="externalnofollow"rel="externalnofollow"flag=true"登錄/a

ahref=""@click.prevent="rel="externalnofollow"rel="externalnofollow"flag=false"注冊/a

loginv-if="flag"/login

registerv-else="flag"/register

/div

scriptsrc="lib/vue-2.4.0.js"/script

script

Vponent("login",{

template:"h1登錄組件/h1"

Vponent("register",{

template:"h1注冊組件/h1"

letvm=newVue({

el:"#app",

data:{

flag:false

methods:{

/script

/body

組件切換：法二

style

.red{

color:red;

.v-enter{

opacity:0;

transform:translateX(150px);

.v-leave-to{

opacity:0;

transform:translate