网站导航
> 文档中心 > gulimall基础篇回顾Day-06

gulimall基础篇回顾Day-06

网友: 文档中心 2022-03-29 11:00:59

前端开发基础知识&快速入门

  • 一、计算属性和侦听器
    • 1、计算属性（computed）
    • 2、侦听（watch）
    • 3、示例
  • 二、过滤器（filters）
    • 1、局部过滤器
    • 2、全局过滤器
  • 三、组件化
    • 1、全局组件
    • 2、组件的复用
    • 3、局部组件
  • 四、生命周期钩子函数
    • 1、生命周期
    • 2、钩子函数
  • 五、vue 模块化开发
    • 1、npm install webpack -g
    • 2、npm install -g @vue/cli-init
    • 3、初始化 vue 项目
    • 4、启动 vue 项目
    • 5、模块化开发

一、计算属性和侦听器

1、计算属性（computed）

某些结果是基于之前数据实时计算出来的，我们可以利用计算属性。

2、侦听（watch）

watch 可以让我们监控一个值的变化。从而做出相应的反应。

3、示例

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title></head><body>    <div id="app">  <ul>     <li>西游记； 价格：{{xyjPrice}}，数量：<input type="number" v-model="xyjNum"> </li>     <li>水浒传； 价格：{{shzPrice}}，数量：<input type="number" v-model="shzNum"> </li>     <li>总价：{{totalPrice}}</li>     {{msg}} </ul>    </div>    <script src="../node_modules/vue/dist/vue.js"></script>    <script> //watch可以让我们监控一个值的变化。从而做出相应的反应。 new Vue({     el: "#app",     data: {  xyjPrice: 99.98,  shzPrice: 98.00,  xyjNum: 1,  shzNum: 1,  msg: ""     },     computed: {  totalPrice(){      return this.xyjPrice*this.xyjNum + this.shzPrice*this.shzNum  }     },     watch: {  xyjNum(newVal,oldVal){      if(newVal>=3){   this.msg = "库存超出限制";   this.xyjNum = 3      }else{   this.msg = "";      }  }     }, })    </script></body></html>

gulimall基础篇回顾Day-06

二、过滤器（filters）

过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本。在很多不同的 情况下，过滤器都是有用的，比如尽可能保持 API 响应的干净，并在前端处理数据的格式。 示例：展示用户列表性别显示男女。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title></head><body>        <div id="app"> <ul>     <li v-for="user in userList">  {{user.id}} ==> {{user.name}} ==> {{user.gender == 1?"男":"女"}} ==>  {{user.gender | genderFilter}} ==> {{user.gender | gFilter}}     </li> </ul>    </div>    <script src="../node_modules/vue/dist/vue.js"></script>    <script> //全局过滤器 Vue.filter("gFilter", function (val) {     if (val == 1) {  return "男~~~";     } else {  return "女~~~";     } }) let vm = new Vue({     el: "#app",     data: {  userList: [      { id: 1, name: 'jacky', gender: 1 },      { id: 2, name: 'peter', gender: 0 }  ]     },     filters: {   filters 定义局部过滤器，只可以在当前vue实例中使用  genderFilter(val) {      if (val == 1) {   return "男";      } else {   return "女";      }  }     } })    </script></body></html>

gulimall基础篇回顾Day-06

1、局部过滤器

注册在当前 vue 实例中，只有当前实例能用。

2、全局过滤器

// 在创建 Vue 实例之前全局定义过滤器： Vue.filter('capitalize', function (value) { return value.charAt(0).toUpperCase() + value.slice(1) }) 任何 vue 实例都可以使用： <td>{{user.name | capitalize}}</td>

过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式

三、组件化

在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。 例如可能会有相同的头部导航。 但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同部 分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。 在 vue 里，所有的 vue 实例都是组件
在这里插入图片描述

1、全局组件

我们通过 Vue 的 component 方法来定义一个全局组件。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title></head><body>    <div id="app"> <button v-on:click="count++">我被点击了 {{count}} 次</button> <counter></counter> <counter></counter> <counter></counter> <counter></counter> <counter></counter> <button-counter></button-counter>    </div>    <script src="../node_modules/vue/dist/vue.js"></script>    <script> //1、全局声明注册一个组件 Vue.component("counter", {     template: ``,     data() {  return {      count: 1  }     } }); //2、局部声明一个组件 const buttonCounter = {     template: ``,     data() {  return {      count: 1  }     } }; new Vue({     el: "#app",     data: {  count: 1     },     components: {  'button-counter': buttonCounter     } })    </script></body></html>

