1.插值

v-once：插入一次值，但不会再次改变。
<span v-once>这个将不会改变: {{ msg }}</span>

2.使用 JavaScript 表达式

js
{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

二.v-bind与v-on的缩写

v-bind 缩写
<!-- 完整语法 -->
<a v-bind:href="url"></a>

<!-- 缩写 -->
<a :href="url"></a>

<!-- 完整语法 -->
<button v-bind:disabled="isButtonDisabled">Button</button>

<!-- 缩写 -->
<button :disabled="isButtonDisabled">Button</button>

v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

三.条件渲染

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>
#v-show
<h1 v-show="ok">Hello!</h1>
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

四.列表渲染v-for

1.循环数组

in==of
 <li v-for="(item, index) in items">  or（<div v-for="item of items"></div>）
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})
result 
Parent - 0 - Foo
Parent - 1 - Bar
##=========
##2.循环对象
<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>
new Vue({
  el: '#v-for-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})
<div v-for="(value, key, index) in object" key="item.id">
//索引     ///对象属性名字  //值
  {{ index }}. {{ key }}: {{ value }}
</div>

out==>
1.firstName: John
2.lastName: Doe
3.age: 30

##key
##为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你##需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。

自己使用.

代码块
1.注册组件
Vue.component('vue-radio2', {
    props: {radio:['radio'],deful:['deful']},
    methods: {
        change() {
            this.$emit('input', this.radio.codeValue);
        }
    },
    computed: {
        isSelect: function () {
            console.log(this.deful)
            console.log(this.radio.codeValue)
            console.log(this.radio.codeValue === this.deful)
            return this.radio.codeValue === this.deful;
        }
    },
    template: '' +
        '<div class="layui-unselect layui-form-radio" :class="{\'layui-form-radioed\':isSelect}" @click="change" >' + '\n' +
        '<i v-if="isSelect" class="layui-anim layui-icon layui-anim-scaleSpring"></i>' + '\n' +
        '<i v-else class="layui-anim layui-icon"></i>' + '\n' +
        '<span>{{radio.codeName}}</span>' + '\n' +
        '</div>'
});
2.
<vue-radio2 code-key="sys_organ_type" v-model="organ.organType" v-for="item in radioList"
                                        v-bind:radio="item"
                                        v-bind:deful="organ.organType"
                                        v-bind:key="item.id">
                            </vue-radio2>
1. v-model绑定对应的值。
2. v-for 循环 radioList ==>从后台获取
3.v-bind:radio 对应的单独对象
   v-bind:deful： 默认值。
   v-bind:key：需要一个key.
3.
往groceryList2，添加对应的对象。
 <input
                                    v-model="newTodoText"
                                    v-on:keyup.enter="addNewTodo"
                                    placeholder="Add a todo"
                            >
  addNewTodo: function () {
            this.groceryList2.push({
                id:"sdsdsd",text:this.newTodoText,value:"sadasda"
            })
        },
          

事件修饰符

.stop
.prevent
.capture
.self
.once

<a v-on:click.stop="doThis"></a>

<form v-on:submit.prevent="onSubmit"></form>

<a v-on:click.stop.prevent="doThat"></a>

<form v-on:submit.prevent></form>

<div v-on:click.capture="doThis">...</div>

<div v-on:click.self="doThat">...</div>

按键修饰符

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

<input v-on:keyup.13="submit">

<input v-on:keyup.enter="submit">

<input @keyup.enter="submit">

通过全局 config.keyCodes 对象自定义按键修饰符别名：

// 可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112

六.表单输入绑定v-model

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

修饰符.lazy,.number,.trim

<input v-model.lazy="msg" >
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：（+-e还是可以输入）
<input v-model.number="age" type="number">
消除空格
<input v-model.trim="msg">