（备注阐明：该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    }}