一、VUE介绍
二、VUE的指令系统
三、计算属性和帧听器
四、表单输入绑定
一、VUE介绍
1.在前端框架技术中有三大框架：Angularjs：谷歌公司生产 React：Facebook公司 Vue:尤雨溪（中国）
2.vue的介绍
vue官网说：Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。
3.vuejs的优点
1.易用。已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！
2.灵活。不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。
3.高效。20kB min+gzip 运行大小、超快虚拟 DOM、最省心的优化
虚拟的DOM的核心思想是：对复杂的文档DOM结构，提供一种方便的工具，进行最小化地DOM操作。这句话，也许过于抽象，却基本概况了虚拟DOM的设计思想
(1) 提供一种方便的工具，使得开发效率得到保证(2) 保证最小化的DOM操作，使得执行效率得到保证
虚拟dom的渲染速度要比我们真实的dom渲染速度快
二、VUE的指令系统
1.导入vue.js
<script src="https://cdn.bootcss.com/vue/2.5.17/vue.js"></script>
2.创建实例对象
<div class="app">{{msg}}</div>
var app = new Vue({
el:'.app',
data:{
msg:'hello, world!'
}
})
下面开始介绍用法：
-
{{ msg }} 两个花括号之间可以传入一个变量；
-
{{1==1?'yes':'no'}} 插入判断
指令系统：
1、v-if
<div v-if = 'show'>显示</div>
<div v-else-if = 'no'>不确定</div>
<div v-else>隐藏</div>
show:true,
2、v-show
v-if 和 v-show的区别在于v-if是真正的销毁节点，而v-show只是隐藏了节点。（display：none）
<p v-show='is_show'>显示</p>
is_show:false
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
class与style绑定：
1、v-bind
<p v-bind:title='time'>{{time}}</p>
time: `现在时间${new Date().toLocaleString()}`,
.col1 {color: red;}
<div v-bind:class='{col1:is_red}'>11111</div>
is_red: true,
2、v-on
.col1 {color: red;}
<div v-bind:class='{col1:is_red}'>11111</div>
<button v-on:click='clicker'>click me</button>
var app = new Vue({
el:'.app',
data:{
msg:'hello, world!',
is_red: true,
},
methods:{
clicker(){
this.is_red = !this.is_red;
}
}
})
3、三元表达式
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
为了简便，可以这样写
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
事件处理：
可以用v-on来监听DOM事件，并在触发时运行一些js代码
<button v-on:click='counter+=1'>{{counter}}</button>
counter: 0,
4.为什么在HTML中监听事件？
你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。但不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 v-on 有几个好处：
1. 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
2. 因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
3. 当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。
在这里多补充一点：v-bind可以简写为：、v-on: 可以简写@
三、计算属性和帧听器
1.计算属性
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：
<div>
{{ message.split('').reverse().join('') }}
</div>
在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。
所以，对于任何复杂逻辑，你都应当使用计算属性。
<div id = 'com'>
<h3>{{msg}}</h3>
<p>{{currentMsg}}</p>
<button @click='clickHandler'>更改</button></div>
var com = new Vue({
el:'#com',
data:{
msg:'学习computed'
},
methods:{
clickHandler(){
this.msg = '我更改了数据'
}
},
computed:{
currentMsg(){
// computed方法中默认只有getter
return this.msg
}
}
})
当我点击按钮的时候更改了当前的数据，同时h3和p标签中数据也随时改变。
2.为什么会这样呢？
因为Vue知道com.currentMsg依赖与com.msg,因此当com.msg发生改变时，所有依赖com.currentMsg的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系。：计算属性的getter函数是没有副作用的，这使它更易于测试和理解。
同样的上面操作，我们不用computed声明的计算属性方法，而仅仅通过methods中声明的方法也能完成上面的效果，那么为什么又要使用computed方法呢？
因为计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要msg还没有发生变化，多次访问currentMsg计算属性会立刻返回之前计算的结果，而不比再次执行函数。同样的。每当触发重新渲染时，调用方法将总会执行函数。
我们为什么需要缓存？假设我们有一个性能开销比较大的的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。
3.计算属性的getter
计算属性默认只有getter，不过在需要时你也可以提供一个setter。
var com = new Vue({
el:'#com',
data:{
msg:'学习computed'
},
methods:{
clickHandler(){
this.currentMsg = '我更改了数据'
}
},
computed:{
currentMsg:{
set : function(newValue){
this.msg = newValue;
},
get : function(){
return this.msg;
}
}
}
})
当点击按钮的时候，会触发computed中的setter方法，从而将newValue的值，赋值给msg。因为计算属性方法的getter方法因为跟msg有依赖关系，从而会相应的发生改变。
四、表单输入绑定
vue的核心：声明式的指令和数据的双向绑定。
1.那什么是数据的双向绑定?
另外，大家一定要知道vue的设计模式：MVVM
M是Model的简写，V是View的简写，VM就是ViewModel。
单向绑定和双向绑定的区别？
单向绑定非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新。
有单向绑定，就有双向绑定。
如果用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定。
什么情况下用户可以更新View呢？填写表单就是一个最直接的例子。当用户填写表单时，View的状态就被更新了，如果此时MVVM框架可以自动更新Model的状态，那就相当于我们把Model和View做了双向绑定。
其实单项数据也有双向绑定的意思，不过页面变动后数据的变化不会发生自动更新。
我们可以这样认为：双向数据绑定=单向数据绑定+UI事件监听。
我们先看个vue中双向数据绑定的例子：
<body>
<div id="app">
<input type="text" v-model="meg">
<p>{{data}}</p>
</div>
<script>
var app = new Vue({
el:'#app',
data :{
meg:''
}
})
</script></body>
再简单不过了，效果显示，当我们在input输入框中输入内容的时候，下面p标签同步显示内容。这就是最典型的双向数据绑定的例子。vue里使用v-model实现此想法。
那么我们看一下v-model的实现原理是怎样的呢？
通过官网的介绍，我们知道v-mode指令是v-bind:vlaue 和v-on:input的结合体。
2.看个例子吧，同时给大家介绍了计算属性getter的用法。
<!-- <input type="text" v-model = 'usernameValue'> -->
<!-- 等价于： -->
<input type="text" v-bind:value='usernameValue' @input='inputHandler'>
<button @click='commitHandler'>提交</button>
<!-- ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例 -->
<div class="list" ref = 'item'></div>
var set = new Vue({
el:'#set',
data:{
username:'',
txt:''
},
methods:{
commitHandler(){
this.$refs.item.innerHTML = this.usernameValue;
},
inputHandler(e){
this.usernameValue = e.target.value;
}
},
computed:{
usernameValue:{
get(){
return this.username;
},
set(newValue){
this.username = newValue;
}
}
}
看完上个例子之后，相信大家对v-model实现双向数据绑定和计算属性的setter方法一定有个新的认识了。
3.接下来我们看看v-model的一些基础用法！
v-model
v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
v-model只适用在表单控件中
比如：表单文本、多行文本、复选框、单选按钮、多选按钮、选择框。内容太多，就不给大家一一阐述了。大家一定要去阅读vue的官网文档
https://cn.vuejs.org/v2/guide/forms.html