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的实例 就是相当于创建一个根组件
以上是 vue总结1 的全部内容, 来源链接: utcz.com/z/377123.html