Vuejs系列——基础部分
作为现阶段比较火热的前端框架，vue优势在于国产，文档等详尽，社区活跃，设计模式MVVM能够比较适合国内大部分开发习惯。
1. Vue实例
var vm = new Vue({
el:"#app",
data:{
msg:'hello world'
},
method:{},
created:function(){
}
})
上面对应了简单的一个Vue实例，现在来大概解释下：
- el指定对应的容器能够绑定到这个vm实例
- data里面存储一些数据
- method写方法
- created是生命周期函数，还有其他的，暂时没列出
2. 模板方法
Vue的模板是合法的html，能够被解析
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：
<span>Message: {{ msg }}</span>
Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。结合上面的msg，那这个地方就会显示hello world。
Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 [v-bind 指令]
在布尔特性的情况下，它们的存在即暗示为 true，v-bind 工作起来略有不同，在这个例子中：
<div v-bind:id="dynamicId"></div>
如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled 特性甚至不会被包含在渲染出来的 <button> 元素中。
<button v-bind:disabled="isButtonDisabled">Button</button>
Vue.js 都提供了完全的 JavaScript 表达式支持。
但只支持单个表达式，不能够写语句
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
v-if
v-on
v-bind:href //可缩写 :href
v-on:click //可缩写 @click
v-on:submit.prevent
3. 计算属性和侦听属性
计算属性是computed，
侦听属性是watch
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello',
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
4. Class 与 Style 绑定
我们可以传给 v-bind:class 一个对象，以动态地切换 class：
对象中传入更多属性来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class 属性共存。
<div v-bind:class="{ active: isActive }"></div>
<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
们可以把一个数组传给 v-bind:class，以应用一个 class 列表
<div v-bind:class="[activeClass, errorClass]"></div>
//渲染为
<div class="active text-danger"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
v-bind:style的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名：
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
5. 条件渲染 v-if 、 v-show
v-if 支持html 支持 template
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
v-show 只支持html 不支持 template
<h1 v-show="ok">Hello!</h1>
6. 列表渲染v-for
数组
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
也可以用 of 替代 in 作为分隔符
对象
<div v-for="(value, key) in object">
{{ key }}: {{ value }}
</div>
7. 事件处理
事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。
.stop.prevent.capture.self.once.passive
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
按键修饰符
在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">
全部的按键别名：
.enter.tab-
.delete(捕获“删除”和“退格”键) .esc.space.up.down.left.right
8. 表单输入
你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
修饰符
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >
<!-- 如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符： -->
<input v-model.number="age" type="number">
<!--如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符： -->
<input v-model.trim="msg">
