1. Hello Vue 例子
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>我的第一个HTML5</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
效果:
2. Vue语法格式
每个 Vue 应用都是通过用 Vue
函数创建一个新的 Vue 实例开始的:
var vm = new Vue({
// 选项
})
3. 模板语法
3.1 插值
3.1.1 文本
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值。标签将会被替代为对应数据对象上 msg
属性的值。无论何时,绑定的数据对象上 msg
属性发生了改变,插值处的内容都会更新。
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
3.1.2 原始HTML
使用 v-html 指令用于输出 html 代码:
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<h1>我是谁</h1>'
}
})
</script>
3.1.3 属性
HTML 属性中的值应使用 v-bind 指令
<style>
.myclass {
background-color: yellow;
}
</style>
<body>
<div id="app">
<span for="r1">修改颜色</span><input type="checkbox" v-model="use" id="r1">
<br>
<br>
<div v-bind:class="{ 'myclass': use}">我的背景会变色哦</div>
</div>
<script>
var vm =new Vue({
el:'#app',
data:{
use:false
}
});
</script>
</body>
效果:
3.1.4 使用JavaScript表达式
Vue.js 都提供了完全的 JavaScript 表达式支持。
<body>
<div id="app">
{{ index+5 }}<br>
{{ msg }}
</div>
<script>
new Vue({
el:'#app',
data:{
index:10086,
msg:"My name is zuowei.zhang"
}
});
</script>
</body>
效果:
3.2 指令
指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时,将某些行为应用到 DOM 上。
还是上面的例子,加上v-if :
<div id="app" v-if="seen">
{{ index+5 }}<br>
{{ msg }}
</div>
<script>
new Vue({
el:'#app',
data:{
index:10086,
msg:"My name is zuowei.zhang",
seen:false
}
});
</script>
当seen的值为false,整个div就不可见了。
3.2.1 参数
参数在指令后以冒号指明。
<body>
<div id="app">
<a v-bind:href="url">百度</a>
</div>
<script>
new Vue({
el:'#app',
data:{
url:'http://www.baidu.com'
}
});
</script>
</body>
3.2.2 修饰符
修饰符是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():
<form v-on:submit.prevent="onSubmit"></form>
3.3 缩写
Vue.js 为两个最为常用的指令提供了特别的缩写:v-on,v-bind
3.3.1 v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
3.3.2 v-bind 缩写
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
4. 计算属性
计算属性关键词: computed。计算属性在处理一些复杂逻辑时是很有用的。
4.1 基础例子
<body>
<div id="app">
{{computedMsg}}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello'
},
computed: {
computedMsg: function () {
return this.message.split('').reverse().join('')
}
}
});
</script>
</body>
如果使用 methods 的话,也是同样的效果:
<body>
<div id="app">
{{computedMsg()}}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello'
},
methods: {
computedMsg: function () {
return this.message.split('').reverse().join('')
}
}
});
</script>
</body>
两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。
我们为什么需要缓存?假设我们有一个性能开销比较大的计算属性 A,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存,我们将不可避免的多次执行 A 的 getter!如果你不希望有缓存,请用方法来替代。
5. 监听属性
虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch
选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。
5.1 基础例子
<body>
<div id="app">
<input type="text" v-model="info">
{{value}}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
info: "",
value: ""
},
watch: {
info() {
this.value = this.info;
}
}
})
</script>
</body>
效果:
6. 事件处理器
6.1 v-on
6.1.1 v-on例子:
<body>
<div id="app">
<button v-on:click="msg += 1">加1</button>
{{ msg }}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 0
}
})
</script>
</body>
效果:
6.1.2 事件修饰符
Vue.js为v-on提供了事件修饰符来处理DOM事件细节:
<!-- 阻止单击事件继续传播 -->
<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>
7. 表单
v-model
指令在表单 <input>
、<textarea>
及 <select>
元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
v-model
会忽略所有表单元素的 value
、checked
、selected
特性的初始值而总是将 Vue 实例的数据作为数据来源。
8. 组件
组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树。
8.1 语法
全局组件语法格式如下:
Vue.component(tagName, options)
tagName 为组件名,options 为配置选项。注册后,可以使用以下方式来调用组件:
<tagName></tagName>
8.2 全局组件实例
<body>
<div id="app">
<zzw></zzw>
</div>
<script>
Vue.component('zzw', {
template: '<h1>这是自定义组件</h1>'
})
new Vue({
el: '#app'
})
</script>
</body>
效果: