Vue之基础语法

Vue之基础语法

一 指令属性的基本使用

1. v-cloak解决闪烁

（1）解决插值表达式的闪烁问题。
（2）闪烁问题：在页面加载的过程中，在页面中的{{}}插值表达式首先会被页 面认可为是html元素中的实在存在的内容。所以浏览器会首先将{{}} 展现在页面上，页面加载完毕后，插值表达式{{}}才会真正的转变为 动态赋予的值。这就会造成一种现象，如果将来终端在访问服务器的 过程中，网速较慢（网络比较卡），那么我们的{{}}会首先展现出来， {{}}展现出来之后，会一闪而过，最终显示的是最终被赋予的值

2. 插值表达式和v-text和v-html

（1）对于元素中已经存在的值，只有插值表达式能够将原有的值保留，在原有的已经存在的值的基础上添加动态数据。
（2）使用v-text和v-html之所以不能够保留元素标签对中原有的内容， 是因为在使用以上两个指定属性之前，会提前将标签对中的内容先清空掉，在赋予动态的值。如果未来的实际项目开发，需求为在原有的内容的基础上，追加动态的值，我们要选择使用插值表达式。
（3）v-text:主要是用来赋予纯内容的，如果赋予到元素中的内容本身包 含html，那么v-text 会将 html 原封不动的展现在页面上，这些内容 是得不到浏览器的解析的。
（4）v-html:除了能够为前端元素赋予内容之外，更重要的是，如果内容本身含有html代码，那么赋值后最终展现出来的结果，html元素会得到浏览器的解析的.，相比之下，v-html更强大。

3. v-bind绑定属性

（1）直接使用指令属性v-bind来为元素中的属性进行绑定操作
（2）使用简化后的方式，将v-bind去除，直接使用:来对元素中的属性进行绑定。如：v-bind:title–>:title
（3）在使用v-bind对元素中的属性进行绑定的时候，可以直接在操作值的位置进行内容的拼接

4. v-on指令触发事件

（1）使用v-on:click="func1"的形式来绑定事件，相当与js的onclick函数
（2）使用@简化v-on，如：v-on:click=“func1”–>@:click=“func1”
（3）事件修饰符的使用
① .stop：使用 .stop 阻止事件的冒泡机制。

冒泡机制是指 在触发了内层元素的同时，也会随之 继续触发外层元素（外层元素包裹了内层元素） ，在做点击的过程中，点击了内层元素，也可以认为是同时点击了外层元素。所以两个事件
都会触发。使用 .stop 就可以阻止外层元素的点击。

② .prevent：阻止超链接的默认行为。

默认行为指的是超链接中的href属性链接 ，在实际项目开发中，不仅仅只是按钮需要我们绑定事件来控制行为，超链接的使用我们也是要遵循这种自己绑定事件触发行为的方式。 所以在a标签中的href链接往往要被我们以特殊的方式处理掉

③ .capture：捕获触发事件的机制

使用的是外层div 套用内层div的例子（其中内层div没有选择阻止冒泡） ，在此基础之上，点击内层的div，先触发内层div的事件， 再触发外层div的事件。 加入了.capture修饰符之后，先触发的是外层的div事件，后触发的是内层div事件。被.capture修改之后，事件优先触发。

④ .self：阻止自身事件冒泡行为的机制

与 .stop的区别：
.stop是不会阻止自身的事件，阻止的是外层的使劲按；
.self阻止的是自身的事件，而不会阻止外层的事件

⑤ .once：只触发一次事件处理函数

需要结合.prevent来使用，一般和click来使用，如@click.prevent.once
测试：
通过超链接的触发来观察 在只使用@click的时候（没有做任何修饰符的修饰），点击超链接， 先触发@click，后触发href链接。
当为@click添加上@click.prevent.once之后，点击超链接。
第一次点击：只触发了@click的事件，href链接没有触发
第二次点击（已经点击过一次之后再次点击）：没有触发@click，只触 发了href

5. v-model实现双向数据绑定

（1）v-bind：单向数据绑定
（2）v-model：双向数据绑定，在表单元素中使用，实现从模型M绑定到视图V，从视图V到模型M

6. v-for遍历

（1）在v-for 的使用 过程中，添加key属性及属性值来给每一条遍历出来的元素做有效的唯一标识。
（2）key属性值只能是一个数值或字符串，不能是对象；key属性必须结合v-bind指令使用，使用形式为 :key；key属性值必须唯一

7. v-if和v-show指令

（1）简单的比较，flag为true,v-if和v-show指令的效果是一样的;若为false，v-if中的元素是没有的，而v-show中的元素本身就存在，只是通过false属性值为该元素添加了display:none,表示为不显示该元素。

总结：
v-if：为true：创建条件元素并显示，false：去除元素
v-show：为true：显示条件元素，false：隐藏元素
一般情况下，使用v-if就可以了，但对元素的显示与否需要频繁的切换则使用v-show。