gulimall基础篇回顾Day-06
 组件其实也是一个 Vue 实例，因此它在定义时也会接收：data、methods、生命周期函数等。
 不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有 el 属性。
 但是组件渲染需要 html 模板，所以增加了 template 属性，值就是 HTML 模板
 全局组件定义完毕，任何 vue 实例都可以直接在 HTML 中通过组件名称来使用组件了  data 必须是一个函数，不再是一个对象。

2、组件的复用

定义好的组件，可以任意复用多次：

<div id="app">     <counter></counter>     <counter></counter>    <counter></counter> </div>

3、局部组件

一旦全局注册，就意味着即便以后你不再使用这个组件，它依然会随着 Vue 的加载而加载。 因此，对于一些并不频繁使用的组件，我们会采用局部注册。
gulimall基础篇回顾Day-06

四、生命周期钩子函数

1、生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程 ：创建实例，装载模板，渲染模 板等等。Vue 为生命周期中的每个状态都设置了钩子函数（监听函数）。每当 Vue 实例处于 不同的生命周期时，对应的函数就会被触发调用。 生命周期：你不需要立马弄明白所有的东西。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title></head><body>    <div id="app"> <span id="num">{{num}}</span> <button @click="num++">赞！</button> <h2>{{name}}，有{{num}}个人点赞</h2>    </div>    <script src="../node_modules/vue/dist/vue.js"></script> <script> let app = new Vue({     el: "#app",     data: {  name: "张三",  num: 100     },     methods: {  show() {      return this.name;  },  add() {      this.num++;  }     },     beforeCreate() {  console.log("=========beforeCreate=============");  console.log("数据模型未加载：" + this.name, this.num);  console.log("方法未加载：" + this.show());  console.log("html模板未加载：" + document.getElementById("num"));     },     created: function () {  console.log("=========created=============");  console.log("数据模型已加载：" + this.name, this.num);  console.log("方法已加载：" + this.show());  console.log("html模板已加载：" + document.getElementById("num"));  console.log("html模板未渲染：" + document.getElementById("num").innerText);     },     beforeMount() {  console.log("=========beforeMount=============");  console.log("html模板未渲染：" + document.getElementById("num").innerText);     },     mounted() {  console.log("=========mounted=============");  console.log("html模板已渲染：" + document.getElementById("num").innerText);     },     beforeUpdate() {  console.log("=========beforeUpdate=============");  console.log("数据模型已更新：" + this.num);  console.log("html模板未更新：" + document.getElementById("num").innerText);     },     updated() {  console.log("=========updated=============");  console.log("数据模型已更新：" + this.num);  console.log("html模板已更新：" + document.getElementById("num").innerText);     } });    </script></body></html>

在这里插入图片描述

gulimall基础篇回顾Day-06

2、钩子函数

 beforeCreated：我们在用 Vue 时都要进行实例化，因此，该函数就是在 Vue 实例化时调 用，也可以将他理解为初始化函数比较方便一点，在 Vue1.0 时，这个函数的名字就是 init。
 created：在创建实例之后进行调用。
 beforeMount：页面加载完成，没有渲染。如：此时页面还是{{name}}
 mounted：我们可以将他理解为原生 js 中的 window.οnlοad=function({.,.}),或许大家也在 用 jquery，所以也可以理解为 jquery 中的$(document).ready(function(){….})，他的功能就 是：在 dom 文档渲染完毕之后将要执行的函数，该函数在 Vue1.0 版本中名字为 compiled。 此时页面中的{{name}}已被渲染成张三
 beforeDestroy：该函数将在销毁实例前进行调用 。
 destroyed：改函数将在销毁实例时进行调用。
 beforeUpdate：组件更新之前。
 updated：组件更新之后。

五、vue 模块化开发

1、npm install webpack -g

全局安装 webpack

2、npm install -g @vue/cli-init

全局安装 vue 脚手架

3、初始化 vue 项目

vue init webpack appname：vue 脚手架使用 webpack 模板初始化一个 appname 项目

4、启动 vue 项目

项目的 package.json 中有 scripts，代表我们能运行的命令
npm start = npm run dev：启动项目 npm run build：将项目打包

5、模块化开发

1、项目结构
在这里插入图片描述
 运行流程 ：
 进入页面首先加载 index.html 和 main.js 文件。
 main.js 导入了一些模块【vue、app、router】，并且创建 vue 实例，关联 index.html 页面的

元素。使用了 router，导入了 App 组件。并且使用标签 引用了这个组件
 第一次默认显示 App 组件。App 组件有个图片和，所以显示了图片。 但是由于代表路由的视图，默认是访问/#/路径（router 路径默认使用 HASH 模式）。在 router 中配置的/是显示 HelloWorld 组件。
 所以第一次访问，显示图片和 HelloWorld 组件。
 我们尝试自己写一个组件，并且加入路由。点击跳转。需要使用Go to Foo标签

网络标签：

相关问题