关于vue.js: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}
}