简介
- Vue.js是一套构建用户界面的渐进式框架
- Vue 只关注视图层, 采用自底向上增量开发的设计
- Vue 是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件
Vue实例
- 每个 Vue 应用都通过实例化 Vue 来实现
- 变量名vm是受到了MVVM模型的启发
- el 参数绑定对应DOM元素
- data 定义属性
- methods 定义函数
1 2 3 4 5 6 7 8 9 10 11
| var vm = new Vue({ el: '#app', data: { msg: 'test' }, methods: { handle() { alert("alert") } } })
|
插值
文本插值
1
| <span>Message: {% raw %}{{ msg }}{% endraw %}</span>
|
v-text会覆盖元素中原本的内容,{{...}}只会替换自己的这个占位符,不会把整个元素内容替换
HTML插值
1
| <span v-html="rawhtml"></span>
|
1 2 3
| data: { rawhtml: '<p>hello</p>' }
|
属性
1
| <button v-bind:disabled="isButtonDisabled">Button</button>
|
1 2 3
| data: { isButtonDisabled: true }
|
1
| <button :disabled="isButtonDisabled">Button</button>
|
JS表达式
- 对于所有的数据绑定,Vue.js 都提供了完全的 JavaScript 表达式支持
1 2 3 4 5
| {% raw %}{{number + 1}}{% endraw %}
{% raw %}{{ok ? 'YES' : 'NO'}}{% endraw %}
{% raw %}{{message.split('').reverse().join('')}}{% endraw %}
|
注意JS表达式和JS语句的区别
指令
- v-bind 指令,如前文所示
- v-on 指令,用于监听 DOM 事件
1
| <a v-on:click="doSomething">...</a>
|
1 2 3 4 5
| methods: { doSomething() { alert("alert") } }
|
1
| <a @click="doSomething">...</a>
|
- v-model 指令,用于在表单<input>、<textarea> 及 <select> 元素上实现双向数据绑定
1 2
| <input v-model="message" placeholder="edit me"> <p>Message is: {% raw %}{{ message }}{% endraw %}</p>
|
1
| <h1 v-if="awesome">Vue is awesome!</h1>
|
1 2 3
| data: { awesome: true }
|
- v-else指令,用于表示 v-if 的“else 块”
1 2 3 4 5 6
| <div v-if="Math.random() > 0.5"> Now you see me </div> <div v-else> Now you don't </div>
|
1
| <h1 v-show="ok">Hello!</h1>
|
v-if和v-show的区别:
带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的display样式
如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好
- v-for 指令,用于列表渲染
- v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组,而 item 则是被迭代的数组元素的别名
1 2 3 4 5
| <ul id="example-1"> <li v-for="item in items"> {% raw %}{{ item.message }}{% endraw %} </li> </ul>
|
1 2 3 4 5 6 7 8 9
| new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } })
|
计算属性和侦听器
计算属性
- 计算属性,通过computed来实现复杂逻辑运算
- 计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值
1 2 3 4
| <div id="example"> <p>Original message: "{% raw %}{{ message }}{% endraw %}"</p> <p>Computed reversed message: "{% raw %}{{ reversedMessage }}{% endraw %}"</p> </div>
|
1 2 3 4 5 6 7 8 9 10 11 12 13
| new Vue({ el: '#example', data: { message: 'Hello' }, computed: { reversedMessage: function () { return this.message.split('').reverse().join('') } } })
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| computed: { fullName: { get: function () { return this.firstName + ' ' + this.lastName }, set: function (newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } } }
|
侦听器
1
| <div id="demo">{% raw %}{{ fullName }}{% endraw %}</div>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ' ' + val } } })
|
事件修饰符
- .stop 阻止事件冒泡到父元素
- .prevent 阻止元素发生默认的行为
- .capture 内部元素触发的事件先在此处理,然后才交由内部元素进行处理
- .self 忽略事件冒泡和事件捕获对本元素的影响
- .once 事件将只会触发一次
- .passive
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
| <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>
<div v-on:click.self="doThat">...</div>
<a v-on:click.once="doThis"></a>
<div v-on:scroll.passive="onScroll">...</div>
|
表单输入绑定
- v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件:
- text 和 textarea 元素使用 value property 和 input 事件
- checkbox 和 radio 使用 checked property 和 change 事件
- select 字段将 value 作为 property 并将 change 作为事件
文本/多行文本
1 2
| <input v-model="message"> <textarea v-model="message"></textarea>
|
复选框
1
| <input type="checkbox" id="checkbox" v-model="checked">
|
1 2 3 4 5 6
| new Vue({ el: '...', data: { checked: false } })
|
1 2 3
| <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
|
1 2 3 4 5 6
| new Vue({ el: '...', data: { checkedNames: [] } })
|
单选按钮
1 2
| <input type="radio" id="one" value="One" v-model="picked"> <input type="radio" id="two" value="Two" v-model="picked">
|
1 2 3 4 5 6
| new Vue({ el: '#example-4', data: { picked: '' } })
|
表单修饰符
- .lazy 默认情况下, v-model 在 input 事件中同步输入框的值与数据,添加一个修饰符 lazy ,从而转变为在 change 事件中同步
1
| <input v-model.lazy="msg" >
|
- .number 自动将用户的输入值转为 Number 类型(如果原值的转换结果为 NaN 则返回原值)
1
| <input v-model.number="age" type="number">
|
1
| <input v-model.trim="msg">
|
组件
注册
全局注册
1 2
| Vue.component('component-a', { }) new Vue({ el: '#app' })
|
局部注册
1 2 3 4 5 6 7
| var ComponentA = { } new Vue({ el: '#app', components: { 'component-a': ComponentA } })
|