Vuejs
----------------------------------------------------------
1.what is VueJs?

Vuejs 是一个 JavaScript 框架 ，它是一个以 JavaScript 编写的库，可通过 <script> 标签添加到 HTML 页面。

VueJs是为了克服HTML在构建应用上的不足而设计的 它的核心其实是对HTML标签的增强

何为HTML标签增强？其实就是使你能够用标签完成一部分页面逻辑，具体方式就是通过自定义标签、自定义属性等.


VueJs 使得开发 单页面 的应用程序（SPAs：Single Page Applications）变得更加容易。


2.表达式{{}}

表达式的作用 表达式把数据绑定到html视图当中,是将来能够显示给用户看的，用户不能直接看到的不能用花括号绑定

表达式的内容组成 内容可以为数字 字符串 变量 运算符

表达式支持三元表达式 逻辑运算符 比较运算符


3. 内置指令

指令一般是带有 v- 前缀的html元素属性。

指令的作用：

指定的作用就是操作dom，不同的指定，相对应操作dom的方式不同

2.1 v-bind:"元素的属性名" = "变量"

v-bind 作用动态的绑定数据到元素的属性中

2.2 v-html="变量"

v-html 指令用于输出 html 代码

# v-html 和 {{}} 的区别

{{}} 将数据解释为纯文本，而非html

v-html 将内容输出为真正的html

2.2.1 v-text 用于输出纯文本内容

# v-text 和 {{}} 的区别

{{}} 先输出html视图后翻译
v-text 先翻译后输出html视图

2.3 v-if v-else

v-if 指令用于 动态的在html中添加节点还是删除节点

# v-else 必须和v-if一起结合使用，否则报错

2.4 v-show 根据变量用来显示或者隐藏元素

# v-show 和 v-if 的区别

# v-show 是用来隐藏或者显示元素

# v-if 是用来删除元素后者添加元素

2.5 v-for 指令可以绑定数组的数据来渲染一个项目列表

# 一般用来绑定一个对象或者数组

# v-for 指令需要以 item in items 的形式，
items 数组或者对象 item 是数组元素或者对象的属性值。


# 还可以使用多参数

eg： <li v-for="(value,index,key) in names"></li>


2.6 v-model 将元素的值绑定到应用程序当中去

# 注意是form表单中input元素的值或者其他form表单的值

# v-model 和 {{}} 表达式可以实现数据的双向绑定

2.7 v-bind:class 绑定class属性

# 可以动态的改变class的样式


2.8 vuejs的事件

# vuejs的事件需要在methods中定义

2.8.1 v-on:click 点击事件

2.8.2 v-on:blur 失焦事件

------

# 注意箭头函数的this指向已经发生了改变

2.9 vuejs的事件对象

vuejs中如果想打印事件对象event有两种方法

# 不传递参数的时候

# 传递参数的时候如果传递事件对象传递$event

3.0 事件修饰符

事件一般有事件的默认行为和事件冒泡两种情况，采用事件修饰符可以合理解决一些问题

事件修饰符常用的有

.stop 阻止事件冒泡

.prevent 阻止事件的默认行为

.once 事件只能触发一次


# 事件的简写方法 @click => v-on:click

4.0 按键修饰符

见 vue 官网


4.1 :src="" 属性的简写