VUE的基本使用 学习笔记
一、 简介
- Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。
- Vue 只关注视图层, 采用自底向上增量开发的设计。
- Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
- Vue 学习起来非常简单,本教程基于 Vue 2.9.3 版本测试。
二、 安装
三 、 创建项目
创建一个基于webpack模板的项目
vue init webpack myVue 之后需要进行一些配置 , 默认情况下直接回车即可
测试运行
npm run dev 在浏览器中访问 localhost:8080
- vue 目录结构
-
2.
目录\文件 | 说明 |
---|---|
build | 项目构建(webpack)相关代码 |
config | 配置目录,包括端口号等。我们初学可以使用默认的。 |
node_modules | npm加载的项目依赖模块 |
src | 这是我们要开发的目录 ,基本上要做的事情都在这个目录里面 , 里面包含了几个目录及文件 : 1. assets : 放置一些图片 如logo等 2. components : 里面放了一些组件文件 , 可以不用 3. App.vue : 项目的入口文件 , 我们可以将组件直接写在这里 。 4. main.js : 项目的核心文件 |
static | 静态资源文件 , 如图片 、 字体等 |
test | 初始测试目录 , 可以删除 |
.xxx 文件 | 这是一些配置文件 |
index.html | 首页入口文件 , 你可以添加一些mate信息或统计代码啥的 |
package.json | 项目配置文件 |
README.md | 项目的说明文档 markdown 格式 |
4. vue文件结构 (以App.vue为例)
<!-- 展示模板 -->
<template>
<div id="app">
<img src="./assets/logo.png">
<hello></hello>
</div>
</template>
<!--js代码-->
<script>
// 导入组件
import Hello from './components/Hello'
export default {
name: 'app',
components: {
Hello
}
}
</script>
<!-- 样式代码 -->
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
1. 尝试修改vue文件中的内容 , 发现一般情况下 , 修改vue文件之后 , 浏览器中的界面会自动刷新
四 、 安装vue 调试神器
- vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率。接下来我们就介绍一下vue-devtools的安装。
安装 :
- 从chrom 商店下载 , 后直接安装 ,非常的简单
从git 上获取资源后安装:
从git上获取资源
git地址: https://github.com/vuejs/vue-devtools
解压后 cmd进入到解压目录 安装所需的依赖模块
npm install // 如果觉得速度太慢 可以将npm 升级成为 cnpm 执行cnpm install
编译项目文件
npm run build
- 添加到Chrome的扩展程序中:
- 测试安装效果 :
- 在浏览器中访问vue编写的页面 , 打开F12会看到有vue一栏
五、 模板语法
- Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
- Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统
- 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
数据绑定:
文本:
数据绑定最常见的形式就是使用 {{…}}(双大括号)的文本插值:
<div id="app"> <p>{{ message }}</p> </div> <script> new Vue({ el: '#app', data: { message: 'hello world' } }) </script>
html :
使用 v-html 指令用于输出 html 代码:
<div id="app"> <div v-html="message"></div> </div> <script> new Vue({ el: '#app', data: { message: '<h1> hello world</h1>' } }) </script>
属性:
- HTML 属性中的值应使用 v-bind 指令。
以下实例判断 class1 的值,如果为 true 使用 class1 类的样式,否则不使用该类:
<div id="app"> <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1"> <br><br> <div v-bind:class="{'class1': class1}"> directiva v-bind:class </div> </div> <script> new Vue({ el: '#app', data:{ class1: false } }); </script>
表达式:
Vue.js 都提供了完全的 JavaScript 表达式支持。
{{5+5}}new Vue({ el: '#app', data: { ok: true, message: 'RUNOOB', id : 1 } })
{{ ok ? ‘YES’ : ‘NO’ }}
{{ message.split(”).reverse().join(”) }}hello world
指令 :
- 指令是带有v- 前缀的特殊属性 。
指令用于在表达式值改变时 , 将某些行为应用到DOM上 。
<div id="app"> <p v-if="seen">现在你看到我了</p> </div> <script> new Vue({ el: '#app', data: { seen: true } }) </script>
参数 :
参数在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性:
<div id="app"> <pre><a v-bind:href="url">hello world</a></pre> </div> <script> new Vue({ el: '#app', data: { url: 'http://www.runoob.com' } }) </script> 在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
另一个例子是 v-on 指令,它用于监听 DOM 事件:
<a v-on:click="doSomething">
修饰符 :
修饰符是以半角句号 . 指明的特殊后缀,用于指出一个指定应该以特殊方式绑定。例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():
<form v-on:submit.prevent="onSubmit"></form>
用户输入:
在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定:
<div id="app"> <p>{{ message }}</p> <input v-model="message"> </div> <script> new Vue({ el: '#app', data: { message: 'Runoob!' } }) </script>
按钮的事件我们可以使用v-on 监听事件 , 并对用户的输入做出响应
以下实例在用户点击按钮后对字符串进行翻转操作:
{{ message }}
反转字符串
过滤器 :
vue.js 允许你定义自己的过滤器 , 被用作一些不常用的文格式化操作 。 由”管道符”指示 , 格式如下:
<div id="app"> {{ message | capitalize }} </div> <script> new Vue({ el: '#app', data: { message: 'runoob' }, filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } }) </script>
过滤器可以串联 :
{{ message | filterA | filterB }}
过滤器也是javaScript函数 , 因此可以接收参数:
{{ message | filterA('arg1', arg2) }} 这里message 作为过滤器的第一个参数 , 字符串‘arg1’将传给过滤器作为第二个参数 , arg2 表达式的值将被求值然后传给过滤器作为第三个参数 。
缩写 :
v-bind缩写:
<!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a>
v-on 缩写 :
<!-- 完整语法 --> <a v-on:click="doSomething"></a> <!-- 缩写 --> <a @click="doSomething"></a>
六 、 vue.js 条件与循环
条件判断 :
v-if : 用于条件判断
<div id="app"> <p v-if="seen">现在你看到我了</p> <template v-if="ok"> <h1>hello world</h1> <p>学的不仅是技术,更是梦想!</p> <p>哈哈哈,打字辛苦啊!!!</p> </template> </div> <script> new Vue({ el: '#app', data: { seen: true, ok: true } }) </script>
v-else : 可以用 v-else 指令给 v-if 添加一个 “else” 块:
<div id="app"> <div v-if="Math.random() > 0.5"> Sorry </div> <div v-else> Not sorry </div> </div> <script> new Vue({ el: '#app' }) </script>
v-else-if : v-else-if 在 2.1.0 新增,顾名思义,用作 v-if 的 else-if 块。可以链式的多次使用:
<div id="app"> <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> </div> <script> new Vue({ el: '#app', data: { type: 'C' } }) </script>
v-show : 我们也可以使用 v-show 指令来根据条件展示元素:
<h1 v-show="ok">Hello!</h1>
循环语句:
- v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表:
<div id="app"> <ol> <li v-for="site in sites"> {{ site.name }} </li> </ol> </div> <script> new Vue({ el: '#app', data: { sites: [ { name: 'Runoob' }, { name: 'Google' }, { name: 'Taobao' } ] } }) </script>
v-for 迭代对象 :
<div id="app"> <ul> <li v-for="value in object"> {{ value }} </li> </ul> </div> <script> new Vue({ el: '#app', data: { object: { name: '菜鸟教程', url: 'http://www.runoob.com', slogan: '学的不仅是技术,更是梦想!' } } }) </script> 迭代对象时默认迭代的是对象数据中的value , 想使用key的话 , 可以指定第二个参数 : <div id="app"> <ul> <li v-for="(value, key) in object"> {{ key }} : {{ value }} </li> </ul> </div> 如果想要使用索引 , 可以指定第三个参数 : <div id="app"> <ul> <li v-for="(value, key, index) in object"> {{ index }}. {{ key }} : {{ value }} </li> </ul> </div>
v-for 迭代整数
<div id="app"> <ul> <li v-for="n in 10"> {{ n }} </li> </ul> </div>
七、 vue计算属性
- 计算属性关键词: computed。
计算属性在处理一些复杂逻辑时是很有用的。
<div id="app"> <p>原始字符串: {{ message }}</p> <p>计算后反转字符串: {{ reversedMessage }}</p> </div> <script> var vm = new Vue({ el: '#app', data: { message: 'Runoob!' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } } }) </script> 提供的函数将用作属性 vm.reversedMessage 的 getter 。
- computed VS methods
- 我们可以使用methods来代替computed , 效果是一样的 , 但是computed是基于他的依赖缓存 , 只有相关依赖发生改变时才会重新取值 , 而是用methods , 在重新渲染的时候 , 函数总是会被重新调用执行 。
- 可以说是 computed性能更好 , 但是如果你不希望使用缓存 ,你可以使用methods 。
computed setter
computed属性在默认只有gettter , 不过在需要时你也可以提供一个setter :
var vm = new Vue({ el: '#app', data: { name: 'Google', url: 'http://www.google.com' }, computed: { site: { // getter get: function () { return this.name + ' ' + this.url }, // setter set: function (newValue) { var names = newValue.split(' ') this.name = names[0] this.url = names[names.length - 1] } } } }) // 调用 setter, vm.name 和 vm.url 也会被对应更新 vm.site = '菜鸟教程 http://www.runoob.com'; document.write('name: ' + vm.name); document.write('<br>'); document.write('url: ' + vm.url); 从实例运行结果看在运行 vm.site = '菜鸟教程 http://www.runoob.com'; 时,setter 会被调用, vm.name 和 vm.url 也会被对应更新。
八、 监听属性
我们可以通过watch来响应数据的变化 。
<div id = "computed_props"> 千米 : <input type = "text" v-model = "kilometers"> 米 : <input type = "text" v-model = "meters"> </div> <p id="info"></p> <script type = "text/javascript"> var vm = new Vue({ el: '#computed_props', data: { kilometers : 0, meters:0 }, methods: { }, computed :{ }, watch : { kilometers:function(val) { this.kilometers = val; this.meters = val * 1000; }, meters : function (val) { this.kilometers = val/ 1000; this.meters = val; } } }); </script>
九、 样式绑定
- vue.js class
- class 与style 是html 元素的属性 , 用于设计元素的样式 , 我们可以用v-bind来设置样式属性 。
class 属性绑定
我们可以为v-bind:class 设置一个对象 , 从而动态的切换class :
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> <style> .active { width: 100px; height: 100px; background: green; } </style> </head> <body> <div id="app"> <div v-bind:class="{ active: isActive }"></div> </div> <script> new Vue({ el: '#app', data: { isActive: true } }) </script>
我们也可以直接绑定数据里的一个对象:
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> <style> .active { width: 100px; height: 100px; background: green; } .text-danger { background: red; } </style> </head> <body> <div id="app"> <div v-bind:class="classObject"></div> </div> <script> new Vue({ el: '#app', data: { classObject: { active: true, 'text-danger': true } } }) </script> </body>
数组语法:
我们可以把一个数组传给 v-bind:class ,实例如下:
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> <style> .active { width: 100px; height: 100px; background: green; } .text-danger { background: red; } </style> </head> <body> <div id="app"> <div v-bind:class="[activeClass, errorClass]"></div> </div> <script> new Vue({ el: '#app', data: { activeClass: 'active', errorClass: 'text-danger' } }) </script>
十、 vue.js style (内联样式)
我们可以在 v-bind:style 直接设置样式:
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div> </div> <script> new Vue({ el: '#app', data: { activeColor: 'green', fontSize: 30 } }) </script>
绑定一个样式对象
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <div v-bind:style="styleObject">菜鸟教程</div> </div> <script> new Vue({ el: '#app', data: { styleObject: { color: 'green', fontSize: '30px' } } }) </script>
十一 、 事件处理器
v-on 事件监听 :
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <button v-on:click="counter += 1">增加 1</button> <p>这个按钮被点击了 {{ counter }} 次。</p> </div> <script> new Vue({ el: '#app', data: { counter: 0 } }) </script> </body>
可以接收一个定义的方法来调用
<div id="app"> <!-- `greet` 是在下面定义的方法名 --> <button v-on:click="greet">Greet</button> </div> <script> var app = new Vue({ el: '#app', data: { name: 'Vue.js' }, // 在 `methods` 对象中定义方法 methods: { greet: function (event) { // `this` 在方法里指当前 Vue 实例 alert('Hello ' + this.name + '!') // `event` 是原生 DOM 事件 if (event) { alert(event.target.tagName) } } } }) // 也可以用 JavaScript 直接调用方法 app.greet() // -> 'Hello Vue.js!' </script>
事件修饰符 :
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> <!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 --> <div v-on:click.self="doThat">...</div> <!-- click 事件只能点击一次,2.1.4版本新增 --> <a v-on:click.once="doThis"></a>
按键修饰符 :
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:
<!-- 只有在 keyCode 是 13 时调用 vm.submit() --> <input v-on:keyup.13="submit">
记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名:
<!-- 同上 --> <input v-on:keyup.enter="submit"> <!-- 缩写语法 --> <input @keyup.enter="submit">
全部的按键别名:
.enter .tab .delete (捕获 "删除" 和 "退格" 键) .esc .space .up .down .left .right .ctrl .alt .shift .meta <p><!-- Alt + C --> <input @keyup.alt.67="clear"> <!-- Ctrl + Click --> <div @click.ctrl="doSomething">Do something</div>
十二、 表单
- 可以用 v-model 指令在表单控件元素上创建双向数据绑定
- v-model 会根据控件类型自动选取正确的方法来更新元素。
输入框:
实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定:
<div id="app"> <p>input 元素:</p> <input v-model="message" placeholder="编辑我……"> <p>消息是: {{ message }}</p> <p>textarea 元素:</p> <p style="white-space: pre">{{ message2 }}</p> <textarea v-model="message2" placeholder="多行文本输入……"></textarea> </div> <script> new Vue({ el: '#app', data: { message: 'Runoob', message2: '菜鸟教程\r\nhttp://www.runoob.com' } }) </script>
复选框:
复选框如果是一个为逻辑值,如果是多个则绑定到同一个数组:
<div id="app"> <p>单个复选框:</p> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> <p>多个复选框:</p> <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames"> <label for="runoob">Runoob</label> <input type="checkbox" id="google" value="Google" v-model="checkedNames"> <label for="google">Google</label> <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames"> <label for="taobao">taobao</label> <br> <span>选择的值为: {{ checkedNames }}</span> </div> <script> new Vue({ el: '#app', data: { checked : false, checkedNames: [] } }) </script>
select 列表:
以下实例中演示了下拉列表的双向数据绑定:
<div id="app"> <select v-model="selected" name="fruit"> <option value="">选择一个网站</option> <option value="www.runoob.com">Runoob</option> <option value="www.google.com">Google</option> </select> <div id="output"> 选择的网站是: {{selected}} </div> </div> <script> new Vue({ el: '#app', data: { selected: '' } }) </script>
修饰符:
.lazy
在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步:
<!-- 在 "change" 而不是 "input" 事件中更新 --> <input v-model.lazy="msg" >
.number
如果想自动将用户的输入值转为 Number 类型(如果原值的转换结果为 NaN 则返回原值),可以添加一个修饰符 number 给 v-model 来处理输入值:
<input v-model.number="age" type="number">
- 这通常很有用,因为在 type=”number” 时 HTML 中输入的值也总是会返回字符串类型。
.trim
如果要自动过滤用户输入的首尾空格,可以添加 trim 修饰符到 v-model 上过滤输入:
<input v-model.trim="msg">
十二、 组件
- 组件 components是vue最强大的功能之一。
- 组件可以扩展HTML元素 , 封装可重用的代码
- 组件系统让我们可以使用可服用的小组件来构建大型应用 , 几乎任意类型的应用的界面都可以抽象为一个组件树 。
注册一个全局组件的语法格式如下 :
Vue.component(tagName, options) tagName 为组件名 , options为配置选项 , 我们可以用一下方式来调用组件 : <tagName></tagName>
全局组件:
- 所有的实例都可以用全局组件 。
注册一个全局组件并使用
<div id="app"> <runoob></runoob> </div> <script> // 注册 Vue.component('runoob', { template: '<h1>自定义组件!</h1>' }) // 创建根实例 new Vue({ el: '#app' }) </script>
局部组件 :
我们也可以在实例选项中注册局部组件,这样组件只能在这个实例中使用:
<div id="app"> <runoob></runoob> </div> <script> var Child = { template: '<h1>自定义组件!</h1>' } // 创建根实例 new Vue({ el: '#app', components: { // <runoob> 将只在父模板可用 'runoob': Child } }) </script>
Prop
- prop 是父组件用来传递数据的一个自定义属性。
父组件的数据需要通过props把数据传给子组件 , 子组件需要显示的用props选项声明“prop”
<div id="app"> <child message="hello!"></child> </div> <script> // 注册 Vue.component('child', { // 声明 props props: ['message'], // 同样也可以在 vm 实例中像 "this.message" 这样使用 template: '<span>{{ message }}</span>' }) // 创建根实例 new Vue({ el: '#app' }) </script>
动态Prop
类似于用v-bind绑定HTML特性到一个表达式 , 可以使用v-bind动态绑定props的值到父组件的数据中 , 每当父组件的数据变化时 , 改变化也会传到给子组件 。
<div id="app"> <div> <input v-model="parentMsg"> <br> <child v-bind:message="parentMsg"></child> </div> </div> <script> // 注册 Vue.component('child', { // 声明 props props: ['message'], // 同样也可以在 vm 实例中像 "this.message" 这样使用 template: '<span>{{ message }}</span>' }) // 创建根实例 new Vue({ el: '#app', data: { parentMsg: '父组件内容' } }) </script>
以下实例中将 v-bind 指令将 todo 传到每一个重复的组件中:
<div id="app"> <ol> <todo-item v-for="item in sites" v-bind:todo="item"></todo-item> </ol> </div> <script> Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) new Vue({ el: '#app', data: { sites: [ { text: 'Runoob' }, { text: 'Google' }, { text: 'Taobao' } ] } }) </script>
prop验证
- 组件可以为prop指定验证要求
prop是一个对象而不是一个字符串数组时 , 它包含验证要求:
Vue.component('example', { props: { // 基础类型检测 (`null` 意思是任何类型都可以) propA: Number, // 多种类型 propB: [String, Number], // 必传且是字符串 propC: { type: String, required: true }, // 数字,有默认值 propD: { type: Number, default: 100 }, // 数组/对象的默认值应当由一个工厂函数返回 propE: { type: Object, default: function () { return { message: 'hello' } } }, // 自定义验证函数 propF: { validator: function (value) { return value > 10 } } } })
- type可以使下面的原生构造器 :
- String
- Number
- Boolean
- Function
- Object
- Array
- type也可以使一个自定义构造器 , 使用instanceof检测
自定义事件
- 父组件是使用props传递数据给子组件 , 但如果子组件要把数据传递回去 , 就需要使用自定义事件 。
我们可以使用v-on 绑定自定义事件 , 每个vue实例都实现了事件接口(Events interface), 即:
- 使用$on(eventName)监听事件
使用$emit(eventName)触发事件
<div id="app"> <div id="counter-event-example"> <p>{{ total }}</p> <button-counter v-on:increment="incrementTotal"></button-counter> <button-counter v-on:increment="incrementTotal"></button-counter> </div> </div> <script> Vue.component('button-counter', { template: '<button v-on:click="incrementHandler">{{ counter }}</button>', data: function () { return { counter: 0 } }, methods: { incrementHandler: function () { this.counter += 1 this.$emit('increment') } }, }) new Vue({ el: '#counter-event-example', data: { total: 0 }, methods: { incrementTotal: function () { this.total += 1 } } }) </script>
如果你想在某个组件的根元素上监听一个原生事件。可以使用 .native 修饰 v-on 。例如:
<my-component v-on:click.native="doTheThing"></my-component>
父组件给子组件传值的时候,如果想传入一个变量,写法如下:
// 注册 Vue.component('child', { // 声明 props props: ['message'], // 同样也可以在 vm 实例中像 "this.message" 这样使用 template: '<span>{{ message }}</span>' }) // 创建根实例 new Vue({ el: '#app', data:{ message:"hello", } })
十三 、 自定义指令
- 除了默认设置的核心指令(如: v-mldel v-show) , Vue也允许注册自定义指令 。
下面我们注册一个全局指令v-focus , 该指令的功能是在页面加载时 , 元素获得焦点:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <p>页面载入时,input 元素自动获取焦点:</p> <input v-focus> </div> <script> // 注册一个全局自定义指令 v-focus Vue.directive('focus', { // 当绑定元素插入到 DOM 中。 inserted: function (el) { // 聚焦元素 el.focus() } }) // 创建根实例 new Vue({ el: '#app' }) </script> </body> </html>
我们也可以在实例使用 directives 选项来注册局部指令,这样指令只能在这个实例中使用:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <p>页面载入时,input 元素自动获取焦点:</p> <input v-focus> </div> <script> // 创建根实例 new Vue({ el: '#app', directives: { // 注册一个局部的自定义指令 v-focus focus: { // 指令的定义 inserted: function (el) { // 聚焦元素 el.focus() } } } }) </script> </body> </html>
钩子
- 钩子函数
- 指令定义函数提供了几个钩子函数(可选):
- bind : 只调用一次 , 指令第一次绑定到元素时调用 , 用这个钩子函数可以定义一个绑定时执行一次的初始化操作 。
- inserted : 被绑定元素插入父节点时调用(父节点存在即可调用 , 不必存在于document 中) 。
- update : 被绑定的元素所在的模板更新时调用 , 而无论绑定值是否变化 。 通过比较更新前后的绑定值 , 可以忽略不必要的模板更新
- componentUpdated : 被绑定的元素在模板完成一次更新时调用。
- unbind : 只调用一次 , 指令与元素解绑时调用 。
- 指令定义函数提供了几个钩子函数(可选):
钩子函数参数
钩子函数参数有 :
- el : 指令所绑定的元素 , 可以用来直接操作dom
- binding : 一个对象 , 可以包含以下属性 :
- name : 指令名 , 不包括v- 后缀
- value : 指令绑定的值
- oldValue : 指令绑定的前一个值, , 仅在update 和componentUpdate钩子中使用 。 无论值是否改变都可以 使用 。
- expression : 绑定值的字符串形式 。
- arg : 传给指令的参数
- modifiers : 一个包含修饰符的对象
- vnode : vue编译生成的虚拟节点 。
- oldVnode : 上一个虚拟节点 , 仅在update 和 componentUpdated 钩子中使用 。
有时候我们不需要其他钩子函数,我们可以简写函数,如下格式:
Vue.directive('runoob', function (el, binding) { // 设置指令的背景颜色 el.style.backgroundColor = binding.value.color })
指令函数可接受所有合法的 JavaScript 表达式,以下实例传入了 JavaScript 对象:
<div id="app"> <div v-runoob="{ color: 'green', text: '菜鸟教程!' }"></div> </div> <script> Vue.directive('runoob', function (el, binding) { // 简写方式设置文本及背景颜色 el.innerHTML = binding.value.text el.style.backgroundColor = binding.value.color }) new Vue({ el: '#app' }) </script>
- 钩子函数
十四 、 路由
- 路由允许我们通过不同的url 访问不同的内容
- 通过vue.js 可以实现多视图的单页面web应用
- 路由需要载入vue-router 库
安装路由依赖:
npm 安装 npm install vue-router 也可以使用CDN 的模式 引入 vue-router 依赖 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
简单实例:
- vue.js + vue-router 可以很简单的实现单页应用。
一下实例中 我们将vue-router 加进来 , 然后配置组件和路由映射 , 再告诉vuo-router 在哪里渲染他们 , 代码如下所示
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script> <script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script> </head> <body> <div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> <router-link to="/foo">Go to Foo</router-link> <router-link to="/bar">Go to Bar</router-link> </p> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div> <script> // 0. 如果使用模块化机制编程,導入Vue和VueRouter,要调用 Vue.use(VueRouter) // 1. 定义(路由)组件。 // 可以从其他文件 import 进来 const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar</div>' } // 2. 定义路由 // 每个路由应该映射一个组件。 其中"component" 可以是 // 通过 Vue.extend() 创建的组件构造器, // 或者,只是一个组件配置对象。 // 我们晚点再讨论嵌套路由。 const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] // 3. 创建 router 实例,然后传 `routes` 配置 // 你还可以传别的配置参数, 不过先这么简单着吧。 const router = new VueRouter({ routes // (缩写)相当于 routes: routes }) // 4. 创建和挂载根实例。 // 记得要通过 router 配置参数注入路由, // 从而让整个应用都有路由功能 const app = new Vue({ router }).$mount('#app') // 现在,应用已经启动了! </script> </body> </html>