（备注说明：该vue语法知识的梳理是根据vuejs官方文档为核心，辅助一些个人理解或者其他一些案例说明，所以文章不能说原创，顶天为一个伪原创。）
Vue基础语法
vue实例
let vm = new Vue({
el: '#app', // 表示挂载的DOM节点
data: { // 数据 如果是单个组件 data是一个函数 每个实例的数据是不共享的
message: 'hello vue!'
},
methods: { // 里面是vue实例的方法
}
)插值
文本
当插入一个数据 进行文本解析 直接使用{{}}
{{message}}
HTML
如果插入的数据进行html解析 使用 v-html
{{msg}}
节点属性
当你需要对个节点添加属性的话 使用 v-bind: 可以使用简写 :
当属性值为布尔值的时候，如果为false 或者 null 或者 undefined 这个属性将不被渲染出来
其他一切值都会默认为true值(存在就是真理)
`let app = new Vue({
el: '#app',
data: {
attr: false
}
})`javaScript表达式
插值里面除了放data属性外 还可以放入js表达式
{{++num}}
{{name ? 'xuwen' : 'tom'}}指令
以v-为前缀的属性
- v-html
- v-bind: 简写 :
- v-on: 简写 @
- v-if
- v-show
- v-for
- v-model
动态属性
这些指令具体用法后面章节细说
v-for 列表渲染
需要说明的一下 不管是官方还是其他地方 v-for使用的都是 for in
其实我不是特别理解 如果是data属性值为数组的 我更喜欢用 for of 对象则用 for in
这样才更加有语义化
{{ list.name }}
data() {
return {
name:'vuejs',
lists: [
{id:1, name:'xuwen'},
{id:2, name:'文天祥'},
{id:3, name:'苏轼'}
]
}
}在 v-for 块中，我们可以访问所有父作用域的 property
{{name}}-{{ list.name }}
重点：v-for中有key值，它是作什么的？
答： key值主要作用就是把数组元素与dom节点精准的绑定在一起，
如果删除一个数组的元素 vue就是精准删除与之相关的节点。
而如果没有key值 vue更多做的是节点复用 如果数据发生变化 就会对数据一一对比 浪费性能
v-model 双向绑定
v-model主要使用于表单 input textarea select更新数据
备注：注意点： v-model会忽略表单的 value,checked,selected的初始值，数据来源直接来自data的中的值
{{inp}}
data(){
return {
inp: '123'
}
}复选框
单个复选框绑定布尔值
多个复选框绑定数组
{{balls}}
~~~~ data() {
return {
checked: true,
balls: []
}
}单选按钮
{{ball}}
data() {
return {
ball: ''
}
}选择框
{{ball}}
修饰符
v-on @ 事件处理
{{num}}
`data() {
return {
num: 0
}
},
methods: {
addNum() {
this.num++;
}
}修饰符
.stop.prevent.capture.self.once.passive.enter.tab.delete(捕获“删除”和“退格”键).esc.space.up.down.left.right.ctrl.alt.shift.meta
v-if 和 v-show
v-if 是对节点的是否渲染
v-show 是对节点是否显示 false为隐藏
class绑定
一般class绑定一个对象 里面包含一个类是否存在
data(){
return {
isActive: true
}
}