营销型网站建设新感觉建站,重庆放心seo整站优化,合作社做网站有用吗,云主机建网站教程目录
一、插值语法
二、数据绑定
1.单向数据绑定
2.双向数据绑定
三、事件处理
1.绑定监听
2.事件修饰符
四、计算属性computed和监视属性watch
1.计算属性-computed 2.监视属性-watch
#xff08;1#xff09;通过 watch 监听 msg 数据的变化 #xff08;21通过 watch 监听 msg 数据的变化 2通过 watch 监听 obj 数据的变化深度监听 deep
五、class 与 style 绑定
1. class 绑定
2. style 绑定
六、 条件渲染
1.v-if
2.v-show
七、 列表渲染
1.v-for指令
八、指令总结
一、插值语法
1用于解析标签体内容
2语法{{}}xxx会作为js表达式解析
二、数据绑定
1.单向数据绑定
语法v-bind:href xxx 或简写为 :href特点数据只能从 data 流向页面
2.双向数据绑定
语法v-model:valuexxx 或简写为 v-modelxxx特点数据不仅能从 data 流向页面还能从页面流向 data
三、事件处理
1.绑定监听
语法 v-on:xxxfunxxxfunxxxfun(参数)
2.事件修饰符
prevent : 阻止事件的默认行为 event.preventDefault() stop : 停止事件冒泡 event.stopPropagation()
四、计算属性computed和监视属性watch
1.计算属性-computed
要显示的数据不存在,要通过计算得来在 computed 对象中定义计算属性在页面中使用{{方法名}}来显示计算的结果div idroot姓input typetext v-modelfirstName br/br/名input typetext v-modellastName br/br/全名span{{fullName}}/span br/br//divdata:{firstName:张,lastName:三,},computed:{//简写fullName(){console.log(get被调用了)return this.firstName - this.lastName}} 2.监视属性-watch
watch 配置来监视指定的属性当属性变化时, 回调函数自动调用, 在函数内部进行计算
1通过 watch 监听 msg 数据的变化
watch: {msg(oldValue, newValue) {console.log(oldValue)console.log(newValue)}
} 2通过 watch 监听 obj 数据的变化深度监听 deep
data {return {obj: {name: 赵,age: 18},}
},
watch: {obj: {handler(oldValue,newVal) {console.log(oldValue)console.log(newValue)},deep: true // 深度监听}
}
五、class 与 style 绑定
1. class 绑定
:classxxx表达式是字符串: classA表达式是对象: {classA:isA, classB: isB}
2. style 绑定
:style{ color: activeColor, fontSize: fontSize px }其中 activeColor/fontSize 是 data 属性
六、 条件渲染
1.v-if 写法 v-if表达式 v-else-if表达式 v-else表达式 适用于切换频率较低的场景。 特点不展示的DOM元素直接被移除。 注意v-if可以和:v-else-if、v-else一起使用但要求结构不能被“打断” 2.v-show 写法v-show表达式 适用于切换频率较高的场景。 特点不展示的DOM元素未被移除仅仅是使用样式隐藏掉 备注使用v-if的时元素可能无法获取到而使用v-show一定可以获取到 七、 列表渲染
1.v-for指令
用于展示列表数据语法v-for(item, index) in xxx :keyyyy可遍历数组、对象、字符串用的很少、指定次数用的很少
八、指令总结
v-bind : 单向绑定解析表达式, 可简写为 :xxxv-model : 双向数据绑定v-for : 遍历数组/对象/字符串v-on : 绑定事件监听, 可简写为v-if : 条件渲染动态控制节点是否存存在v-else : 条件渲染动态控制节点是否存存在v-show : 条件渲染 (动态控制节点是否展示)v-text指令1.作用向其所在的节点中渲染文本内容。 2.与插值语法的区别v-text会替换掉节点中的内容{{xx}}则不会。
div v-textstr/divdata:{str:h3你好啊/h3} v-html指令1.作用向指定节点中渲染包含html结构的内容。 2.与插值语法的区别 (1).v-html会替换掉节点中所有的内容{{xx}}则不会。 (2).v-html可以识别html结构。 div v-htmlstr/divdata:{str:h3你好啊/h3,} v-once指令1.v-once所在节点在初次动态渲染后就视为静态内容了。 2.以后数据的改变不会引起v-once所在结构的更新可以用于优化性能。
