晚上19.35又是一个安静的夜晚，趁着安静，赶紧过来csdn总结一下今天学到vue的知识。
首先了解一个新的东西，必须了解它是什么，能干什么。这是我比较深刻的体会。
什么是Vue.js：
*** vue.js:是目前最火的框架（关注的人是最多的），而react是目前最流行的框架（使用的人数是最多的），React除了可以开发网站，还可以开发手机APP，Vue也是可以开发手机APP 的，但是需要借助Weex。
***Vue.js 是前端的**主流框架之一**，和Angular.js、React.js 一起，并成为前端三大主流框架！
***Vue.js 是一套构建用户界面的框架，**只关注视图层**，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发。
***前端的主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果；
为什么要学习前端框架Vue.js:
***在企业中为了提高开发效率，从而来使用框架进行提神开发的效率。
***能够帮助我们减少不必要的DOM操作；提高渲染效率；双向数据绑定的概念通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了。
***在Vue中，一个核心的概念，就是让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑；
框架和库的区别
***框架：是一套完整的解决方案；对项目的入侵较大，项目如果需要更换框架，则需要重新架构整个项目。
***库：其实就是插件，提供一些小的功能，对项目入侵比较小，如果有的库完成不了某些需求，可以很容易的切换到其他的实现需求。
Node（后端）中的MVC与前端中MVVM之间有什么区别：
***MVC 是后端的分层开发概念。
***MVVM是前端视图层的概念，主要关注在于视图层进行分离，也就是说：MVVM把前端的视图层分为了三部分 Model,View, ViewModel.
如何使用Vue.js呢：如下
关于标签 v-cloak还有v-text理解：
v-cloak:能够解决所有差值表达式因为网速慢导致表达式闪烁的问题，也可以在msg的前后添加任何的数据，不会进行覆盖。
v-text:本身就默认没有闪烁问题的，但是因为v-text在标签里面，当解析到这里的时候，会先执行标签里的内容，导致123倍覆盖
v-html:能够把转义的标签（就是字符串）变成html的标签
举个小栗子：
var vm=new Vue({
el:'#app',
data:{
msg:'<h1>哈哈哈，记得每天保持好心情哦！</h1>'
}
})
//接下来使用v-html来进行得到h1标签，而不是字符串：
<div id="app">
<div v-html="msg"></div>
</div>
这样就会在客户端显示出h1标题的打字了
要是没有使用v-html的话输出是这样子的：<h1>哈哈哈，记得每天保持好心情哦！</h1> 的字符串
v-bind:可以用来绑定属性指令的变量；
举个小栗子：
var vm=new Vue({
el:'#app',
data:{
mytitle:'这是我自定义的标签’
}
})
<div id="#app">
<input type="button" value="按钮" v-bind:title="mytitle+'强哥'/>
</div>
结果在在页面上有一个按钮，鼠标放上去会显示一句话：这是我自定义标签强哥。
此外v-bind还可以进行简写：<input type="button" value="按钮" :title="mytitle+'强哥'/>
<!--v-bind:指令可以被简写为 ：要绑定的属性-->
<!--v-bind 中可以写合法的js表达式-->
先小小的总结一下：
***1.如何定义一个基本的Vue代码结构
***首先先导入架包<script src="./vue-2.4.0.js"></script>
***然后在创建Vue 的最基本的结构：
***var vm=new Vue({
el:'#app' , //表示要控制的区域
data:{ //data存放的是我们el中要使用的数据
msg:'welcome'
},
methods:{ //它用来定义Vue属性可用的方法
show：function（）{
alert("hello!")
}
}
})
***2.差值表达式{{}} 和v-text
***3.v-cloak
***4.v-html
***5.v-bind Vue提供事件绑定机制 缩写是 ：
***6.v-on Vue提供方法绑定机制 缩写是 @：
2018.9.7 晚上八点整 接上
Vue的事件修饰符：
*** .stop:阻止冒泡（就是指一层一层的进行显示）
<input type="button" value="点我" @click.stop="onclick"> //这个按钮点击后就不会再往外执行啦 这就是阻止冒泡
*** .prevent:阻止默认事件
<a href="www.baidu.com" @click.stop="onclick">百度一下，你就知道！</a> //这个阻止默认事件就是 不会再去访问百度
*** .capture :添加事件监听器的时候使用事件捕获模式
<div class="inner" @click.capture></div> //这个是添加监听器时默认使用监听器的捕获模式
*** .self :只当事件在该元素（比如不是子元素）触发时进行回调
<div class="inner" @click.self="divHeader"></div>
*** .once:事件只触发一次
vue的双向绑定 v-model
***首先需要说明的是v-bind无法进行双向的绑定，只能从M到V
***v-model:就可以实现双向数据的绑定，但是v-model只能用于表单数据中input(radio,text,address,email......) select checkbox textarea等元素。
示例代码：<input type="text" v-model="msg" style="width:100%">
现在使用v-model来写一个简易的计算器：
***界面如图所示（里面有水印，不要在意那些细节）
代码实现：
<html>
<head>
<script src="./vue-.2.4.0.js"><scritp>
</head>
<body>
<div id="app">
<input type="text" v-model="n1">
<select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="n2">
<input type="button" name="=" :click="jisuan">
<input type="text" v-model="result">
</div>
var vm=new Vue({
el:'#app',
data:{
n1:'0',
opt:'+',
n2:'0',
result:'0'
},
methods:{
jisuan(){
switch(this.opt)
case:+
this.result=parseInt(this.n1)+parseInt(this.n2)
break;
}
}
})
</body>
</html>
在vue中使用格式
### 使用class样式
1. 数组
<h1 :class="['red', 'thin']">这是一个邪恶的H1</h1>
2. 数组中使用三元表达式
<h1 :class="['red', 'thin', isactive?'active':'']">这是一个邪恶的H1</h1>
3. 数组中嵌套对象
<h1 :class="['red', 'thin', {'active': isactive}]">这是一个邪恶的H1</h1>
4. 直接使用对象
<h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个邪恶的H1</h1>
### 使用内联样式
1. 直接在元素上通过 `:style` 的形式，书写样式对象
<h1 :style="{color: 'red', 'font-size': '40px'}">这是一个善良的H1</h1>
2. 将样式对象，定义到 `data` 中，并直接引用到 `:style` 中 + 在data上定义样式：
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}
+ 在元素中，通过属性绑定的形式，将样式对象应用到元素中：
<h1 :style="h1StyleObj">这是一个善良的H1</h1>
3. 在 `:style` 中通过数组，引用多个 `data` 上的样式对象
+ 在data上定义样式：
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
h1StyleObj2: { fontStyle: 'italic' }
}
+ 在元素中，通过属性绑定的形式，将样式对象应用到元素中：
<h1 :style="[h1StyleObj, h1StyleObj2]">这是一个善良的H1</h1>
## Vue指令之`v-for`和`key`属性
***1.进行迭代对象中的属性
***<div v-for="(value,key,i)" in userInfo>键是：{{key}}---值是：{{value}} ---索引下标是：{{i}} //进行遍历对象属性身上的属性
***2.进行迭代数组
***<p v-for="(item,i)in list">index:{{i}}--------value:{{item}}</p>
***3.用来迭代数字
***<p v-for="i in 10">这是第{{i}}个标签</p>
***2.2.0+ 的版本里，**当在组件中使用** v-for 时，key 现在是必须的。通过key来唯一标识。
## Vue指令之`v-if`和`v-show`
> 一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。