Vue之vue语法

（备注说明：该vue语法知识的梳理是根据vuejs官方文档为核心，辅助一些个人理解或者其他一些案例说明，所以文章不能说原创，顶天为一个伪原创。）

Vue基础语法

vue实例

let vm = new Vue({
    el: '#app',   //  表示挂载的DOM节点
    data: {   // 数据   如果是单个组件  data是一个函数   每个实例的数据是不共享的
        message: 'hello vue!'
    },    
    methods: {   //  里面是vue实例的方法
    }
)

插值

文本

当插入一个数据 进行文本解析 直接使用{{}}

    <p>{{message}}</p>   

HTML

如果插入的数据进行html解析 使用 v-html

    <p v-html = 'msg'>{{msg}}</p>   <!-- 对应vue实例中的data数据的变量 -->

节点属性

当你需要对个节点添加属性的话 使用 v-bind: 可以使用简写 :

    <p v-bind:id = 'newId'></p>   <!-- 对应vue实例中的data数据的变量 -->

当属性值为布尔值的时候，如果为false 或者 null 或者 undefined 这个属性将不被渲染出来
其他一切值都会默认为true值(存在就是真理)

    <p :attr = 'attr'></p>   <!-- 对应vue实例中的data数据的变量 -->
    `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

动态属性

<span :[attrName]="attr"></span>  <!--表示attrName为变量 取变量值 为属性-->

这些指令具体用法后面章节细说

v-for 列表渲染

需要说明的一下 不管是官方还是其他地方 v-for使用的都是 for in
其实我不是特别理解 如果是data属性值为数组的 我更喜欢用 for of 对象则用 for in
这样才更加有语义化

<div id="app">
    <div v-for="list of lists" :key="list.id">
        {{ list.name }}
    </div>
</div>

data() {
    return {
        name:'vuejs',
        lists: [
            {id:1, name:'xuwen'},
            {id:2, name:'文天祥'},
            {id:3, name:'苏轼'}
        ]
    }
}

在 v-for 块中，我们可以访问所有父作用域的 property

<div id="app">
    <div v-for="list of lists" :key="list.id">
        {{name}}-{{ list.name }}
    </div>
</div>

重点：v-for中有key值，它是作什么的？

答： key值主要作用就是把数组元素与dom节点精准的绑定在一起，
如果删除一个数组的元素 vue就是精准删除与之相关的节点。
而如果没有key值 vue更多做的是节点复用 如果数据发生变化 就会对数据一一对比 浪费性能

v-model 双向绑定

v-model主要使用于表单 input textarea select更新数据

备注：注意点：  v-model会忽略表单的 value,checked,selected的初始值，数据来源直接来自data的中的值

<input type="text" v-model="inp">
<p>{{inp}}</p>

data(){
    return {
        inp: '123'
    }
}

复选框

单个复选框绑定布尔值

<!-- 复选框 -->
        <input type="checkbox" name="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{checked}}</label>

多个复选框绑定数组

<input type="checkbox" name="" id="football" v-model="balls" value="足球">
<label for="footabll">足球</label>
<input type="checkbox" name="" id="basketball" v-model="balls" value="篮球">
<label for="basketball">篮球</label>
<input type="checkbox" name="" id="volleyball" v-model="balls" value="排球">
<label for="volleyball">排球</label>
<p>{{balls}}</p>~~~~

 data() {
    return {
        checked: true,
        balls: []
    }
}

单选按钮

<input type="radio" name="ball" id="football" v-model="ball" value="足球">
<label for="footabll">足球</label>
<input type="radio" name="ball" id="basketball" v-model="ball" value="篮球">
<label for="basketball">篮球</label>
<input type="radio" name="ball" id="volleyball" v-model="ball" value="排球">
<label for="volleyball">排球</label>
<p>{{ball}}</p>

data() {
    return {
        ball: ''
    }
}

选择框

<select name="" id="" v-model="ball">
    <option disabled value="">请选择</option>
    <option value="足球">足球</option>
    <option value="篮球">篮球</option>
    <option value="排球">排球</option>
</select>
<p>{{ball}}</p>

修饰符

<!-- 修饰符 -->
<!-- .lazy   例如  回车的时候更新两边的数据 -->
<input type="text" v-model.lazy = "message">
<!-- .number  输入的数字字符串更改为真实的数字类型 -->
<input type="text" name="" id="" v-model.number = "num">
<!-- .trim    清空前后的空格 -->
<input type="text" v-model.trim = "str">

v-on @ 事件处理

<button @click = "addNum">增加1个</button>
<p>{{num}}</p>`

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绑定一个对象 里面包含一个类是否存在

<div :class = "{active: isActive}"></div>

data(){
    return {
        isActive: true
    }
}