VUE是什么
vue是一套用来构建用户界面的JavaScript框架
在学习vue之前，必须要有HTML、CSS、JavaScript的扎实基础
当前vue的最新版本是2.x
VUE的使用
使用script标签引入
使用vue-cli来快速搭建脚手架
VUE实例
每一个vue应用都是通过用vue函数来创建一个vue实例开始的：
var vm = new Vue({ //选项})每一个vue应用，都是由一个通过new Vue创建的根Vue实例和可选的、可嵌套的、可复用的组件树组成。
data对象
vue中的data对象里，在vue实例创建的时候，在其响应式系统中加入了所有能在data中找到的属性，当这些属性的值发生改变的时候，视图也会响应，一起改变。
var vm = new Vue({ data: data
})除了数据属性，vue实例中还暴露了一些有用的实例属性和方法。它们都有前缀$，可以和用户定义的属性区分开来
模板语法
文本
数据绑定最常见的是“mustache”语法，也就是双大括号：
<span>Message: {{ msg }}<span>双大括号里的内容将会被替代为数据对象上面的msg属性的值，如果绑定的这个属性的值发生改变，那么大括号内的内容会跟着更新。
在数据绑定里，还可以支持JavaScript表达式（非语句）。
内部指令
vue内部可以使用在HTML上，HTML会根据这些指令来执行对应的任务，响应式地作用于dom。
v-html
双大括号里会把数据解释为普通文本，而不是HTML，所以如果想输出真正的HTML，那就要使用v-html命令：
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
v-bind
假如你想像双大括号语法一样修改HTML的属性，那么这时候用双大括号就不行了，需要使用v-bind语法：
<div v-bind:id="dynamicId"></div>
这个指令还有一个常用的缩写形式：
<a :href="url"></a>
v-on
这个指令可以用来监听DOM事件，并在触发时运行一些JavaScript代码
<button v-on:click="counter += 1">Add 1 </button>
v-on里还可以接受一个需要调用方法的名称。
如果需要在内联语句处理器中访问原始的DOM时间，可以使用特殊变量$event把它传入方法。
vue还为v-on提供了事件修饰符：
.stop 阻止事件继续传播
.prevent 提交的事件不再阻止页面
.capture 添加事件监听器时使用事件捕获模式
.self 只当在event.target是当前元素自身时触发处理函数
.once 点击事件将只触发一次
.passive 滚动事件的默认行为将会立即触发
按键修饰符
<input v-on:keyup.13="submit">
除了根据keycode来调用键值，还可以使用vue提供的别名，比如enter等。
条件渲染 v-if
条件渲染可以根据条件来决定是否渲染dom：
<h1 v-if="ok"></h1>
也可以使用v-else来添加一个else块，v-else元素必须跟在v-if 的后面。还有v-else-if。
当想切换多个元素的时候，可以在template元素上使用v-if，template就可以当做不可见的元素。
假如两个模板使用了相同的HTML元素，在进行切换的时候，这个元素是不会更新的，这时候就可以使用key值来给这个元素做一个绑定，这个key值是唯一的，因此同一个元素上绑定的两个key值可以让这两个元素都是独立的。
v-show
这个命令可以根据条件选择是否展示元素。
<h1 v-show="ok">Hello!</h1>
v-if 和v-show的区别
v-if是真正的条件渲染，在切换的时候会有适当的销毁和重建，如果是假，那么就会什么也不渲染。
而v-show则是一个改变元素display的指令，只是基于CSS的切换。
v-for
v-for可以根据一组数据的选项列表来进行渲染，语法比较特殊：
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})其中的items是原数据数组，定义在data里，而item则是数组元素迭代的别名。也可以取整数表示重复。
v-for还支持一个可选参数，当做数组的索引。
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }} </li></ul>其中的in也可以被of所替代 。
v-for还可以操作对象，通过一个对象的属性来进行迭代。如果设置第二个参数key，那么就是属性名。
当使用v-for的时候，如果更新已经渲染的元素列表，那么v-for会就地复用，为了方便它可以跟踪每一个节点的身份，所以必须要给一个key值，每项都有唯一的id。
变异方法
这些针对于数组的方法都能够改变原始数组，而非变异方法则不会改变原始数组，而是返回一个新的数组。
和原生js的数组操作方法一样，如push()等。
v-for和v-if
v-for和v-if处于同一节点的时候，v-for比v-if的优先级要高。
表单输入绑定
可以使用v-model指令在表单元素上创建双向绑定。
<input v-model="message" placeholder="edit me"><p>Message is: {{ message }}</p>表单输入绑定的修饰符
.lazy修饰符可以转变为使用change事件时进行同步
.number 如果想自动给用户的输入值转为数值类型
.trim 如果要自动过滤用户输入的首尾空白字符
class与style绑定
我们可以给v-bind:class传一个对象，动态的切换class：
<div v-bind:class="{ active: isActive }"></div>方法、计算属性与侦听器
数据我们可以定义在data里，方法我们可以定义在methods里。
当然，除了方法之外，还有一些复杂的逻辑，我们可以使用计算属性。
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: { // 计算属性的 getter
reversedMessage: function () { // `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})与方法不同，计算属性是基于它们的依赖进行缓存的，只在相关依赖发生改变时才会重新求值。
Vue还提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
var watchExampleVM = new Vue({ el: '#watch-example', data: { question: '', answer: 'I cannot give you an answer until you ask a question!'
}, watch: { // 如果 `question` 发生改变，这个函数就会运行
question: function (newQuestion, oldQuestion) { this.answer = 'Waiting for you to stop typing...'
this.debouncedGetAnswer()
}
}
作者：闰土在流浪
链接：https://www.jianshu.com/p/b52b0a4253d6
共同学习，写下你的评论
评论加载中...
作者其他优质文章
