Vue之vue语法

(备注说明:该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
    }
}

你可能感兴趣的