12306网站建设花了多少钱,wordpress小工具位置,北京 网站 优化,腾讯云主机文章目录知识点前端开发环境配置v-text v-htmlv-if、v-else v-showv-forv-onv-modelv-bind、v-cloak、v-prev-once全局 API 是什么Vue.directive 自定义组件Vue.directive 是什么自定义组件回调函数参数自定义组件的生命周期Vue.set 全局操作为…
文章目录知识点前端开发环境配置v-text v-htmlv-if、v-else v-showv-forv-onv-modelv-bind、v-cloak、v-prev-once全局 API 是什么Vue.directive 自定义组件Vue.directive 是什么自定义组件回调函数参数自定义组件的生命周期Vue.set 全局操作为什么要使用 Vue.setVue.filter实例Vue.nextTick使用方法Mixin 混入实例Vue 生命周期函数实例知识点
Vue 常用指令Mixin 混入Vue 生命周期函数
前端开发环境配置
Vue 的开发形式有多种有 script 标签引入的形式也有脚手架启动 web 服务的形式。
一般我们都是采用脚手架的形式学习如下所示已安装可忽略 下载完之后通过如下指令查看安装的版本 vue --version 通过此脚手架初始化一个 Vue 项目
vue create demo1
按照步骤都选择 Yes 或者默认的便可新建项目需要一些时间。
通过如下命令启动 demo1 项目
cd demo1
npm run serve
待项目启动之后点击右侧边栏「Web 服务」打开浏览器如下所示说明开发环境配置成功了 清空 App.vue 文件里的代码我们开始学习 Vue 指令。
v-text v-html
相同点
都能展示数据且属于单向绑定。即数据的变化会影响插值的变化而插值的变化不会影响数据的变化。其实 v-text 也可以简写为 {{ }} 。
不同点
v-text只能渲染纯文本浏览器不会对其进行 html 解析。
v-html用于输出 html浏览器会解析 html。
下面通过代码实例来验证打开 App.vue 代码如下
template
div idappp{{ text }}/pp{{ html }}/pp v-texttext/pp v-texthtml/pp v-htmlhtml/p/div
/templatescriptexport default {name: App,data() {return {text: 大家好我是xxx,html: strong大家好我是xxx/strong,};},};
/scriptstyle/style0v-if、v-else v-show
相同点
通过变量控制标签内容的显示或隐藏。
不同点
v-if 在浏览器上表现为整个 DOM 节点不会被渲染
v-show 的呈现形式相当于给 DOM 节点添加了一个 CSS 属性 — display: none
v-else 则类似 JS 语法的 if else 判断语句需要紧跟在 v-if 后面。
下面通过代码实例来验证App.vue 代码如下
template
div idappp v-ifisShow我是coder one/pp v-else我是coder two/pp v-if!isShow我是code one/pp v-else我是coder two/pp v-show!isShow我是消失的coder/p/div
/templatescriptexport default {name: App,data() {return {isShow: true,};},};
/scriptstyle/style打开浏览器展示效果
v-for
v-for 指令解决的是模板循环渲染问题没有 Vue、React 等框架之前都是通过 for 循环拼接字符串的形式通过 append 将拼接好的节点塞入指定的 DOM 节点。现在有了 v-for 指令就不用这么麻烦了得到数组之后只需以 (item, index) in array 的形式渲染数据。
下面是代码演示
templatediv idappdiv v-for(item, index) in list :keyindex{{ index }}{{ item }}/div/div
/templatescript
export default {name: App,data() {return {list: [小红, 小明, 小智, 小刚],};},
};
/scriptstyle/style浏览器展示效果如下 index 数组对象所对应的索引值渲染模版的时候如果需要做一些逻辑运算的时候会用到这个索引值比如只让索引值为偶数的项进行渲染就可以结合之前的 v-if、v-show 指令去实现需求。
小知识 1v-for 和 v-if 不要一起使用
v-for 的优先级高于 v-if 当它们处于同一节点v-for 的优先级比 v-if 更高这意味着 v-if 将分别重复运行于每个 v-for 循环。比较好的解决方式是先通过 computed 属性将需要渲染的列表提前过滤再将过滤后的列表放到模板中渲染这样做的目的是让页面渲染效率更高避免不必要的资源浪费。
小知识 2 v-for 可以渲染 Object 类型数据
比如上述例子我们可以改成如下
templatediv idappdiv v-for(val, key, index) in listObj :keyindex{{ index }}{{ val.name }}/div/div
/templatescript
export default {name: App,data() {return {listObj: {hong: {name: 小红,},ming: {name: 小明,},zhi: {name: 小智,},gang: {name: 小刚,},},};},
};
/scriptstyle/stylev-on
v-on 就是监听事件可以用 v-on 指令监听 DOM 事件来触发一些方法函数。
v-on 有一种简写形式用 符号代替。它还能监听一些键盘事件如键盘的回车键 v-on:keyup.enter 等大家可以类推其他的键盘事件。
下面就来看看代码示例
templatediv idappp数字{{ count }}/pbutton v-on:clickadd加/buttoninput v-modelusername v-on:keyup.enterlogin //div
/templatescript
export default {name: App,data() {return {count: 1,username: ,};},methods: {add: function () {this.count;},login: function () {console.log(this.username);},},
};
/scriptstyle/style效果如下 v-model
在 Vue 的众多指令里v-model 算是举足轻重的因为它的双向绑定特性能解决很多业务上的复杂需求下面就用几个小示例来诠释它的强大代码演示如下
1、最简单的双向绑定
template
div idappp用户名{{ username }}/pinput v-modelusername //div
/templatescriptexport default {name: App,data() {return {username: ,};},};
/scriptstyle/style2、结合复选框
templatediv idapph2checkbox/h2label forapple苹果/labelinput typecheckbox v-modelfruit.apple valueapple /label forbanana香蕉/labelinput typecheckbox v-modelfruit.banana valuebanana /br /{{ fruit }}/div
/templatescript
export default {name: App,data() {return {fruit: {apple: true,banana: false,},};},
};
/scriptstyle/style结合复选框实现切换复选框内的值动态地改变数据
3、结合单选框
template
div idapph2radio/h2label formale男/labelinput typeradio v-modelsex value男 /label forfemale女/labelinput typeradio v-modelsex value女 /br /{{ sex }}/div
/templatescriptexport default {name: App,data() {return {sex: 男,};},};
/scriptstyle/style4、几个需要注意的修饰符
.lazy接管 input 的事件监听事件输入的时候不会马上响应在展示层当数据确认改变的时候才会显示出来.trim去掉首尾的空格不会去除中间的空格.number输入的字符串转化为数字
v-bind、v-cloak、v-prev-once
v-bind
对变量属性的一个绑定比如说需要绑定一个图片只需如下
img v-bind:srcimageSrc /
// 可简写为
img :srcimageSrc /绑定 CSS 样式一般用在需要计算表达式的时候使用
div :classclassName绑定class/div
// 判断变量
div :class{classA: isShow}绑定class中的判断/div
// 三元运算符
div :classisShow ? classA : classB绑定class中的三元表达式判断/div
// 绑定 style
div :style{color: blue, fontSize: font}绑定style/divv-cloak
作用在使用双大括号赋值时页面数据没有返回之前页面会闪烁一下 “{{}}”双大括号只需在全局样式下添加如下
[v-cloak] {display: none;
}在绑定的变量节点上加上
div idapp v-cloak{{msg}}
/div试想用户打开网页闪过一片 {{parmas}} 不起眼的小指令却极大的优化了网页的用户体验。
v-pre
直接跳过 Vue 的编译输出原始值。在标签中如下使用
div v-pre{{message}}/div最终在网页上输出的结果是 {{message}}。
v-once
只在第一次渲染时执行之后的操作都被视为静态内容跳出之后的所有渲染过程。
template
div idappp v-once用户名{{ username }}/pinput v-modelusername //div
/templatescriptexport default {name: App,data() {return {username: 十三,};},};
/scriptstyle/style全局 API 是什么
举个比较好理解的例子Vue 就好比一块蛋糕生命周期钩子函数以及内部指令可以理解为做蛋糕用的面粉、糖、鸡蛋等。而全局 API 就是裹在蛋糕外面的奶油让整个蛋糕Vue看起来更加美味。全局 API 的作用就是给 Vue 更多的自由大家可以根具自己项目的需求通过全局 API 来制作出各种各样的方法工具。
Vue.directive 自定义组件
Vue.directive 是什么
之前也学了 v-model、v-show 等官方定义的指令在项目的开发过程中我们会有一些特殊的需求要自定义指令Vue.directive 就是为什么做这件事情的 API。
自定义组件
假如来了一个需求需要让加上 v-color 指令的标签的字体颜色通过传入的变量值进行改变比如 v-color“red” 标签就会变为红色。
代码演示如下进入 App.vue
templatediv idappp v-colorcolor嘻嘻哈哈/p/div
/templatescript
export default {name: App,data() {return {color: red,};},
};
/scriptstyle/style在 main.js 下添加如下代码
import Vue from vue;
import App from ./App.vue;Vue.config.productionTip false;Vue.directive(color, function (el, binding, vnode) {console.log(el, el); // 被绑定的node节点console.log(binding, binding); // 一个对象包含指令的很多信息console.log(vnode, vnode); // Vue编译生成的虚拟节点el.style color: binding.value;
});new Vue({render: (h) h(App),
}).$mount(#app);浏览器效果如下所示 回调函数参数
自定义组件的回调函数有三个参数。
el被绑定的 node 节点。binding 包含指令信息的对象参数。vnodeVue 编译生成的虚拟节点。
自定义组件的生命周期
自定义组件包含几个生命周期也就是在调用自定义组件时几个钩子函数会被触发分别是如下。
bind只会调用一次在第一次绑定到元素上时被调用初始化操作可以使用它。inserted被绑定的元素插入了父节点。update被绑定的元素模板更新时调用。componentUpdated被绑定的元素模板完成一次生命周期。unbind指令和被绑定元素解绑时调用。
Vue.set 全局操作
在解释 Vue.set 之前先了解一下 Vue 的响应式原理
当你把一个 JS 对象传给 Vue 实例的 data 属性时Vue 将遍历此对象的所有属性并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性这也就是为什么 Vue 不支持 IE8 以及更低版本的浏览器。
为什么要使用 Vue.set
受限于现代浏览器Vue 检测不到对象的添加和删除因为 Vue 在初始化实例时对 data 属性执行 getter/setter 转化操作所以对象必须在 data 中才能让其响应式。
Vue 不允许在已经创建的实例上动态添加新的根级响应式属性不过可以使用 Vue.set 方法将响应式属性添加到嵌套的对象上。代码演示如下
template
div idappp v-for(item, index) in fruit :keyindex{{ item }}/pbutton v-on:clickchange变/button{{ fruit }}button v-on:clickadd外部添加/button/div
/templatescriptexport default {name: App,data() {return {fruit: [apple, banana, pear, grape],};},methods: {change() {this.fruit[1] melon;},add() {// Vue.set 的另一种写法 this.$setthis.$set(this.fruit, 1, melon);},},};
/scriptstyle/style浏览器效果如下所示 当点击按钮“变”的时候渲染没有变化当点击按钮“外部添加”的时候渲染数据发生了变化。
Vue.filter
全局过滤器是一个在项目中时常会用到的 API使用场景也非常丰富比如说数据的统计保留小数点参数等等在后续的商场实战中也会被运用到实战中。
实例
下面我们演示一个简单的过滤器需求是使用过滤器将需要过滤的目标值加上 4代码演示如下
App.vue
templatediv idappp{{ count | sum }}/p/div
/templatescript
export default {name: App,data() {return {count: 20,};},
};
/scriptstyle/stylemain.js
import Vue from vue;
import App from ./App.vue;Vue.config.productionTip false;Vue.filter(sum, function (value) {return value 4;
});new Vue({render: (h) h(App),
}).$mount(#app);浏览器预览 屏幕上会出现 24 这个数字注意的是声明 sum 过滤器必须要放在声明实例 app 之前否则不会被注入到实例中。
Vue.nextTick
nextTick 是一个比较重要的高级特性应用场景在很多地方会出现。Vue 是异步渲染的框架一开始就是如此当你改变 data 属性内部的变量视图不会立即更新在此时你若是进行 DOM 操作是拿不到最新的渲染结果这个时候你就要借助 Vue.nextTick 高级特性在该特性的回调函数内获取最新的渲染结果。
使用方法
this.$nextTick(function () { // 写在需要在某个操作改变 dom 结构之后
});Mixin 混入
混入mixin提供了一个非常灵活的方式来分发 Vue 组件中的可复用功能。一个混入对象可以包括任意组件选项。当组件使用混入对象时所有混入对象的选项将被「混合」进入该组件本身的选项。
上面这段摘录自 Vue 的官方文档文字有点难理解笔者通过举实例来解释 mixin 的具体用法。 其实我们可以用 Object 的思想去理解 mixin假设有一个变量 A它的值为 { a: 1, b: 2 },有另一个变量 B它的值为 { a: 3, c: 4 },B 作为混入的对象混入 A那么 A 中已有的属性 a 不会被覆盖A 会新增一个 c 属性最终 A 为 { a: 1, b: 2, c: 4 }。
实例
通过 Vue 的代码进行分析如下
// mixin.js
export default {data() {return {username: 张三,age: 30,hasWife: true,};},mounted() {console.log(mixin);},methods: {speak() {console.log(这是mixin);},cry() {console.log(这是cry);},},
};// App.vue
import mixin from ./mixin;
export default {data() {return {username: 李四,age: 31,hasHusband: true,};},mounted() {console.log(app);},mixins: [mixin],methods: {speak() {console.log(这是app);},eat() {console.log(吃饭);},},
};// 最终得到的结果如下
export default {data() {return {name: 李四, // name为共有属性最终保留 app.vue 的age: 31, // 同上hasHusband: true, // app.vue 独有属性保留hasWife: true, // app.vue 没有的属性会被添加进来};},mounted() {// 在钩子函数中的会被合并到 app.vue 的钩子函数中minix中的代码会在前面console.log(mixin);console.log(app);},methods: {// 两边都有的方法会被封装为一个数组先执行 minix 中的后执行 app 自己的speak() {[function () {console.log(这是mixin);},function () {console.log(这是app);},].forEach((cb) {cb();});},// 自身独有的保留eat() {console.log(吃饭);},// 自身没有的方法会被添加进来cry() {console.log(这是cry);},},
};上述为组件中使用 mixins 方法进行「混入」下面我们来介绍「全局混入」「混入」可以在入口页进行全局注册但是使用它时要格外小心一旦使用全局混入它将会影响每一个之后创建的 Vue 实例。 官方示例如下
// 为自定义的选项 myOption 注入一个处理器。
Vue.mixin({created: function () {var myOption this.$options.myOption;if (myOption) {console.log(myOption);}},
});new Vue({myOption: hello!,
});
// hello!Vue 生命周期函数
单页面开发模式每个页面都可以理解为一个 Vue 组件每个页面都是一个鲜活的生命在它的一生中从出生到消亡都会有对应的钩子函数下面就让我们认识一下它们。
beforeCreate在组件创建之前。created在组件创建之后一般用于初始化一些固定的数据。beforeMountDOM 节点渲染之前。mounted在 DOM 节点渲染完之后被触发通常笔者都会在这个生命周期中通过 ajax 去获取服务端的数据如果在 created 生命周期里获取数据并渲染视图DOM 节点可能还未被渲染有可能页面会报错安全起见数据统一放在 mounted 钩子函数内获取。beforeUpdate数据更新时调用发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM比如手动移除已添加的事件监听器。updated当这个钩子被调用时组件 DOM 已经更新所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下你应该避免在此期间更改状态。如果要相应状态改变通常最好使用 计算属性 或 watcher 取而代之。activated被 keep-alive 缓存的组件激活时调用。deactivated被 keep-alive 缓存的组件停用时调用。beforeDestroy实例销毁之前调用。在这一步实例仍然完全可用。destroyed实例销毁后调用。该钩子被调用后对应 Vue 实例的所有指令都被解绑所有的事件监听器被移除所有的子实例也都被销毁。一般用于销毁页面内创建的 setTimeout 等变量防止内存泄漏。
实例
Vue 生命周期代码演示如下
template
div idappp v-cloak{{ count }}/pbutton clickadd加/button/div
/templatescriptexport default {name: App,data() {return {count: 1,};},methods: {add: function () {this.count;},},beforeCreate: function () {console.log(beforeCreate);},created: function () {console.log(created);},beforeMount: function () {console.log(beforeMount);},mounted: function () {console.log(mounted);},beforeUpdate: function () {console.log(beforeUpdate);},updated: function () {console.log(updated);},activated: function () {console.log(activated);},deactivated: function () {console.log(deactivated);},beforeDestroy: function () {console.log(beforeDestroy);},destroyed: function () {console.log(destroyed);},};
/scriptstyle[v-cloak] {display: none;}
/style
