Vue概念

一.什么是Vue

Vue是一套用于构建用户界面的渐进式框架

二.Vue的特点和优点

特点：Vue是尤玉溪创造的，分为v2和v3两个版本，其中v3是近年刚出的，所以还是二使用的较为广泛，它结合了angular的指令与react的组件，以及虚拟的dom 

优点：Vue中文文档较为完善，生态相较于其他的前端框架比较丰富（也就是插件比较多），上手也比较简单，适合新手小白学习，Vue存在一些指令，组件，虚拟的dom，操作起来更加方便

三.Vue的导入与实例化

第一种：本地引入js文件：<script src="./js/vue.js"></script>

第二种：通过链接的形式引入js：<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

实例化操作就很简单了，只需要new一个Vue内部定义好使用的范围（el：“指定范围”），这里需要注意，只能在指定范围内起作用，超出指定范围就不起作用了，然后在data属性内部定义指定的数据即可

 四.Vue的指令与模板

Vue的数据和模板产生联系主要是通过指令，指令是联系模板与Vue实例的桥梁，Vue的指令就是v开头的特殊属性，通过指令可以进行一些简单的操作，比如：

1.可以渲染实例的值：<h1 v-text="msg"></h1>

2.进行简单的数学运算：<h1 v-text="2+3"></h1>

3.使用js表达式：<h1 v-text="msg.length"></h1>

4.如果是文本需要加单引号：<h1 v-text="msg + ',像春天的花一样' "></h1>

5.三目运算符：<h1 v-text="5+6>9 ? '大于' : '小于' "></h1>....

 

下面列举一些简单的常用的指令：

1.文本渲染指令：{{}}、v-text、v-html

2.条件渲染指令：v-if、v-else、v-else-if、v-show

          这里需要注意一点：v-if和v-show有一定的区别

                1.都是用来控制显示与隐藏

                2.v-if是通过dom操作实现隐藏，v-show通过css方式实现隐藏

                3.频繁切换用v-show，反之用v-if

3.遍历指令：v-for、v-key

4.属性绑定：v-bind（简写为：）

5.事件绑定：v-on：事件名（例：v-on:click）（简写为@事件名）（例：@click）