1.Vue入门

1.1什么是Vue？

1.2简单了解一下Vue

1.3.第一个简单案例HelloWrold

1.4.通过基础案例解析前端MVVM模型图片.png

2.1.关于Vue的基础指令

插值表达式：
在学习之前我们小了解一个知识点 就是 上述示例中的 插值表达式 也就是 {{}}这种格式，这种格式就是插值表达式的表现形式，里边写的内容是以对象的形式存在的，我们可以在vm对象中直接操作这个对象，对他进行赋值，简单来说插值表达式就是一种赋值的方式。

2.1指令属性的基本使用

（1）v-cloak指令

使用v-cloak主要是为了解决插值表达式的闪烁问题
关于闪烁问题的解释：
在页面加载过程中，在页面中的插值表达式({{}})首先会被页面认为是html元素中实实在在存在的，所以浏览器会将这两对花括号展示到页面中，页面加载完成之后，才会将插值表达式真正转变为动态赋予的值，这就会造成一种现象，如果将来终端在访问服务器的过程中，网速比较卡，那么我们的两对花括号就会先展现出来，展现出来之后，会一闪而过，最终显示我们的内容。这就是所谓的插值表达式的闪烁问题。
实例代码：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     <script src="./js/vue.js"></script>
  7.     <style>
  8.         [v-cloak]{
  9.           display: none;
  10.         }
  12.     </style>
  13.     </head>
  14.     <body>
  15.     <div id="app1">
  16.         <p v-colak>{{str1}}</p>
  17.         <p v-colak>{{str2}}</p>
  18.     </div>
  20.    <script>
  22.       var vm = new Vue({
  23.           el: "#app1",
  24.           data:{
  25.             "str1" : "插值表达式问题",
  26.             "str2":"插值表达式闪烁问题"              
  27.           }
  28.       });
  29.    </script>
  30.     </body>
  31. </html>

（2）v-html指令

(3) v-text指令

上面两个指令的作用和插值表达式的作用类似，都可以给元素内部动态赋值，
上边两个和插值表达式的区别：
在插值表达式中，对于已经存在的元素，插值表达式可以保留原有标签中的内容，会在原有的基础上继续添加数据。
但是v-html 和 v-text都会先将元素中已经存在的内容先清空掉，再对标签里的内容进行赋值。
总结：如果在未来的项目中，如果需要在原有的基础上进行数据的添加，我们需要使用插值表达式的形式来进行操作，但是需要解决插值表达式闪烁问题，如果不需要原有标签中的内容，我们可以使用v-html.v-text指令来完成动态赋值的操作，并且不会出现闪烁问题。

示例代码：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     <script src="./js/vue.js"></script>
  7.     <style>
  8.         [v-cloak]{
  9.           display: none;
  10.         }
  12.     </style>
  13.     </head>
  14.     <body>
  15.     <div id="app1">
  16.         <p>============{{str1}}=============</p>
  17.         <p v-html="str2">============================</p>
  18.         <p v-text="str3">=============================</p>
  20.     </div>
  22.    <script>
  24.       var vm = new Vue({
  25.           el: "#app1",
  26.           data:{
  27.             "str1" : "插值表达式",
  28.             "str2":"v-html",
  29.             "str3":"v-text"          
  30.           }
  31.       });
  33.    </script>
  34.     </body>
  35. </html>

示例结果：
图片.png
接下来，我们对v-html和v-text来进行对比：
示例代码：

  1.     <body>
  2.    <!-- <div id="app1">
  3.         <p>============{{str1}}=============</p>
  4.         <p v-html="str2">============================</p>
  5.         <p v-text="str3">=============================</p>
  7.     </div> -->
  9.     <div id="app2">
  10.         <p> {{str4}} </p>
  11.         <p v-html="str5"></p>
  12.         <p v-text="str6"></p>
  14.     </div>
  16.    <script>
  18.       var vm = new Vue({
  19.           el: "#app2",
  20.           data:{
  21.             "str4" :"<font color='red'>插值表达式</font>",
  22.             "str5":"<font color='red'>v-html</font>",
  23.             "str6":"<font color='red'>v-text</font>"          
  24.           }
  25.       });
  27.    </script>

结果

图片.png
通过以上结果我们可以清晰的看到，当我们在v-html的值中加入样式拼接时，浏览器会将样式同时和值一起解析出来，而在v-text和插值表达式中，浏览器会将所有内容都作为值，赋予到变量中，并不会解析标签元素。
v-text:主要是用来赋予文本内容的，浏览器会将v-text的赋予的值完完整整的赋予到变量中，这些内容是得不到浏览器解析的。
v-html:除了能够赋予文本内容，同时当赋予的值本身含有html代码时，浏览器会将v-html元素的内容解析出来，不仅可以获取值，也可以获取html标签元素。因此功能要更加强大。所有我们在实际项目中大多数使用的是v-html指令，

（4）v-bind指令

  1. <body> <!-- <br />    一下input标签中的value值，我们使用vm对象，由vm对象将data中的信息动态的赋予到该value属性值当中。<br />    我们必须使用v-bind指令来完成<br />    语法：使用v-bind:的形式放到需要指定属性的前面

—>
实例代码：

图片.png
结果：
图片.png
总结v-bind指令：
v-bind是vuejs中用来绑定元素属性的指令，可以通过这个指令给元素的属性赋值
在我们开发中有一下几种使用v-bind的方式：
1.直接使用v-bind的形式对元素的属性进行绑定，
2.可以使用v-bind的简写形式 ： 来绑定元素属性
因为在我们实际开发中对于元素属性的绑定是常规操作，因此我们使用这种方式可以有效的较少无效的代码。
3.在我们使用v-bind标签时，我们还有一种操作：可以直接在操作值的地方进行内容的拼接的。
例如如下：

  1. <input type="text" v-bind:value="str1+'hello Vue'" />

