1、文本插入{{}}
里面的值支持
(1) 文本

{{hello world}}

(2) 数字

{{123}}

(3) 逻辑运算

{{1+1}}

(4) 单行语句

<p>{{0>10 ? 'false':'true'}}</p>

2、v-html/v-text 指令：动态文本输出（v-html 能解析 html）

<p v-html="hello"></p>

3、v-bind：动态属性，例如 class 等 v-bind:class="ha"

4、v-if v-else 表示 if，else，可用 template 标签承载，例如：

<template v-if> ”，<template v-else> 

5、v-show：和 v-if 类似。但是与 v-if 的区别是元素全部被渲染，这是做了 css 的切换。

6、v-for：列表渲染, 一定要添加 key

 <ul>
    <li v-for="(name,index) in names" v-bind:key="index">{{ name }}--{{index}}</li>
 </ul>
names: ["anna","dana","timiy"]

渲染列表，列表里面是 json

 <ul>
          <li v-for="index in indexs" >
            {{ index.age}}
            {{index.name}}
          </li>
</ul>

indexs: [
        {
          "name": "anna",
          "age": 10
        },
        {
          "name": "dana",
          "age": 100
        }
 ]

7、事件 v-on ，用于点击等操作

<button v-on:click="num+=1">按钮</button>
<span>{{num}}</span>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      num: 1
    }
  }
}
</script>

8、v-on 事件 methods 事件处理方法

<button v-on:click="handlerClick">按钮</button>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      num: 1
    }
  }
methods: {
    handlerClick(){
      alert("我是事件处理方法：" + this.num)
    }
  }
}
</script>

9、用 this 来索引当天 data 中的数据，this 是 vue 的组件，包含了组件的所有属性。