vue总结1

 

双向数据流：
js内存属性发生改变，影响页面变化；
页面的改变影响js内存属性的改变；

常用指令
V-text 是元素的innertext只能在双标签元素中；
v-html 元素的innerhtml不能包含表达式；
v-if 元素是否插入
v-show 元素是否隐藏
v-model 上香数据绑定
v-bind 单项数据绑定

el: 渲染内容目的地（写定的）
render  渲染内容（固定函数）

v-bind的使用
 render：function（C）{
    return c:
}
 render：（C）=>{  ES6
    return c:
}
当参数是一个的时候，小括号可以省略；当代码只有一行且是返回值的时候可以省略大括号；
render c=>c(App);
样式：

v-bind 简写 ： 绑定单个样式 可用三目运算符 ；绑定多个：class="{'A':RED,'B':BLUE}[stu.score]"
v-on 简写 @：绑定的方法 可以省略 function；script 中要用 this  trmplate中不需要this ;
没有参数可以省略括号，
methods 是对象  key是函数名 ，值是方法体 data 是一个函数  值是初始化的值；

v-for 
可以单独使用操作数组（item,index）；
可以操作对象(value, key,index)；
<li v-for="(stu,index) in stus" :key="index">
<li v-for="(value,key,index) in person" :key="index">

key 类似于trank by 的一个属性，为的是告诉vue.js中的元素，与页面之间的关联，
当试图删除元素的时候是单个元素的删除而不是正版替换，所以要关联其关系 好处：有些版本必须设值，性能

父子组件    
使用的是父，备用的是子
父需要引入子组件对象
import ***  from './***.vue'
components:{
    组件名：组件对象
}
全局组件，不需要声明，直接用，在main.js 中引入一次，"vue.component("组件名"，组件对象)" <headerValue> <header-value>
父传子（参数）父组件通过子组件的属性将值传递 可以穿常量（prop1="常量值"）也可以是变量（：prop2="变量名"）
子组件需要声明：根属性props:['prop1','prop2']然后在页面直接用
上边可以用的值 下边也可以用（this.**）

查看文档注意事项：
1.全局的代表vue.的一个属性，为的是告诉vue；
2.实例的代表this. 或者new vue()；
3.选项代表new vue()的参数，或者export default 里边的属性；

子向父通信
1.通过new vue()这样一个对象，来$on('事件名'，fn(prop1,prop2))
另一个组件引入一个相同vuebus,来$emit('事件名'，prop1,prop2)

export default 的用法：相当于提供一个接口给外界，让其他文件通过 import 来引入使用。
 而对于 new Vue({})部分， 只是创建一个Vue的实例 就是相当于创建一个根组件