一.模板语法:允许开发者把DOM绑定在最底层Vue实例上。在底层实现上,Vue会将模板编译成虚拟DOM渲染函数,Vue可以计算出最少需要重新渲染多少组件,并减少DOM操作。 1.插值 #文本 数据绑定最常见的就是Mustache语法(双大括号){{msg}}的文本插值。你也可以用v-once指令来定义一次性插值,数据改变插值处的内容也不会改变,但是请注意,这会影响到该节点的其他插值。 //html //js //浏览器
我在这里给span标签添加了一个点击事件,运用了v-once指令,点击span标签内容仍不会改变。
#v-html
双大括号输出的只是文本,想输出html代码,需要用到v-html指令 //html和js //浏览器
浏览器里,上面输出的就是纯文本,下面就是把aaa里的东西变成了html代码再渲染到了浏览器上,可以看到字体变成了红色。 !注意:你的站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XSS攻击。请只对可信内容使用 HTML 插值,绝不要对用户提供的内容使用插值。
#特性
Mustache语法不能作用在HTML特性上,需要用v-bind指令来进行操作,
用v-bind把class绑定在div上,shtie是一个变量名,初始值等于one,div初始是one的样式。当点击div时,改变shtie变量的值为two,div就会变为two的样式。
v-bind也可以用来绑定布尔值 <input v-bind:disabled="isButtonDisabled" /> isButtonDisabled的值如果为false、null、undefined,那么disabled不会被包含在渲染出的<input>元素中: isButtonDisabled=false //未禁用 isButtonDisabled=true //已禁用 #JavaScript表达式 所有的数据绑定都支持JavaScript表达式: {{number 10}} //html和js //浏览器显示 <div v-bind:id = "'list-' id"><div> //html js css //浏览器显示 {{ok ? 'yes' : 'no'}} (yes和no是字符串) ok布尔值为true时显示yes ok布尔值为false时显示no {{ message.split('').reverse().join('') }} (把一个字符串分割成字符串数组,颠倒数组中元素,把数组所有元素放入一个字符串) //html和js //浏览器显示 有个限制,每个绑定只能包含单个表达式,下面例子不会生效 //这是语句不是表达式 {{ var a = 1}} //控制流不会生效,三元表达式可以 {{ if(ok){return true} }} 2.指令 #参数 指令是带有v-前缀的特殊特性,指令特性的预期值是单个JavaScript表达式(v-for是例外)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式的作用与DOM。 <div v-if="see">123</div> 这里的v-if就是根据see值的真假来决定插入或移除<div> 一些指令可以接收一个参数,在指令名称后以冒号表示。例如v-bind可以响应式的更新HTML特性: <div v-bind:href = "url"></div> 在这里href是参数,告知v-bind指令该元素的href特性与表达式url的值绑定。 另外一个例子:<div v-on:click="change"></div> v-on是监听DOM事件的指令,在这里参数是监听的事件名。 #动态参数 从2.6.0开始,可以用方括号[]括起来的JavaScript表达式作为一个指令的参数, <div v-bind:[name]="url"></div> 这里的name会作为一个JavaScript表达式进行动态求值,求的值会作为最终参数来使用。例如你的data里面name的值为href,那这个绑定就等价于v-bind:href。 同样的也可以使用动态参数为一个动态事件名绑定处理函数, <div v-on:[event]="change"> 当event的值等于click时,v-on:[event]等价于v-on:click。 动态参数预期会求出一个字符串,异常情况下值为null,这个特殊的值可以用作显性移除绑定。任何非字符串类型的值都会触发一个警告。 //动态指令参数的值无效(应为字符串或null) 动态参数表达式有一些语法约束,因为某些字符,例如空格和引号,放在 HTML 特性名里是无效的。同样,在 DOM 中使用模板时你需要回避大写键名,会报错。 下面的代码是无效的,会报错: <div v-on:['eve' nt]></div> 变通的办法是使用没有空格或引号的表达式,或用计算属性替代这种复杂表达式。 另外,如果在DOM中使用模板,需要留意浏览器会把特性名全部强制转化为小写: <div v-on:[EVENT]="change"> 在 DOM 中使用模板时这段代码会被转换为:<div v-on:[event]="change"> #修饰符 修饰符是以半角句号.指明的特殊后缀,用于一个指令应该以特殊方式绑定。 .lazy 在默认情况下,v-model是在每次input事件触发后将输入的值与数据进行同步,添加.lazy可以让其转变为change事件时同步,而非input: //html和js (浏览器效果图没法展示,可自行实验) .number 如果想让用户输入值自动转化为数值型,可以在v-model后加.number //上面的是没有加.number,打印出来的是字符型String。下面的是加上.number,打印出来是数值型Number。 .trim 如果想自动过滤掉用户添加的首尾空白字符,在v-model后加.trim //这两个输入时都在前面加了若干空格,后面一个是用了.trim修饰符的效果,过滤掉了前面加的空格 3.缩写 对于一些常用操作v-会变得非常繁琐,因此vue为 v-bind 和 v-on 提供了特定简写: 1. v-bind: //正常写法 <div v-bind:href="url"></div> //缩写 <div :href="url"></div> 2. v-on: //正常写法 <div v-on:click="doSomething"></div> //缩写 <div @click="doSomething"></div> 二. 计算属性和监听器 1.计算属性 模板内的表达式很便利,但是设计它的初衷是为了简单运算,在模板中放入太多逻辑会让模板过重切难以维护。例如: {{ msg.split('').reverse().join('') }} 在这个地方就不是简单的声明式逻辑,对于任何复杂逻辑,都应当使用计算属性。 #基础例子 这里我们声明了一个计算属性reverseMsg,让你想在模板里做的复杂逻辑在reverseMsg里操作,你可以像在模板里绑定普通数据一样绑定计算属性。 Vue知道reverseMsg依赖于msg,所以当msg改变时,所有依赖于reverseMsg的绑定也会更新。 计算属性默认只有getter函数 //html和js //浏览器显示
这两种写法显示是一样的,可以给data中的firstName和lastName重新赋值,但是给reverseMsg重新赋值就会报错,提示没有setter函数,在需要时也可以提供一个setter函数。
这是因为你对reverseMsg赋值时,传入的值保存在value中,然后把value中的值被空格分割成一个数组分别赋给firstName和lastName,当firstName和lastName改变时,就又触发计算属性重新计算,从而改变页面。
#计算属性缓存vs方法
通过在表达式中调用方法也可以达到同样的效果:
虽然两个方式最后的结果是相同的,但是不同的是计算属性是基于它们的响应式依赖缓存的,只有相关响应式依赖改变它们才会重新求值,也就是说只要msg没有发生改变,多次访问reverseMsg计算属性会立即返回之前的计算结果,而不必再执行函数。 相比之下,每次触发重新渲染,调用方法将总会再次执行函数。 为什么要缓存?假设有一个计算属性A,它需要做一些非常复杂且大量的计算,然后有一个依赖于A计算属性,如果没有缓存,我们会不可避免的多次执行A中的getter函数。如果你不希望有缓存,可用方法代替。
#计算属性vs侦听属性
vue提供了一种通用的方式来观察和响应vue实例上的数据变动:侦听属性watch。 //html和js //浏览器和控制台显示
其中newVal是改变之后的值,oldVal是改变之前的值。 当有一些数据需要随着其它数据变动而变动时,很容易滥用 watch,通常更好的做法是使用计算属性而不是命令式的回调watch。 三. class与style绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以我们可以用 v-bind处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 v-bind用于class和style时,Vue做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。 1. 绑定HTML Class #对象语法 我们给v-bind:class绑定一个对象,来动态切换css: <div v-bind:class="{ active:isActive }"> 现在active这个class的存在与否就取决于isActive的真值了。 你可以在对象传递更多属性来动态切换多个class,此外v-bind:class也可以和普通class共存: //HTML和js //浏览器控制台显示
当 isTwo 和 isError 变化,class列表也相应的更新。例如isError的值变为true,class列表将变为class=“one two button-text”。 绑定的对象不用内联定义在模块里: //HTML和js //浏览器控制台显示
两种写法渲染是相同的,也可以在这里绑定一个返回对象的计算属性,这是个常用且强大的模式:
#数组语法 我们可以传一个数组给v-bind:class,以应用一个class列表: //html和JS //浏览器控制台显示
也可以运用三元表达式,<div v-bind : class =" [ isActive ? active : ' ' ,errorClass ] "></div>。 这样写始终添加errorClass,但只有isActive为真值时才添加active。不过当有多个条件class时,这样写太繁琐,所有数组语法也可以使用对象语法: <div v-bind : class= " [ { active : isActive } ,errorClass ] ">
#用在组件上 当在一个自定义组件上使用 //父组件 //子组件 // 浏览器
我这里是将组件拆出去,然后在父组件里引用子组件。以上面为例,bbb相当于一个包在子组件外的div,是子组件的容器,就算没有定义类名,这个div还是会存在。 对于带数据绑定也同样适用: <myComponent v-bind : class = " { active : isActive } "></myComponent> 当isActive为真值时,active将被渲染。 2. 绑定内联样式 #对象语法 v-bind:style的对象语法很直观,看着非常像css,但其实是一个JavaScript对象,css属性名可以用驼峰式命名(fontSize)或短横线分割(font-size,记得用引号括起来:“font-size”)来命名:
直接绑定到一个样式对象通常更好,这会让模板更清晰:
同样的,对象语法常常结合返回对象的计算属性使用。 #数组语法 v-bind:style可以将多个样式对象应用到一个元素上:
#自动添加前缀 当 #多重值 从 2.3.0 起你可以为 <div :style = " { display: [ '-webkit-box','-ms-flexbox','flex' ] }"></div> 这样写只会渲染数组中最后一个被浏览器支持的值。在本例中,如果浏览器支持不带浏览器前缀的 flexbox,那么就只会渲染 四. 条件渲染 1. v-if <div v-if="awesome"> yes </div> 也可以用 <div v-if="awesome"> yes </div> <div v-else> no </div>
#在template元素上使用v-if条件渲染分组
因为 <template v-if=" ok "> <h1>为真时</h1> <div>这里</div> <p>会渲染</p> </template>
#v-else 你可以使用 <div v-if=" Math.random() > 0.5 ">满足条件时渲染</div> <div v-else>否则渲染这里</div>
#v-else-if <div v-if= "index === 1"> A </div> <div v-else-if= "index === 2"> B </div> <div v-else-if= "index === 3"> C </div> <div v-else-if= "index === 4"> D </div> <div v-else> 不是A/B/C/D </div> 类似于
#用key管理可复用的元素 Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外,还有其它一些好处。例如,如果你允许用户在不同的登录方式之间切换:
那么在上面的代码中切换 这样也不总是符合实际需求,所以 Vue 提供了一种方式来表达“这两个元素是完全独立的,不要复用它们”。只需添加一个具有唯一值的
注意,与<input>同级 <div> 元素仍然会被高效地复用,因为它们没有添加
2. v-show 另一个用于根据条件展示元素的选项是 <div v-show=" ok ">为真时渲染</div> 不同的是带有 !注意:v-show不支持<template>元素,也不支持v-else。
3. v-if 与 v-show
相比之下, 一般来说,
4. v-if 与 v-show 不推荐 v-if 与 v-for 同时使用。 v-for的优先级是高于v-if的,也就是说会先执行v-for,然后在每个for里都会执行一遍if。 这种优先级机制在有些地方是比较实用的,比如需要渲染满足条件的项:
在这个例子中,我们只想渲染为0的项,就可以利用这个机制。 五. 列表渲染 1. 用v-for把一个数组对应为一组元素 我们可以用 //渲染结果
在 //渲染结果
你也可以用 <div v-for=" item of items "> 2. 在v-for 里使用对象 用 v-for 遍历对象: //渲染结果
第一个参数为值,第二个的参数为 property 名称 (也就是键名),第三个参数作为索引。 在遍历对象时,会按 3. 维护状态 当 Vue 正在更新使用 为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 建议尽可能在使用 不要使用对象或数组之类的非基本类型值作为 4. 更新检测 #变异方法 Vue 将被侦听的数组的变异方法进行了包裹,所以它们也将会触发视图更新。这些被包裹过的方法包括:
#替换数组 变异方法,顾名思义,会改变调用了这些方法的原始数组。相比之下,也有非变异 (non-mutating method) 方法,例如 example1.items = example1.items.filter(function (item) { return item.message.match(/Foo/) }) 你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是,事实并非如此。Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的启发式方法,所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。 #注意事项 由于 JavaScript 的限制,Vue 不能检测以下数组的变动:
为了解决第一类问题,以下两种方式都可以实现和 // Vue.set // Array.prototype.splice Vue.set(vm.items, indexOfItem, newValue) vm.items.splice(indexOfItem, 1, newValue) 为了解决第二类问题,你可以使用 5.显示过滤/排序后的结果 有时,我们想要显示一个数组经过过滤或排序后的版本,而不实际改变或重置原始数据。在这种情况下,可以创建一个计算属性,来返回过滤或排序后的数组。 //渲染结果
这里改变了原数组,但是因为是计算属性,没有setter函数不能改变它的依赖,所以number不会改变,可以正常遍历。
在计算属性不适用的情况下 (例如,在嵌套 //渲染结果
注意,这里使用的方法必须是返回一个新数组的方法,使用改变原数组但不返回新数组的方法,会无限更新循环。
6. 在v-for 里使用值范围 <div> <span v-for="n in 10">{{ n }} </span> </div> 7. 在<template> 上使用v-for //渲染结果 8. 在组件上使用v-for 在自定义组件上,你可以像在任何普通元素上一样使用 <myComponent v-for="item in items" :key="item.id"></myComponent> 2.2.0 的版本里,当在组件上使用 然而,任何数据都不会被自动传递到组件里,因为组件有自己独立的作用域。为了把迭代数据传递到组件里,我们要使用 prop: //父组件 //子组件 把父组件中items的值传给子组件,需要用到prop,把items绑定在子组件上,在子组件里用props接收数据。
六. 事件处理 1. 监听事件 可以用
除了直接绑定到一个方法,也可以在内联 JavaScript 语句中调用方法:
有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量
preventDefault() 方法阻止元素发生默认的行为(例如,当点击提交按钮时阻止对表单的提交)。 2. 事件修饰符 方法只有纯粹的数据逻辑,而不是去处理 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> <!-- 添加事件监听器时使用事件捕获模式 --> <!-- 即元素自身触发的事件先在此处理,然后才交由内部元素进行处理 --> <!-- 通常我们只监听冒泡过程。在vue中,当我们添加了事件修饰符capture后,才会变成捕获监听器。 --> <div v-on:click.capture="doThis">...</div> <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat">...</div> 使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 Vue 还对应 <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --> <!-- 而不会等待 `onScroll` 完成 --> <!-- 这其中包含 `event.preventDefault()` 的情况 --> <div v-on:scroll.passive="onScroll">...</div> 不要把 3. 按键修饰符 在监听键盘事件时,我们经常需要检查详细的按键。Vue 允许为 <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` --> <input v-on:keyup.enter="submit"> 也可以直接将 <input v-on:keyup.page-down="onPageDown"> 在上述示例中,处理函数只会在 七. 表单输入绑定 1. 基础用法 你可以用 #文本
#多行文本
在文本区域插值 ( #复选框 单个复选框,绑定布尔值
多个复选框绑定同一数组
#单选按钮
#选择框
如果 #多选(绑定到一个数组)
v-for渲染动态选项
2. 值绑定 对于单选按钮,复选框及选择框的选项, 但是有时我们可能想把值绑定到 Vue 实例的一个动态属性上,这时可以用 #单选框
#选择框选项
八. 组件基础 1. 基本示例 vue项目目录结构
components下的base里放的是基础组件,business放的是业务组件。可能你的许多组件只是包裹了一个输入框或按钮之类的元素,是相对通用的。我们有时候会把它们称为基础组件,它们会在各个组件中被频繁的用到。 在组件文件夹下创建vue文件,在父组件页面里引用子组件,
因为组件是可复用的 Vue 实例,所以它们与 2. 组件的复用 你可以将组件进行任意次数的复用:
每个组件都会各自独立维护,每用一次组件,就会有一个它的新实例被创建。 一个组件的 data(){ return{ } } 如果 Vue 没有这条规则,复用组件,操作其中一个,其他相同组件就会受到影响。 3. 组件的组织 通常一个应用会以一棵嵌套的组件树的形式来组织:
例如,你可能会有页头、侧边栏、内容区等组件,每个组件又包含了其它的像导航链接、博文之类的组件。 4. 通过prop向子组件传递数据:这个我在列表渲染里,在组件上使用v-for实际操作过一次。 5. 单个根元素:每个组件里必须在<template>里套一个<div>,然后在这个最外层<div>里写你要实现的内容。 6. 监听子组件事件: #子组件抛出事件
#父组件里调用事件 // 这里打印val为子组件传过来的值 true。
#组件上使用v-model
自定义事件也可以用于创建支持 <input v-model="searchText"> 等价于 <input v-bind:value="searchText" v-on:input="searchText = $event.target.value" > 当用在组件上时, <custom-input v-bind:value="searchText" v-on:input="searchText = $event" ></custom-input> 为了让它正常工作,这个组件内的
写成代码后:
现在 <custom-input v-model="searchText"></custom-input> 7. 通过插槽分发内容 和 HTML 元素一样,我们经常需要向一个组件传递内容,像这样: <myComponent>123</myComponent> 可能什么也渲染不出来,也可能会渲染出这样的东西:
幸好,Vue 自定义的
只需要在子组件里,把<slot>标签写在你想添加的位置。这就是插槽,后面还会介绍更多。 九. 组件注册 1.组件名:单文件组件(.vue),推荐驼峰式命名(myComponent)或跟据公司规范命名。 2.全局注册 在注册之后可以用在任何新创建的 Vue 根实例 ( 创建一个vue文件作为组件
在main.js里引入组件路径并创建组件
在父组件里使用组件标签名
3. 局部注册:本文中除了全局注册,剩下的组件注册都是局部注册。 十. Prop 1.Prop大小写 HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时,驼峰命名法 的 prop 名需要使用其等价的短横线分隔命名: props: [ ' postTitle ' ] <myComponent post-title=" hello "></myComponent> 如果使用字符串模板,这个限制就不存在了。 2.Prop类型 现在我们只看到以字符串数组形式列出的prop: props: ['title', 'likes', 'isPublished', 'commentIds', 'author'] 但是,通常你希望每个 prop 都有指定的值类型。这时,你可以以对象形式列出 prop,这些属性的名称和值分别是 prop 各自的名称和类型:
这不仅为组件提供了文档,还会在它们遇到错误的类型时从浏览器的 JavaScript 控制台提示用户。 3.单向数据流 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。额外的,每次父级组件发生更新时,子组 件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器的控制台给出警告。
这里有两种常见的试图改变一个prop的情形: 1.这个 prop 用来传递一个初始值;这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下,最好定义一个本地的 data 属性并将这个 prop 用作其初始值:
2.这个 prop 以一种原始的值传入且需要进行转换。在这种情况下,最好使用这个 prop 的值来定义一个计算属性:
4. prop 验证 我们可以为组件的 prop 指定验证要求,例如你知道的这些类型。如果有一个需求没有被满足,则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。 为了定制 prop 的验证方式,你可以为
当prop验证失败的时候,Vue将会产生一个控制台的警告。 type可以是下面原生构造函数中的一个:
5.非prop特性:组件可以接受任意的特性,而这些特性会被添加到这个组件的根元素上 十一. 自定义事件 1.事件名 不同于组件和 prop,事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。举个例子,如果触发一个驼峰式名字的事件: this.$emit('myEvent') 则监听这个名字的短横线分隔命名版本是不会有任何效果的: <!-- 没有效果 --> <myComponent @my-event="doSomething"></myComponent> 2. 将原生事件绑定到组件 Vue 提供了一个 { focus: function (event) { /* ... */ } input: function (value) { /* ... */ }, } 有了这个 十二. 插槽:在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 1.插槽内容 上面插槽的例子只是插入了数据,其实还可以插入组件:
如果 2.编译作用域 当你想在一个插槽中使用数据时,例如:
该插槽跟模板的其它地方一样可以访问相同的实例属性 (也就是相同的“作用域”),而不能访问
父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的。 3.后备内容 有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的,它只会在没有提供内容的时候被渲染。
我们可能希望这个 现在当我在一个父级组件中使用该组件并且不提供任何插槽内容时,后备内容“submit”将会被渲染, 但当我们提供内容,则这个提供的内容将会被渲染从而取代后备内容:
4. 具名插槽 有时我们需要多个插槽。 在向具名插槽提供内容的时候,我们可以向<div>元素上使用slot指令,并以slot参数形式提供名称。 //父组件中 //<myComponent>子组件中 现在父组件 任何没有被包裹在带有
也可以有另一种写法,把slot换成v-slot,但是v-slot只能添加在一个<template>上,只有一种情况例外。 当被提供的内容只有默认插槽时,组件的标签才可以被当作插槽的模板来使用。这样我们就可以把 注意默认插槽的缩写语法不能和具名插槽混用,因为它会导致作用域不明确。 只要出现多个插槽,就要用具名插槽。 5作用域插槽 有时让插槽内容能够访问子组件中才有的数据是很有用的。 //父组件中
//子组件中
在添加一个slot-scope属性,给一个scope参数,在子组件里也同样使用。 还可以有其他方法,比如,<current-user>组件里的slot想访问传给父级渲染的数据是不行的, 如下,为了让
绑定在
在这个例子中,我们选择将包含所有插槽 prop 的对象命名为 aaa,但你也可以使用任意你喜欢的名字。 #解构插槽Prop 作用域插槽的内部工作原理是将你的插槽内容包括在一个传入单个参数的函数里: function (slotProps) { // 插槽内容 } 这意味着
这样可以使模板更简洁,尤其是在该插槽提供了多个 prop 的时候。它同样开启了 prop 重命名等其它可能,例如将
甚至可以定义后备内容,用于插槽 prop 是 undefined 的情形:
注意是插槽prop是undefined,在子组件会给出警告。 #动态插槽 动态指令参数也可以用在
#具名插槽缩写 v-slot:header 等价于 #header 和其它指令一样,该缩写只在其有参数的时候才可用。 十三. 动态组件&异步组件 1. 动态组件 在不同组件之间动态切换,通过 Vue 的
first 、 second 、third 是注册的三个组件,com可以是已注册组件的名字,或一个组件的选项对象。我这里设置的是一个组件选项的数组。 2.在组件上使用keep-alive
当在first内输入内容,然后点击second,再切换会first,first内输入的内容会消失。这是因为你每次切换新标签的时候,Vue 都创建了一个新的 com实例。 重新创建动态组件的行为通常是非常有用的,但是在这个案例中,我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题,我们可以用一个
注意这个 十四. 混入 1.基础 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。 创建混入文件
注册一个mixin对象,定义需要的方法或者数据
在需要的页面引入并使用,混入
scss文件混入 创建scss文件并写入需要混入的样式
引入需要混入的文件
2.选项合并 当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”。 比如,数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先。
同名钩子函数将合并为一个数组,因此都将被调用。另外,混入对象的钩子将在组件自身钩子之前调用。也就是说先执行混入对象的钩子内的操作。
值为对象的选项,例如
3.全局混入 混入也可以进行全局注册。使用时格外小心!一旦使用全局混入,它将影响每一个之后创建的 Vue 实例。使用恰当时,这可以用来为自定义选项注入处理逻辑。 在main.js中定义mixin,在需要的使用的页面直接使用
4.自定义合并策略 自定义选项将使用默认策略,即简单地覆盖已有值。 #defaultStrat
如果想让自定义选项以自定义逻辑合并,可以向 Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) { // 返回合并后的值 } 对于多数值为对象的选项,可以使用与 var strategies = Vue.config.optionMergeStrategies strategies.myOption = strategies.methods 十五. 自定义指令 1. 简介:除了核心功能默认内置的指令 ( #全局注册 在main.js中注册,JQuery事件中,当元素获得焦点时,发生 focus 事件。
#局部注册 如果想注册局部指令,组件中也接受一个
然后你可以在模板中任何元素上使用新的
2.钩子函数 一个指令定义对象可以提供如下几个钩子函数 (均为可选): bind:只调用一次,指令第一次绑定到元素时调用,在这里可以进行一次性的初始化设置。 inserted:被绑定元素插入父节点时调用(仅保证父节点存在,但不一定已被插入文档中)。 update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。 componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。 unbind:只调用一次,指令与元素解绑时调用。 3.钩子函数参数
我只写了一个例子,大致的都相同
这是官网给的例子
#动态指令参数 指令的参数可以是动态的。例如,在 例如你想要创建一个自定义指令,用来通过固定布局将元素固定在页面上。我们可以像这样创建一个通过指令值来更新竖直位置像素值的自定义指令:
这会把该元素固定在距离页面顶部 200 像素的位置。但如果场景是我们需要把元素固定在左侧而不是顶部又该怎么办呢?这时使用动态参数就可以非常方便地根据每个组件实例来进行更新。
4.函数简写 Vue.directive('color-swatch', function (el, binding) { el.style.backgroundColor = binding.value }) 5.对象字面量 如果指令需要多个值,可以传入一个 JavaScript 对象字面量。记住,指令函数能够接受所有合法的 JavaScript 表达式。
十六. 过滤器 vue允许自定义过滤器,可被用于一些常见的文本格式化。 过滤器可以用在两个地方:双花括号插值和 过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示: 在{{}}中:{{msg | capitalize}} 在v-bind中:<div :id="rawId | formId" > 在一个组件的选项中定义本地的过滤器:
我这里是让输入的值渲染在页面上的时候前面加上$, 在创建 Vue 实例之前全局定义过滤器:
当全局过滤器和局部过滤器重名时,会采用局部过滤器。 过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在上述例子中, 过滤器可以串联: {{ message | filterA | filterB }} 在这个例子中, 过滤器是 JavaScript 函数,因此可以接收参数: {{ message | filterA('arg1', arg2) }} 这里, |
|