vue

1.创建实例

let   vm =new  Vue({

el:'#app',

data:{

message:'今天是好天气'

}

})

---

2 常用指令

(1)v-model  ：用于input

(2)v-once：

(3)v-if  ： 真实的条件渲染

(4)v-show ：css样式的切换

(5)v-else:不能单独使用，要和v-if

(6)v-else-if:用在多种选择

(7)v-for:  v-for=(score , index)   in    scores

  v-for = score   in    scores

(8)v-text:后面添加的不会出现

(9)v-html: 慎用

(10)v-bind： （缩写   ：名称）

(11):class

(12) v-on

---

3.计算属性（computed）与methods的区别？

计算属性直接读取缓存使用，methods是会重新调用

---

4.组件化

全局组件

<div id='app'>

<p>静态呀</p>

<mydate></mydate>

</div>

（1）创建组件构造器

let  file= Vue.extend({

1-1模板选项

template：～

<div></div>

～

})

(2)注册一个全局的组件

Vue.component('mydate(自己起的名字)',file);

new Vue({

el:'#app',

data:{

msg:'  静态'

}

})

---

局部组件

<div  id='app'>

<date></date>

</div>

（1）创建组件构造器

let  file= Vue.extend({

1-1模板选项

template：～

<div></div>

～

})

new Vue({

el:'#app',

components:{

'date':file

}

})

---

补充

(1)注册一个全局的组件

Vue.component('mydate(自己起的名字)',{

template：～

<div></div>

～

});

new Vue({

el:'#app',

data:{

msg:'  静态'

}

})

（3）父子组件

(4)

<div   id='app'>

<dear></dear>

</div>

<template   id ='dear'>

<div>

<p></p>

<img   src =''   alt=''>

</div>

</template>

Vue.component({

template:'#dear'

})

new  Vue({

el:'#app'

})

---

5组件之间的通信

父组件传子组件props

子组件传父组件emit   events