vue 官网：vue官网
手册：vue手册
What is vue？
一个mvvm框架(库)、和angular类似 比较容易上手、小巧
Compare with Angular
- vue ：简单、易学一片html代码配合上json，在new出来vue实例适用于移动端项目,小巧
- Angular： 上手难所有属性和方法都挂到$scope身上适用于PC端的项目
vue基本雏形 引入vue包，在js代码中通过new实例化，在new中，配置相关的参数
vuejs - 锐客网
{{msg}}
实例化vue的两种方法
- var 一个变量保存
var c = new Vue({
el : "#box",
data : {
msg : "welcome vue",
}
});
2.直接new出来
new Vue({
el : "#box",
data : {
msg : "welcome vue",
}
});
vue指令 v-text
官方描述：
奇葩描述：就是把vue里面的数据通过这个指令呈现上去
类 型： String
{{msg}}
v-html
描述：就是讲一段html代码，以语义话的形式展现，而不是以代码的形式展现
{{{msg}}}
v-if
描述：条件渲染指令，根据其后表达式的bool值进行判断是否渲染该元素；
v-if=“ ” 里面的值：
- 可以是数值，非0表示真，显示出来
- 可以是布尔值，true为真显示，false为假，不显示
- 也可以上字符串，这里的字符串表示在vue里面data中的数据。如果这个值在data中没有定义则直接false，不显示。如果有定义，则根据定义的值来决定显不显示
111
000
true
aaa
bbb
ccc
ddd
eee
fff
ggg
v-show
描述：v-show 与v-if类似，根据表达式的值的真假切换元素的 display CSS 属性，如果有过渡将触发它。
文章图片
v-else
描述：不需要表达式，必须跟在v-if/v-show指令之后，不然不起作用；如果v-if/v-show指令的表达式为true，则else元素不显示；如果v-if/v-show指令的表达式为false，则else元素显示在页面上；
111
000
这里的内容会显示，紧跟着v-else的值是false，所以这里会显示
v-for
描述：类似JS的遍历，用法为 v-for=”item in items”, items是数组，item为数组中的数组元素。
接收类型： Array | Object | Number | String
-
{{value}}{{$index}}
-
{{value}}{{$index}}
-
{{k}}{{v}}{{$index}}
效果图：
文章图片
v-on
描述： 做时间处理的；（简写形式@）
v-on:click="函数"v-on:click/mouseout/mouseover/dblclick/mousedown.....
简写形式： @click@mouseout@mouseover@dbclick .....
在处理时间相关的方法中，有相关的其他修饰符，eg:阻止冒泡，默认行为…
- .stop - 调用 event.stopPropagation()。
- .prevent - 调用 event.preventDefault()。
- .capture - 添加事件侦听器时使用 capture 模式。
- .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
- .{keyCode | keyAlias} - 只在指定按键上触发回调。
事件冒泡：
// 点击里面的button，会触发show方法，此时会冒泡到id='box'的div上，同时触发他的show2方法
// 所以要对此做处理，有两种做法，一是通过源生的js，二是通过v-on的修饰符（推荐使用）
// 通过源生的方法
// v-on 自带的修饰符
整合相关的行为
键盘事件
//按住任意键触发
//按住任意键弹起后触发
// 左键弹起的时候，触发
//右键按下去的手机号触发
//当按下去的键，键码是32的时候，弹起的时候触发
// 传进去 $index，可以从而获取到对应的键码v-bind
描述： 绑定属性
简写： ：属性名 （v-bind:src =https://www.it610.com/article/= :src v-bind:class == :class）
动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。
在绑定 class 或 style 时，支持其它类型的值，如数组或对象。
在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。
没有参数时，可以绑定到一个对象。注意此时 class 和 style 绑定不支持数组和对象。
test1:
ps:zheli yao zhuyi ,img 的src 直接{{url}}会报错
文章图片
//效果能出来，但是会报一个404错误
文章图片
//效果可以出来，不会发404请求
文章图片
：class 和 ：style
描述： 数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是 attribute，我们可以用 v-bind 处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 v-bind 用于 class 和 style 时，Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。
绑定class ：class**
尽管可以用 Mustache 标签绑定 class，比如 class="{{ className }}"，但是我们不推荐这种写法和 v-bind:class 混用。两者只能选其一！个人习惯于用 :class="" 来进行相关的样式操作，毕竟是在用vue来搭建项目。在传递值的时候，有两种方法。一种是对象语法传值，一种是数组语法传值；
- 对象语法
可以直接传给 v-bind:class 一个对象，以动态地切换 class。注意 v-bind:class 指令可以与普通的 class 特性共存：
texttexttexttexttexttexttexttexttexttext
文章图片
当数据里面的isA 和 isB 改变的时候，对应的值也会跟着改变。例如当 isB的值为true的时候，最后class的值就是 "normal class-a class-b"也可以直接绑定数据里的一个对象：
testtest
- 数组语法
可以把一个数组直接传给 :class ,得到一个class的值
testtest
还可以根据三元表达式来切换class
//只有在isB为真的时候，才会显示classB的属性
class="[classA, isB ? classB : '']">当有多个条件 class 时这样写有些繁琐。在 1.0.19+ 中，可以在数组语法中使用对象语法：
绑定style :style
和：class类似，也有两种传值的方法，
- 对象语法
v-bind:style 的对象语法十分直观——看着非常像 CSS，其实它是一个 JavaScript 对象。CSS 属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）：
testtest
直接绑定到一个样式对象通常更好，让模板更清晰：
testtest
- 数组语法
testtest
ps：当 v-bind:style 使用需要厂商前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。
v-model
描述： 在表单控件上创建双向绑定。
v-model这个指令只能用在 ,,