vue进阶
1 computed 计算属性
1.1 什么是计算属性
在Vue应用中，在模板中双向绑定一些数据或者表达式，但是表达式如果过长，或者逻辑更为复杂时，就会变得臃肿甚至难以维护和阅读，比如下面的代码:
<div>
写在双括号中的表达式太长了,不利于阅读
{{text.split(',').reverse().join(',')}}
</div>
将这段操作text.split(',').reverse().join(',') 放到计算属性中,最终返回一个结果值就可以
computed 的作用: 减少运算次数, 缓存运算结果. 运用于重复相同的计算.
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>computed 计算属性</title>
</head>
<body>
<div id="app">
<h1>{{a*b}}</h1>
<h1>{{a*b}}</h1>
<h1>{{res()}}</h1>
<h1>{{res()}}</h1>
<h1>{{res2}}</h1>
<h1>{{res2}}</h1>
<h1>{{res2}}</h1>
</div>
</body>
<script src="./js/vue.min.js"></script>
<script> var VM = new Vue({
el: "#app",
data: {
a: 10,
b: 20,
},
methods: {
res: function () {
console.log("res方法执行");
return this.a * this.b;
},
},
//使用计算属性进行优化 减少运算次数,用于重复相同的运算
computed: {
res2: function () {
console.log("res2方法执行");
return this.a * this.b;
},
},
}); </script>
</html>
computed总结
- 定义函数也可以实现与 计算属性相同的效果,都可以简化运算。
- 不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。
2 filter 过滤器
2.1 什么是过滤器
过滤器是对即将显示的数据做进一步的筛选处理，然后进行显示，值得注意的是过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。
数据加工车间,对值进行筛选加工.
2.2 过滤器使用位置
- 双括号插值内
{{ msg | filterA }} msg是需要处理的数据, filterA是过滤器, | 这个竖线是管道,通过这个管道 将数据传输给过滤器进行过滤 加工操作 - v-bind绑定的值的地方。
<h1 v-bind:id=" msg | filterA"> {{ msg }} </h1>
2.3 过滤器
-
局部过滤器
需求: 通过过滤器给电脑价格前面 添加一个符号¥<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>局部过滤器</title> </head> <body> <div id="app"> <p>电脑价格: {{price | addIcon}}</p> </div> </body> <script src="./js/vue.min.js"></script> <script> var VM = new Vue({ //挂载点 el: "#app", data: { price: 200, }, //方法 methods: {}, //计算属性 computed: {}, //局部过滤器 filters: { //处理函数,value = price ,是固定参数 addIcon(value) { return "¥" + value; }, }, }); </script> </html> -
全局过滤器
需求: 将用户名开头字母大写<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>全局过滤器</title> </head> <body> <div id="app"> <p>{{user.name | changeName}}</p> </div> </body> <script src="./js/vue.min.js"></script> <script> //在创建Vue实例之前 创建全局过滤器 Vue.filter("changeName", function (value) { //将姓名开头字母大写,然后再重新拼接 return value.charAt(0).toUpperCase() + value.slice(1); }); var VM = new Vue({ el: "#app", //挂载点 data: { user: { name: "tom" }, }, }); </script> </html>
总结
- 过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式
- 过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示
- 当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！
- 一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右
3 watch 侦听器
3.1 什么是侦听器
Vue.js 提供了一个方法 watch，它用于观察Vue实例上的数据变动。
作用: 当你有一些数据需要随着其它数据变动而变动时，可以使用侦听属性
3.2 案例演示
需求: 监听姓名变化,实时显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>侦听器</title>
</head>
<body>
<div id="app">
<label>名：<input type="text" v-model="firstName" /></label>
<label>姓：<input type="text" v-model="lastName" /></label>
{{fullNameComputed}}
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
firstName: "",
lastName: "",
fullName: "",
},
//监听，程序在运行的时候，实时监听事件
watch: {
//参数说明：1、新值，2、旧值
firstName(newValue, oldValue) {
this.fullName = newValue + " " + this.lastName;
},
lastName(newValue, oldValue) {
this.fullName = this.firstName + " " + newValue;
},
},
computed: {
fullNameComputed() {
return this.firstName + " " + this.lastName;
},
},
});
</script>
</html>
4 Component 组件
4.1 组件介绍
- 组件（Component）是自定义封装的功能。在前端开发过程中，经常出现多个网页的功能是重复的，而且很多不同的页面之间，也存在同样的功能。
- 我们将相同的功能进行抽取,封装为组件,这样，前端人员就可以在组件化开发时，只需要书写一次代码，随处引入即可使用。
- 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树
vue的组件有两种: 全局组件 和 局部组件
4.2 全局组件
语法格式:
Vue.component("组件名称", {
template: "html代码",
// 组件的HTML结构代码
data(){
//组件数据
return {}
},
methods: {
// 组件的相关的js方法
方法名(){
// 逻辑代码
}
}
})
注意:
- 组件名以小写开头，采用短横线分割命名: 例如 hello-Word
- 组件中的data 必须是一个函数,注意与Vue实例中的data区分
- 在template模板中, 只能有一个根元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全局组件</title>
</head>
<body>
<div id="app">
<!-- 使用组件,可以使用多次 -->
<my-header></my-header>
<my-header></my-header>
<my-header></my-header>
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
//全局组件
Vue.component(
"my-header", {
//组件的命名一般使用短横线方式,组件中的模板只能有一个根元素
template: "<div>头部组件的HTML代码<h1 @click='hello'>{{msg}}</h1><div>",
data() {
//组件中的data是一个函数
return {
msg: "hello这里是组件中的data数据",
};
},
methods: {
hello() {
alert("嗨 你好!");
},
},
}
);
var VM = new Vue({
el: "#app",
data: {},
methods: {},
});
</script>
</html>
4.3 局部组件
相比起全局组件，局部组件只能在同一个实例内才能被调用。局部组件的写法和全局组件差不多。 唯一不同就是：局部组件要写在Vue实例里面。
new Vue({
el: "#app",
components: {
组件名: {
// 组件结构
template: "HTML代码",
// data数据
data() {
return { msg:"xxxx" };
},
},
},
});
注意:
创建局部组件，注意 components，注意末尾有 ‘s’，而全局组件是不用+ ‘s’ 的。这意味着，
components 里可以创建多个组件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>局部组件</title>
</head>
<body>
<div id="app">
<web-msg></web-msg>
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
var VM = new Vue({
el: "#app",
components: {
//组件名称
"web-msg": {
//组件内容
template: "<div><h1>{{msg1}}</h1><h1>{{msg2}}</h1></div>",
data() {
return {
msg1: "开发ing...",
msg2: "开发完成!",
};
},
},
},
});
</script>
</html >
4.4 组件与模板分离
由于把html语言写在组件里面很不方便，也不太好看所以将它们分开写。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>组件与模板分离</title>
</head>
<body>
<div id="app">
<web-msg></web-msg>
</div>
<!-- 将模板写在HTML中, 给模板指定一个ID -->
<template id="tmp1">
<div>
<button @click="show">{{msg}}</button>
</div>
</template>
</body>
<script src="./js/vue.min.js"></script>
<script>
var VM = new Vue({
el: "#app",
components: {
"web-msg": {
template: "#tmp1",
data() {
return {
msg: "点击查询",
};
},
methods: {
show() {
alert("正在查询,请稍等...");
},
},
},
"web-msg2": {},
},
});
</script>
</html>
总结:
- 上面这种写法，浏览器会把 html 里的 template 标签过滤掉。所以 template 标签的内容是不会在页面中展示的。直到它被 JS 中的 Vue 调用。
- 在 html 中，template 标签一定要有一个 id，因为通过 id 是最直接被选中的。 data 和 methods等 参数，全部都要放到 Vue 实例里面写
5 Vue生命周期
5.1 生命周期图示
每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期
了解生命周期的好处:
- 找错误
- 解决需求
下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。
5.2 钩子函数介绍
生命周期中的钩子函数
钩子函数：钩子函数是在一个事件触发的时候，在系统级捕获到了他，然后做一些操作
| 函数 | 说明 |
|---|---|
| beforeCreate() | 在创建Vue实例之前,可以执行这个方法. 例如 加载动画操作 |
| created() | 实例创建完成,属性绑定好了,但是DOM还没有生成. |
| beforeMount() | 模板已经在内存中编辑完成了，尚未被渲染到页面中. |
| mounted() | 内存中的模板已经渲染到页面，用户已经可以看见内容. |
| beforeUpdate() | 数据更新的前一刻 , 组件在发生更新之前,调用的函数 |
| updated() | updated执行时，内存中的数据已更新，并且页面已经被渲染 |
| beforeDestroy () | 钩子函数在实例销毁之前调用 |
| destroyed () | 钩子函数在Vue 实例销毁后调用 |
5.3 案例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>钩子函数</title>
</head>
<body>
<div id="app">
<button @click="next">获取下一句</button>
<h2 id="msg">{{message}}</h2>
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
var VM = new Vue({
el: "#app",
data: {
message: "想当年,金戈铁马",
},
methods: {
next() {
this.message = "气吞万里如虎!";
},
show() {
alert("show方法执行!");
},
},
beforeCreate() {
alert("1.beforeCreate函数在组件实例化之前执行");
alert(this.message); //undefined
this.show(); // this.show is not a function
},
created() {
alert("2.created函数执行时,组件实例化完成,但是DOM(页面)还未生成");
alert(this.message);
this.show();
},
beforeMount() {
alert( "3.beforeMount函数执行时，模板已经在内存中编辑完成了，尚未被渲染到页面中" );
alert(document.getElementById("msg").innerText); //Cannot read property 'innerText' of null
},
mounted() {
alert("4.mounted函数执行时,模板已经渲染到页面,执行完页面显示");
alert(document.getElementById("msg").innerText);
},
beforeUpdate() {
alert("5.beforeUpdate执行时，内存中的数据已更新，但是页面尚未被渲染");
alert("页面显示的内容:" + document.getElementById("msg").innerText);
alert("data中的message数据是: " + this.message);
},
updated() {
alert("6.updated执行时，内存中的数据已更新,此方法执行完显示页面!");
},
});
</script>
</html >
6 Vue Router 路由
6.1 什么是路由?
在Web开发中，路由是指根据URL分配到对应的处理程序。 路由允许我们通过不同的 URL 访问不同的内容。
通过 Vue.js 可以实现多视图单页面web应用（single page web application，SPA）
6.2 什么是SPA ?
百度百科
单页面Web应用（single page web application，SPA），就是只有一张Web页面的应用，
是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。
单页应用不存在页面跳转，它本身只有一个HTML页面。我们传统意义上的页面跳转在单页应用的概念下转变为了 body 内某些元素的替换和更新，举个例子:
整个body的内容从登录组件变成了欢迎页组件, 从视觉上感受页面已经进行了跳转。但实际上，页面只是随着用户操作，实现了局部内容更新,依然还是在index.html 页面中。
单页面应用的好处:
- 用户操作体验好，用户不用刷新页面，整个交互过程都是通过Ajax来操作。
- 适合前后端分离开发，服务端提供http接口，前端请求http接口获取数据，使用JS进行客户端渲染。
6.3 路由相关的概念
- router :
是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用（SPA）变得易如反掌 ,router 就相当于一个管理者，它来管理路由。 - route:
ruter相当于路由器, route就相当于一条路由.比如: Home按钮 => home内容， 这是一条route,news按钮 => news内容， 这是另一条路由。 - routes :
是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， {about按钮 => about 内容}] - router-link组件: router-link 是一个组件，是对标签的一个封装. 该组件用于设置一个导航链接，切换不同 HTML内容。 to 属性为目标地址， 即要显示的内容
- router-view 组件:
路由导航到指定组件后,进行渲染显示页面.
6.4 使用路由
- Vue.js 路由需要载入 vue-router 库
//方式1: 本地导入 <script src="vue-router.min.js"></script> //方式2: CDN <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> - 使用步骤
- 定义路由所需的组件
- 定义路由 每个路由都由两部分 path (路径) 和component (组件)
- 创建router路由器实例 ,管理路由
- 创建Vue实例, 注入路由对象, 使用$mount() 指定挂载点
Vue 的$mount()为手动挂载，在项目中可用于延时挂载 （例如在挂载之前要进行一些其他操作、判断等）， 之后要手动挂载上。 new Vue时，el和$mount并没有本质上的不同。
- 代码案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>路由</title> </head> <body> <div id="app"> <h1>渣浪.com</h1> <p> <!-- 使用 router-link 组件来导航,to属性指定链接 --> <router-link to="/home">go to home</router-link> <router-link to="/news">go to news</router-link> </p> <!-- 路由的出口, 路由匹配到的组件(页面)将渲染在这里 --> <router-view></router-view> </div> </body> <script src="./js/vue.min.js"></script> <script src="./js/vue-router.min.js"></script> <script> //1.定义路由所需的组件 var home = { template: "<div>首页</div>" }; var news = { template: "<div>新闻</div>" }; //2.定义路由 每个路由都有两部分 path和component var routes = [ { path: "/home", component: home }, { path: "/news", component: news }, ]; //3.创建router路由器实例,对路由对象routes进行管理. var router = new VueRouter({ routes: routes, }); //4.创建Vue实例, 调用挂载mount函数,让整个应用都有路由功能 var VM = new Vue({ router, }).$mount("#app"); //$mount是手动挂载代替el </script> </html>
6.5 路由总结
- router是Vue中的路由管理器对象,用来管理路由.
- route是路由对象,一个路由就对应了一条访问路径,一组路由用routes表示
- 每个路由对象都有两部分 path(路径)和component (组件)
- router-link 是对a标签的封装,通过to属性指定连接
- router-view 路由访问到指定组件后,进行页面展示
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
