1. Vue
1). Vue文档
2). 引用
<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者：
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
3). Hello World
- html
<div id="app">
{{ message }}
</div>
- js
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
// 修改文本
app.message = 'mazaiting'
2. 使用
1). 绑定元素特性
- html
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息
</span>
</div>
- js
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于' + new Date().toLocaleString()
}
})
2). 切换元素是否显示
- html
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
- js
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
// 设置为false时不显示
app3.seen=false
3). 循环
- html
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
- js
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
})
// 新增
app4.todos.push({ text: '新项目' })
// 移除
app4.todos.pop()
4). 事件监听器
- html
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆转消息</button>
</div>
- js
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
5). 表单输入和应用状态之间的双向绑定
- html
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
- js
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
6). 组件
- html
<ol>
<!-- 创建一个 todo-item 组件的实例 -->
<todo-item></todo-item>
</ol>
- js
// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
template: '<li>这是个待办项</li>'
})
7). 组件添加属性
- html
<div id="app-7">
<ol>
<!--
现在我们为每个 todo-item 提供 todo 对象
todo 对象是变量，即其内容可以是动态的。
我们也需要为每个组件提供一个“key”，稍后再
作详细解释。
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id">
</todo-item>
</ol>
</div>
- js
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
})
8). 停止响应更新
var obj = {
foo: 'bar'
}
// 禁止响应更新
Object.freeze(obj)
new Vue({
el: '#app',
data: obj
})
9). 实例属性和方法
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
// 这个回调将在 `vm.a` 改变后调用
})
10). 生命周期
图1.png
3. 模板语法
1). 文本
- 不改变数据
// 一次性地插值，当数据改变时，插值处的内容不会更新。
<span v-once>这个将不会改变: {{ msg }}</span>
2). 原始 HTML
// 输出网页代码
<p>Using mustaches: {{ rawHtml }}</p>
// 输出渲染后的代码样式
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
3). 特性
// 如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled 特性甚至不会被包含在渲染出来的 <button> 元素中。
<button v-bind:disabled="isButtonDisabled">Button</button>
4). 缩写
- v-bind缩写
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
- v-on缩写
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
