1.引入vue文件

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

2.声明渲染

a.png

3.双向数据绑定（v-model=“”）

b.png

4指令

1.v-bind:XXX(动态的绑定数据~~~ 简写[:XXX])

c.png

2.v-on:click=""(绑定事件监听~~~简写为[@])

3.v-text(更行数据，会更改已有结构)；

4.v-html(可以解析数据中的html结构)

5.v-show(根据值的真假，来让元素显示或者消失)

6.v-if(根据值的真假，切换元素会被销毁，重建)

7.v-if-else(多条件判断)

8.v-else(条件都不符合，就渲染)

9.v-for(基于源数据，多次渲染模块)

10.v-pre(跳过元素和子元素的编译过程)

11.v-once(值渲染一次，随后数据更新不渲染)

5.模板

1.template(字符串模板)

d.png

2.render(函数模板)

f.png