展示结果：
图片.png

（5）v-on指令

v-on指令使用来触发事件的
(1)v-on的基本使用：
v-on:click=”fun1”的形式来绑定事件
相当于原生的js中的onclick = fun1()
v-on指令可以简化成@符号
图片.png

（6）事件修饰符的使用

a.stop
使用stop来对事件的冒泡机制进行阻止
js中的冒泡机制，指的是，在触发内层元素的同时，也会随之继续触发外层元素（外层元素包裹着内层元素），在做点击的过程中，点击了内层元素，也可以认为是同时点击了外层元素，所以两个事件都会触发。
在实际项目开发中，几乎没有太多需求需要用到事件冒泡的机制，所以我们需要阻止事件冒泡，阻止事件冒泡之后，在我们点击了内层元素之后，内层元素绑定的事件触发，触发之后，由于事件冒泡被阻止，就不会继续出发外层元素了。
我们需要在事件后边使用,stop的方式来阻止事件冒泡图片.png

b.prevent
使用.prevent来阻止超链接默认的行为
超链接的默认行为执行的就是href属性里的路径，当使用.prevent可以阻止超链接发生默认跳转行为，在实际项目开发中，不仅仅是按钮需要我们绑定事件来控制行为，超链接也需要让我们自己来绑定事件控制行为，所以一般来说，我们往往需要处理掉超链接的默认行为图片.png
c.capture

使用.capture实现捕获触发事件的机制
使用的是外层div套用内层div的例子，其中内层div没有阻止事件冒泡，再次基础之上，点击内层div，先触发内层div事件，再触发外层div事件
加上.capture修饰符之后，先触发外层div，后触发内层div事件，被.capture修改之后，事件优先触发
图片.png
d.self
self实现阻止事件冒泡行为的机制（类似于stop），阻止的是自身的冒泡行为，会直接消失掉自身的事件行为，其实他不会真正的阻止冒泡行为。但是不会影响冒泡行为继续向外扩散。

e.once
使用once修饰符，只触发一次事件处理函数
.once需要结合。prevent来使用，
在我们使用事件修饰符的时候，有可能会存在这样的需求，需要同时为@click事件使用多个修饰符，例如我们现在就需要同时使用.once和prevent修饰符，在使用的时候，通过绑定事件的@click连续的绑定修饰符就可以了
语法:@click.prevent.once

（7）使用v-model指令实现双向数据绑定

1.单向数据绑定：从模型去渲染视图
图片.png 我们可以对v-bind的绑定数据的形式得出一个结论，v-bind只能单向绑定数据，从模型层获取数据来渲染视图层。但是我们无法通过该形式实现数据的双向绑定

2.双向数据绑定
在实际的开发过程中，我们不仅仅需要将模型准确的绑定数据到视图层，我们往往也需要将视图层的数据使用模型来记录.所以我们需要双向数据绑定的机制.
3.v-model指令进行双向绑定
v-model指令可以对数据进行双向绑定，使模型层也可以获取到视图层的值，但是
值得注意：我们在开发中往往一个页面只有表单元素才需要记录值，因此我们v-model指令只支持表单元素使用。
图片.png
图片.pngv-model简单小案例：实现简单计算功能

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>v-model实现表单元素的双向数据绑定</title>
  6.     <script src="./js/vue.js"></script>
  7.     </head>
  8.     <body>
  9.     <div id="app1">
  10.       <input type="text" v-model="num1">
  11.          <select v-model="csign">
  12.             <option value="+">+</option>
  13.             <option value="-">-</option>
  14.             <option value="*">*</option>
  15.             <option value="/">/</option>
  16.          </select>
  17.          <input type="text" v-model="num2">
  18.          <input type="button"  value="=" @click="count">
  19.          <input type="text" v-model="result">
  21.     </div>
  23.    <script>
  25.       var vm = new Vue({
  26.           el: "#app1",
  27.           data:{  
  28.               num1: 0,
  29.               num2:0,
  30.               csign:"+",
  31.               result:0
  32.           },
  33.           methods:{
  34.               count(){
  35.                   if (this.csign=="+") {
  36.                     this.result = parseInt(this.num1)+parseInt(this.num2);
  37.                   }else if(this.csign=="-"){
  38.                     this.result = parseInt(this.num1)-parseInt(this.num2);
  39.                   }else if(this.csign=="*"){
  40.                     this.result = parseInt(this.num1)*parseInt(this.num2);
  41.                   }else if(this.csign=="/"){
  42.                     this.result = parseInt(this.num1)/parseInt(this.num2);
  43.                   }
  45.               }
  46.           }
  47.       });
  48.    </script>
  49.     </body>
  50. </html>

效果
图片.png

（8）使用css样式

（1）CSS样式的使用

案例一：传递一个claa样式的数组，可以对一个标签绑定多种属性
语法：class = “【样式1，样式2】”

案例2：使用三元运算符的方式可以根据不同的场景切换不同的样式
案例3：使用对象(json)来表达以上三元运算符的操作
图片.png
案例4：以对象引用样式
图片.png
（2）style样式补充

（9）v-for和v-if指令的应用

（1）v-for指令的基本应用
（2）v-for指令y应用注意事项
（3）v-if指令和v-show指令的使用和区别