1.模板语法

<template>
  <div>
    <span>Message: {{ msg }}</span>
    <span>Message: {{ isOk ? msgA : msgB }}</span>
    <span>{{message.split(',').reverse().join('*') }}</span>
    <span v-once>这个将不会改变: {{ msg }}</span>
    <span v-html="rawHtml"></span>​
  </div>
</template>

2.属性绑定

<template>
  <div>
    <!--  绑定属性 -->
    <p>完整写法：</p><img v-bind:src="imgSrc" width="200px">
    <p>缩写：</p><img :src="imgSrc" width="200px">

    <!--  绑定Class -->
    <!--  【常用】-->
    <div :class="{'font-size-12':isOk}">1.测试绑定Class</div>
    <div :class="['font-size-16','color-blue']">2.测试绑定Class</div>
    <div :class="isOk?'font-size-12':'font-size-16'">3.测试绑定Class</div>
    <div :class="[isOk?'font-size-12':'font-size-16','color-blue']">4.测试绑定Class
    <!-- 【了解】-->
    <div :class="className">1.测试绑定className</div>
    <div :class="{ [className]:isOk }">2.测试绑定className</div>
    <div :class="[classNameA,classNameB]">3.测试绑定className</div>
    <div :class="isOk?classNameA:classNameB">4.测试绑定className</div>

    <!--  绑定style -->
    <!--【了解】 -->
    <div :style="{color:blue,fontSize:font}">1.绑定style样式</div>
    <div :style="styleObject">2.用对象绑定style样式</div>
    <div :style="styleObject">3.用对象绑定style样式</div>
  </div>
</template>
<script>
export default {
  data(){
    return {
        imgSrc:'http://service.chinaports.com/hzsj/haizi_files/photography_img_1539651984131.jpg',
        isOk: true,
        className:'font-size-20',
        classNameA:'font-size-20',
        classNameB:'color-blue',
        blue:'blue',
        font:'20px',
        styleObject:{
            color:'green',
            fontSize:'20px'//vue不支持font-size,中间有-都采用驼峰式
        }
     }
  }
}
</script>
<style>
  .font-size-12 {
    font-size: 12px;
  }
  .font-size-20 {
    font-size: 20px;
  }
  .color-red {
    color: red;
  }
  .color-blue {
    color: blue;
  }
</style>

3.条件渲染 v-if & v-show

<template>
  <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>

    <div v-show="isLogin">你好：LYC</div>
  </div>
</template>

v-if 和v-show的区别：
v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。
v-show：调整css dispaly属性，可以使客户端操作更加流畅。

4.列表渲染 v-for

<template>
  <div>
    <ul>
        <li v-for="(item,index) in students" :key="index"> 
            {{item.name}}----------{{item.age}}
        </li>
    </ul>
  </div>
</template>
<script>
export default {
  data(){
    return {
        students:[
          {name:'jspang',age:32},
          {name:'lyc',age:30},
          {name:'Lian',age:21},
          {name:'Xing',age:23}
        ] 
     }
  }
}
</script>

5.双向绑定

<template>
  <div class="box">
    <div>原始文本信息：{{message}}</div>

    <h4>一、文本框</h4>
    <P>input: <input type="text" v-model="message"></P>

    <h4>二、文本域</h4>
    <p>textarea: <textarea cols="30" rows="10" v-model="message"></textarea></p>
    
    <h4>三、多选框绑定一个值</h4>
    <p>checkbox: <input type="checkbox" id="isTrue" v-model="isTrue"></p>
    <p>是否选中: <label for="isTrue">{{isTrue}}</label></p>
    
    <h4>四、多选框绑定一个数组</h4>
    <div>
        <input type="checkbox" id="lyc1" value="LYC" v-model="web_Names">
        <label for="lyc1">LYC</label><br/>
        <input type="checkbox" id="lyc2" value="XTT" v-model="web_Names">
        <label for="lyc2">XTT</label><br/>
        <input type="checkbox" id="lyc3" value="Lian" v-model="web_Names">
        <label for="lyc3">Lian</label>
        <p>选中内容: {{web_Names}}</p>
    </div>
    
    <h4>五、单选按钮绑定数据</h4>
    <input type="radio" id="one" value="男" v-model="sex">
    <label for="one">男</label>
    <input type="radio" id="two" value="女" v-model="sex">
    <label for="two">女</label>
    <p>选中性别：{{sex}}</p>
    
    <h4>六、选择框</h4>
    <select v-model="selected">
      <option disabled value="">请选择</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    <p>选中: {{ selected }}</p>
    
     <h4>七、多选绑定数组</h4>
    <select v-model="selecteds" multiple style="width: 50px;">
      <option disabled value="">请选择</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    <p>选中: {{ selecteds }}</p>
</div> 

</template>
<script>
export default {
  data () {
    return {
      message:'Hello World!',
      isTrue:false,
      web_Names:[],
      sex:'',
      selected: [],
      selecteds: []
    }
  }
}
</script>

5.1值绑定

对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)：

<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">

<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle">

<!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

但是有时我们可能想把值绑定到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。

5.2修饰符

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >
<!-- 自动将用户的输入值转为数值类型 -->
<input v-model.number="age" type="number">
<!-- 自动过滤用户输入的首尾空白字符 -->
<input v-model.trim="msg">

6.事件处理

<template>
  <div class="box">
   <button @click="addCounter('hello',$event)">点击+1</button>
</div> 
</template>
<script>
export default {
  data () {
    return {
     counter: 0
    }
  },
  methods: {
    addCounter(param,event) {
      console.log(param)//方法传参
      console.log(event.target)//获取DOM
      this.counter++
    }
  } 
}
</script>

6.1事件修饰符

<!-- 阻止单击事件继续传播 -->
<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>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

6.2按键修饰符

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
<input v-on:keyup.page-down="onPageDown">
<input v-on:keyup.13="submit">

详见 https://cn.vuejs.org/v2/guide/events.html 中的按键修饰符

7.自定义指令directive

这部分官网讲的也比较好理解，可直接查看 https://cn.vuejs.org/v2/guide/custom-directive.html