vue入门总结（随机更新）

1.基础指令

v-clock：解决闪烁问题，不会覆盖文本中原始内容。
v-text：解决闪烁问题，用于操作纯文本，会覆盖文本中原始内容。
注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值。
v-html：用于输出html，v-html会将其当html标签解析后输出。
v-bind：用于绑定属性指令，只能实现数据的单向绑定，可简写为：。这个指令很重要，常用
v-on：用于绑定事件指令，可简写为@。
以上具体实现可见vue入门（二）
v-model：可以实现表单元素和model中的数据的双向绑定。
具体操作见下图：
vue入门总结（随机更新）
v-for：实现循环，可循环普通数组、循环对象数组、循环对象、迭代数字。
具体操作见下图：
循环普通数组：
循环对象数组：
循环对象：
迭代数字：
注意：1.v-for 循环的时候，key属性只能使用number或string
2.key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值
3.在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题，必须在使用v-for的同时，指定唯一的字符串/数字类型： key 值
v-if和v-show
在Vue中，我们可以使用v-if和v-show来控制元素或模板的渲染。
v-if判断是否加载，可以减轻服务器的压力，在需要时加载;
v-show调整DOM元素的CSS的dispaly属性，可以使客户端操作更加流畅。
vue入门总结（随机更新）

2.事件修饰符

.stop阻止冒泡
.prevent阻止默认事件
.capture添加事件侦听器时使用事件捕获模式
.self只当事件在该元素本身（比如不是子元素）触发时触发回调
.once事件只触发一次

3.在vue中使用样式

使用class样式
1.数组

<h1 :class="['thin','italic']">这是一个很大很大的H1，大到你无法想象！！！</h1>

2.数组中使用三元表达式

<h1 :class="['thin','italic',flag?active:'']">这是一个很大很大的H1，大到你无法想象！！！</h1>

3.数组中嵌套对象来代替三元表达式提高可读性

<h1 :class="['thin','italic',{'active':flag} ]">这是一个很大很大的H1，大到你无法想象！！！</h1>

4.直接使用对象
vue入门总结（随机更新） 使用内联样式
1.直接在元素上通过：style的样式，书写样式对象

<h1 :style="{color:'red',font-size:'40px'}">这是一个善良的H1</h1>

2.将样式对象，定义到data中，并直接引用到:style中

在data上定义样式：

data:{
        styleObj1:{ color:'red','font-weight':200},
        styleObj2:{ 'font-style':italic}
    }

在元素中，通过属性绑定的样式，将样式对象应用到元素中：

 <h1 :style="[styleObj1,styleObj2]">这是一个h1</h1>