第168天学习打卡（项目 谷粒商城 10 Vue 指令 计算属性和侦听器 组件化 生命周期钩子函数 模块化）

Vue指令

v-if和v-show.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>Document</title>
 </head>
 <body>
     <!-- 
         v-if ,顾明思议，条件判断，当得到结果为true时，所在的元素才会被渲染
         v-show,当得到结果为true时，所在的元素才会被显示
      -->
      <div id="app">
          <button v-on:click="show = !show">点我呀</button>
          <!-- 1.使用v-if显示 -->
          <h1 v-if="show">if=看到我....</h1>
          <!-- 2.使用v-show显示 -->
          <h1 v-show="show">show=看到我</h1>
 ​
      </div>
      <script src="../node_modules/vue/dist/vue.js"></script>
 ​
      <script>
         let app = new Vue({
             el: "#app",
          data: {
              show: true
          }
         })
 ​
      </script>
 </body>
 </html>

 

image-20210625201639623

v-else和v-else-if.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>Document</title>
 </head>
 <body>
     <div id="app">
         <button v-on:click="random=Math.random()">点我呀</button>
         <span>{{random}}</span>
 ​
         <h1 v-if="random>=0.75">
             看到我啦?! &gt;= 0.75
         </h1>
 ​
         <h1 v-else-if="random>=0.5">
             看到我啦?! &gt;= 0.5
         </h1>
 ​
         <h1 v-else-if="random>=0.2">
             看到我啦?! &lt;= 0.2
         </h1>
 ​
         <h1 v-else>
             看到我啦?! &lt; 0.1 
         </h1>
 ​
 ​
     </div>
     <script src="../node_modules/vue/dist/vue.js"></script>
 ​
     <script>
         let app = new Vue({
             el: "#app",
             data: {random: 1}
         })
     </script>
 </body>
 </html>

image-20210625203110440

Vue计算属性和侦听器

计算属性和侦听器.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>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>
         </ul>
     </div>
     <script src="../node_modules/vue/dist/vue.js"></script>
 ​
     <script>
         new Vue({
             el: "#app",
             data: {
                 xyjPrice: 99.98,
                 shzPrice: 98.00,
                 xyjNum: 1,
                 shzNum: 1
             },
             computed: {
                 totalPrice(){
                     return this.xyjPrice*this.xyjNum + this.shzPrice*this.shzNum
 ​
                 }
             },
         })
     </script>
 </body>
 </html>

image-20210625205108765

watch监控

 <!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>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: function(newVal,oldVal){
                    
                     if(newVal > 3){
                         this.msg = "库存超出限制";
                         this.xyjNum = 3
                     }
                 }
             },
         })
     </script>
 </body>
 </html>

image-20210625205830518

 

image-20210625210105492

image-20210625210122657

 <!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>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>

过滤器.html

image-20210625211428386

image-20210625211509068

 

 <!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>Document</title>
 </head>
 <body>
     <!-- 过滤器常用来处理文本格式化操作。过滤可以用在两个地方：双花括号插值和v-bind 表达式 -->
     <div id="app">
         <ul>
             <li v-for="user in userList">
                 {{user.id}} ==> {{user.name}} ==> {{user.gender == 1 ? "男":"女"}} ==> {{user.gender | genderFilter}}
             </li>
         </ul>
 ​
     </div>
     <script src="../node_modules/vue/dist/vue.js"></script>
 ​
     <script>
         let vm = new Vue({
             el: "#app",
             data: {
                 userList: [
                     {id: 1, name: 'jacky', gender: 1},
                     {id: 2, name: 'peter', gender: 0}
                 ]
             },
             filters:{
                 genderFilter(val){
                     if(val == 1){
                         return "男";
                     }else{
                         return "女";
                     }
                 }
             }
         })
     </script>
 ​
 ​
 </body>
 </html>

image-20210625211912061

image-20210625211929426

 

 <!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>Document</title>
 </head>
 <body>
     <!-- 过滤器常用来处理文本格式化操作。过滤可以用在两个地方：双花括号插值和v-bind 表达式 -->
     <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>

Vue组件化

image-20210625212043328

image-20210625213511080

 <!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>Document</title>
 </head>
 <body>
     
     <div id="app">
         <button v-on:click="count++">我被点击了{{count}}次</button>
 ​
     </div>
     <script src="../node_modules/vue/dist/vue.js"></script>
 ​
     <script>
         new Vue({
             el: "#app",
             data:{
                 count: 1
             }
         })
     </script>
 </body>
 </html>

image-20210625212537902

全局声明组件

image-20210625213033391

image-20210625213050514

image-20210625213122994

image-20210625213136890

image-20210625213427801

 

 <!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>Document</title>
 </head>
 <body>
     
     <div id="app">
         <button v-on:click="count++">我被点击了{{count}}次</button>
         <counter></counter>
         <counter></counter>
         <counter></counter>
 ​
     </div>
     <script src="../node_modules/vue/dist/vue.js"></script>
 ​
     <script>
         //1.全局声明注册一个组件
         Vue.component("counter",{
             template: ` <button v-on:click="count++">我被点击了{{count}}次</button>`,
             data() {
                 return {
                     count: 1
                 }
             }
         });
         new Vue({
             el: "#app",
             data:{
                 count: 1
             }
         })
     </script>
 </body>
 </html>

局部声明组件

image-20210625214451539

image-20210625214121530

 <!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>Document</title>
 </head>
 <body>
     
     <div id="app">
         <button v-on:click="count++">我被点击了{{count}}次</button>
         <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: ` <button v-on:click="count++">我被点击了{{count}}次</button>`,
             data() {
                 return {
                     count: 1
                 }
             }
         });
 ​
         //2.局部声明一个组件
         const buttonCounter = {
             template: ` <button v-on:click="count++">我被点击了{{count}}次~~~~~</button>`,
             data() {
                 return {
                     count: 1
                 }
             }
 ​
         };
         new Vue({
             el: "#app",
             data:{
                 count: 1
             },
             components: {
                 'button-counter' : buttonCounter
             }
         })
     </script>
 </body>
 </html>

Vue 生命周期钩子函数

image-20210625214846842

 

 <!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>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>

Vue模块化开发

image-20210625215926025

image-20210625221303191

image-20210625220919398

 

 

image-20210625221249457

 

 ​
 npm install webpack -g
 ​
 ​
 npm install -g @vue/cli-init
 ​

 

 

报错：

  vue-cli · Failed to download repo vuejs-templates/webpack: read ECONNRESET
  
  vue-cli · read ECONNRESET

image-20210625223409670

 

image-20210625223615903

 

 

快捷键: windoms + R 然后输入cmd 就可以打开命令行提示窗口了

B站学习网址：全网最强电商教程《谷粒商城》对标阿里P6/P7，40-60万年薪哔哩哔哩bilibili

posted @ 2021-06-25 22:42  豆豆tj  阅读(36)  评论(0)    收藏  举报