Vue.js

整体结构

let vm = new Vue({
el:'#',    // 需要操作的元素区域
data:{
msg:"需要显示到页面的数据",
msg1:"
数据2
",
msg2:"这是一个标签属性",
list:[1,2,3,4,5],
list2:[
id:1,name:'zs',
id:2,name:'ze',
id:3,name:'zi'
]
list3:{
id :1,
name: 'tom'
}
},
methods:{ // 这个属性定义了当前Vue实例中所有可用的方法
show(){ alert ('hi')},
divv(){},
btnn(){}
}
})

指令

v-cloak 解决插值表达式闪烁问题

{{ msg ]}

v-text 会覆盖元素中原本的内容， 但是插值表达式只会替换占位符

v-html 可以输出html格式

v-bind 可以绑定html属性，只能实现单向绑定 model=>view 简写 :

还可以直接在数据名后添加想要的属性值，例如

v-on 绑定事件 简写 @

v-model 唯一的实现数据双向绑定的指令
input(radio text address emali) select checkbox textarec

v-for 循环数组 + key

{{ item }}

对象数组

{{ item }}

对象 在遍历键值队的时候 除了有 val key 还有 index索引

{{ val }}--{{ key }}--{{ index }}

迭代数字 ，起始值是1

循环多少次

v-if 每次都会重新删除或者创建元素，有较高的切换性能消耗 频繁切换 不要用

v-show 只是切换了元素的display:none属性，有较高的初始渲染消耗 永远都不会显示给用户 不要用

事件修饰符

html 整体结构

.stop阻止冒泡

.prevent 阻止默认行为

.captrue 触发事件捕获机制

.self 实现只有点击当前元素的时候才会触发事件处理函数

.once 事件只触发一次行为

在Vue中使用样式

使用class样式 + 内联

数组

数组+三元表达式

数组嵌套对象

直接使用对象