初学Vue，vue指令

初学Vue

一、什么是Vue?

可以完全在浏览器端渲染页面，服务端只提供数据。即数据驱动视图。
vue采用MVVM（modle,view,viewmodel）模式
MVVM的数据双向绑定减少了DOM操作，更高效地实现了视图和数据的交互。

二、安装vue

1.script标签引入

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

2.npm下载

三、vue基本模板语法

1.插值

（1）{{}}双花括号
（2）v-text显示文本内容，不能对标签进行转义
（3）v-html显示文本内容，可以对标签进行转义

2.vue常用指令

（1）v-bind=“”

 给属性设置动态值，可简写为”：“

（2）v-on:+事件

 事件绑定 例：v-on:click 可简写@click

（3）v-model

 双向数据绑定  把value属性和vue数据变量, 双向绑定到一起
 一个改变都改变
原理：包含两个步骤 v-bind 和@input事件绑定  
当value生改变时，触发事件，动态修改数据。

（4）v-show和v-if

 控制标签的隐藏或出现
 区别：v-show 用的display:none隐藏 (频繁切换使用)
        v-if 直接从DOM树上移除

（5）v-for

遍历数据，列表渲染,  按照数据数量, 循环生成
语法：
  v-for="(值, 索引) in 目标结构"
  v-for="值 in 目标结构"