谷粒商城-VUE的快速开发

其他 2021-11-20 00:51:54 阅读次数: 0

本文是在学习是为了加深印象做的个人笔记，请看原作者文章
原文链接：https://blog.csdn.net/hancoder/article/details/107007605

一、ES6

ECMAScript 是标准javascript是实现
在这里插入图片描述

VS环境搭建

之前写过了，需要在VScode中安装如下插件：

Auto Close Tag
Auto Rename Tag
Chinese
ESlint
HTML CSS Support
HTML Snippets
JavaScript ES6
Live Server
open in brower
Vetur33
Vue 2Snippets 语法提示
谷歌浏览器中安装插件Vue Devtools

一、ES6的新特性

打开VSCode—打开文件夹—新建es6文件夹—新建文件1、let.html—shift+!+Enter生成模板。

1.1 let，const 变量的使用

let不会作用到{}外，var会越域跳到{}外
var可以多次声明同一变量，let会报错
var定义之前可以使用，let定义之前不可使用。（变量提升问题）

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

    <script>
       // var 声明的变量往往会越域
       // let 声明的变量有严格局部作用域
         {
    
    
             var a = 1;
             let b = 2;
         }
         console.log(a);  // 1
         console.log(b);  // ReferenceError: b is not defined

         // var 可以声明多次
         // let 只能声明一次
         var m = 1
         var m = 2
         let n = 3
//         let n = 4
         console.log(m)  // 2
         console.log(n)  // Identifier 'n' has already been declared

        // var 会变量提升
        // let 不存在变量提升
         console.log(x);  // undefined
         var x = 10;
         console.log(y);   //ReferenceError: y is not defined
         let y = 20;

        // let
        // 1. const声明之后不允许改变
           // 2. 一但声明必须初始化，否则会报错
        const a = 1;
        a = 3; //Uncaught TypeError: Assignment to constant variable.
    
    </script>

</body>
</html>

1.2 解构表达式

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

    <script>
        //数组解构
        let arr = [1,2,3];
        // // let a = arr[0];
        // // let b = arr[1];
        // // let c = arr[2];

        let [a,b,c] = arr;
        console.log(a,b,c)

        const person = {
    
    
            name: "jack",
            age: 21,
            language: ['java', 'js', 'css']
        }
        //         const name = person.name;
        //         const age = person.age;
        //         const language = person.language;

        //对象解构 // 把name属性变为abc，声明了abc、age、language三个变量
        const {
    
     name: abc, age, language } = person;
        console.log(abc, age, language)

        //4、字符串扩展
        let str = "hello.vue";
        console.log(str.startsWith("hello"));//true
        console.log(str.endsWith(".vue"));//true
        console.log(str.includes("e"));//true
        console.log(str.includes("hello"));//true

        //字符串模板 ``可以定义多行字符串
        let ss = `<div>
                    <span>hello world<span>
                </div>`;
        console.log(ss);
        
        function fun() {
     
     
            return "这是一个函数"
        }

        // 2、字符串插入变量和表达式。变量名写在 ${
     
     } 中，${
     
     } 中可以放入 JavaScript 表达式。
        let info = `我是${abc}，今年${age + 10}了, 我想说： ${fun()}`;
        console.log(info);

    </script>
</body>
</html>

1.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>

    <script>
        //在ES6以前，我们无法给一个函数参数设置默认值，只能采用变通写法：
        function add(a, b) {
    
    
            // 判断b是否为空，为空就给默认值1
            b = b || 1;
            return a + b;
        }
        // 传一个参数
        console.log(add(10));


        //现在可以这么写：直接给参数写上默认值，没传就会自动使用默认值
        function add2(a, b = 1) {
    
    
            return a + b;
        }
        console.log(add2(20));


        //2）、不定参数
        function fun(...values) {
    
    
            console.log(values.length)
        }
        fun(1, 2)      //2
        fun(1, 2, 3, 4)  //4

        //3）、箭头函数。lambda
        //以前声明一个方法
        // var print = function (obj) {
    
    
        //     console.log(obj);
        // }
        var print = obj => console.log(obj);
        print("hello");

        var sum = function (a, b) {
    
    
            c = a + b;
            return a + c;
        }

        var sum2 = (a, b) => a + b;
        console.log(sum2(11, 12));

        var sum3 = (a, b) => {
    
    
            c = a + b;
            return a + c;
        }
        console.log(sum3(10, 20))


        const person = {
    
    
            name: "jack",
            age: 21,
            language: ['java', 'js', 'css']
        }

        function hello(person) {
    
    
            console.log("hello," + person.name)
        }

        //箭头函数+解构
        var hello2 = ({
    
    name}) => console.log("hello," +name);
        hello2(person);

    </script>
</body>
</html>

在这里插入图片描述

1.4 对象优化

<!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>
    <script>
        const person = {
    
    
            name: "jack",
            age: 21,
            language: ['java', 'js', 'css']
        }

        console.log(Object.keys(person));//["name", "age", "language"]
        console.log(Object.values(person));//["jack", 21, Array(3)]
        console.log(Object.entries(person));//[Array(2), Array(2), Array(2)]

        const target  = {
    
     a: 1 };
        const source1 = {
    
     b: 2 };
        const source2 = {
    
     c: 3 };

        // 合并
        //{
    
    a:1,b:2,c:3}
        Object.assign(target, source1, source2);

        console.log(target);//["name", "age", "language"]

        //2）、声明对象简写
        const age = 23
        const name = "张三"
        const person1 = {
    
     age: age, name: name }
        // 等价于
        const person2 = {
    
     age, name }//声明对象简写
        console.log(person2);

        //3）、对象的函数属性简写
        let person3 = {
    
    
            name: "jack",
            // 以前：
            eat: function (food) {
    
    
                console.log(this.name + "在吃" + food);
            },
            //箭头函数this不能使用，要使用的话需要使用：对象.属性
            eat2: food => console.log(person3.name + "在吃" + food),
            eat3(food) {
    
    
                console.log(this.name + "在吃" + food);
            }
        }

        person3.eat("香蕉");
        person3.eat2("苹果")
        person3.eat3("橘子");

        //4）、对象拓展运算符

        // 1、拷贝对象（深拷贝）
        let p1 = {
    
     name: "Amy", age: 15 }
        // 表示把p1中的所有属性拿出来赋值给someone
        let someone = {
    
     ...p1 }
        console.log(someone)  //{
    
    name: "Amy", age: 15}

        // 2、合并对象
        let age1 = {
    
     age: 15 }
        let name1 = {
    
     name: "Amy" }
        let p2 = {
    
    name:"zhangsan"}
        p2 = {
    
     ...age1, ...name1 } 
        // Amy覆盖了张三，说明最后生成的值覆盖了原来p2的值
        console.log(p2) // {
    
    age: 15, name: "Amy"}
    </script>
</body>

</html>

1.5 map和reduce 的使用

map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。
reduce() 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素

<!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>
    
    <script>
        //数组中新增了map和reduce方法。
         let arr = ['1', '20', '-5', '3'];
         
        //map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。
        //  arr = arr.map((item)=>{
    
    
        //     return item*2
        //  });
         arr = arr.map(item=> item*2);

        

         console.log(arr);
        //reduce() 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，
        //[2, 40, -10, 6]
        //arr.reduce(callback,[initialValue])
        /**
        1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
        2、currentValue （数组中当前被处理的元素）
        3、index （当前元素在数组中的索引）
        4、array （调用 reduce 的数组）*/
        let result = arr.reduce((a,b)=>{
    
    
            console.log("上一次处理后："+a);
            console.log("当前正在处理："+b);
            return a + b;
        },100);
        console.log(result)

    
    </script>
</body>
</html>

1.6 优化异步操作

优化异步操作。封装ajax

<!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>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <script>
        //1、查出当前用户信息
        //2、按照当前用户的id查出他的课程
        //3、按照当前课程id查出分数
        // $.ajax({
    
    
        //     url: "mock/user.json",
        //     success(data) {
    
    
        //         console.log("查询用户：", data);
        //         $.ajax({
    
    
        //             url: `mock/user_corse_${
     
     data.id}.json`,
        //             success(data) {
    
    
        //                 console.log("查询到课程：", data);
        //                 $.ajax({
    
    
        //                     url: `mock/corse_score_${
     
     data.id}.json`,
        //                     success(data) {
    
    
        //                         console.log("查询到分数：", data);
        //                     },
        //                     error(error) {
    
    
        //                         console.log("出现异常了：" + error);
        //                     }
        //                 });
        //             },
        //             error(error) {
    
    
        //                 console.log("出现异常了：" + error);
        //             }
        //         });
        //     },
        //     error(error) {
    
    
        //         console.log("出现异常了：" + error);
        //     }
        // });


        //1、Promise可以封装异步操作
        // let p = new Promise((resolve, reject) => {
    
     //传入成功解析，失败拒绝
        //     //1、异步操作
        //     $.ajax({
    
    
        //         url: "mock/user.json",
        //         success: function (data) {
    
    
        //             console.log("查询用户成功:", data)
        //             resolve(data);
        //         },
        //         error: function (err) {
    
    
        //             reject(err);
        //         }
        //     });
        // });

        // p.then((obj) => {
    
     //成功以后做什么
        //     return new Promise((resolve, reject) => {
    
    
        //         $.ajax({
    
    
        //             url: `mock/user_corse_${
     
     obj.id}.json`,
        //             success: function (data) {
    
    
        //                 console.log("查询用户课程成功:", data)
        //                 resolve(data);
        //             },
        //             error: function (err) {
    
    
        //                 reject(err)
        //             }
        //         });
        //     })
        // }).then((data) => {
    
     //成功以后干什么
        //     console.log("上一步的结果", data)
        //     $.ajax({
    
    
        //         url: `mock/corse_score_${
     
     data.id}.json`,
        //         success: function (data) {
    
    
        //             console.log("查询课程得分成功:", data)
        //         },
        //         error: function (err) {
    
    
        //         }
        //     });
        // })

        function get(url, data) {
    
     //自己定义一个方法整合一下
            return new Promise((resolve, reject) => {
    
    
                $.ajax({
    
    
                    url: url,
                    data: data,
                    success: function (data) {
    
    
                        resolve(data);
                    },
                    error: function (err) {
    
    
                        reject(err)
                    }
                })
            });
        }

        get("mock/user.json")
            .then((data) => {
    
    
                console.log("用户查询成功~~~:", data)
                return get(`mock/user_corse_${
     
     data.id}.json`);
            })
            .then((data) => {
    
    
                console.log("课程查询成功~~~:", data)
                return get(`mock/corse_score_${
     
     data.id}.json`);
            })
            .then((data)=>{
    
    
                console.log("课程成绩查询成功~~~:", data)
            })
            .catch((err)=>{
    
     //失败的话catch
                console.log("出现异常",err)
            });

    </script>
</body>

</html>

corse_score_10.json 得分

{
    
    
    "id": 100,
    "score": 90
}

user.json 用户

{
    
    
    "id": 1,
    "name": "zhangsan",
    "password": "123456"
}

user_corse_1.json 课程

扫描二维码关注公众号，回复： 13240320 查看本文章 
{
    
    
    "id": 10,
    "name": "chinese"
}

在这里插入图片描述

1.7 模块化

模块化就是把代码进行拆分，方便重复利用。类似于java中的导包，而JS换了个概念，是导模块。

模块功能主要有两个命令构成 export 和import

export用于规定模块的对外接口
import用于导入其他模块提供的功能

user.js

var name = "jack"
var age = 21
function add(a,b){
    
    
    return a + b;
}
// 导出变量和函数
export {
    
    name,age,add}

hello.js

// export const util = {
    
    
//     sum(a, b) {
    
    
//         return a + b;
//     }
// }

// 导出后可以重命名
export default {
    
    
    sum(a, b) {
    
    
        return a + b;
    }
}
// export {
    
    util}

//`export`不仅可以导出对象，一切JS变量都可以导出。比如：基本类型变量、函数、数组、对象。

main.js

import abc from "./hello.js"
import {
    
    name,add} from "./user.js"

abc.sum(1,2);
console.log(name);
add(1,3);

2、VUE

2.1 简介

官网：https://cn.vuejs.org/v2/guide/
MVVM思想
M：model 包括数据和一些基本操作
V：view 视图，页面渲染结果
VM：View-model，模型与视图间的双向操作（无需开发人员干涉）
视图和数据通过VM绑定起来，model里有变化会自动地通过Directives填写到视view中，视图表单中添加了内容也会自动地通过DOM Listeners保存到模型中。

2.2 安装

第一步：用npm初始化项目
npm init -y
第二步：安装vue的依赖
npm install vue

在这里插入图片描述

2.3 vue语法提示和浏览器插件安装

在vscode中安装插件：Vetur和Vue 2 Snippets
在浏览器安装插件：Vue-Devtools

2.4 常用语法

插值闪烁：

使用{
   
   {}}方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的{
   
   {}}，
加载完毕后才显示正确数据，我们称为插值闪烁。
我们将网速调慢一些，然后刷新页面，试试看刚才的案例

1、v-text、v-html.html

<!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">
        {
    
    {
    
    msg}}  {
    
    {
    
    1+1}}  {
    
    {
    
    hello()}}<br/>
        <span v-html="msg"></span>
        <br/>
        <span v-text="msg"></span>

        
    </div>
   
    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>
        new Vue({
    
    
            el:"#app",
            data:{
    
    
                msg:"<h1>Hello</h1>",
                link:"http://www.baidu.com"
            },
            methods:{
    
    
                hello(){
    
    
                    return "World"
                }
            }
        })
    </script>
    
</body>
</html>

2、v-bind.html

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

    <!-- 给html标签的属性绑定 -->
    <div id="app"> 

        <a v-bind:href="link">gogogo</a>

        <!-- class,style  {
    
    class名：加上？}-->
        <span v-bind:class="{active:isActive,'text-danger':hasError}"
          :style="{color: color1,fontSize: size}">你好</span>


    </div>

    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>
        let vm = new Vue({
    
    
            el:"#app",
            data:{
    
    
                link: "http://www.baidu.com",
                isActive:true,
                hasError:true,
                color1:'red',
                size:'36px'
            }
        })
    </script>

</body>
</html>

3 v-modal
双向绑定

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

        精通的语言：
            <input type="checkbox" v-model="language" value="Java"> java<br/>
            <input type="checkbox" v-model="language" value="PHP"> PHP<br/>
            <input type="checkbox" v-model="language" value="Python"> Python<br/>
        选中了 {
    
    {
    
    language.join(",")}}
    </div>
    
    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>
        let vm = new Vue({
    
    
            el:"#app",
            data:{
    
    
                language: []
            }
        })
    </script>

</body>
</html>

4.v-on 与 @onclick

<!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">
                
        <!--事件中直接写js片段-->
        <button v-on:click="num++">点赞</button>
        <!--事件指定一个回调函数，必须是Vue实例中定义的函数-->
        <button @click="cancle">取消</button>
        <!--  -->
        <h1>有{
    
    {
    
    num}}个赞</h1>


        <!-- 事件修饰符 -->
        <div style="border: 1px solid red;padding: 20px;" v-on:click.once="hello">
            大div
            <div style="border: 1px solid blue;padding: 20px;" @click.stop="hello">
                小div <br />
                <a href="http://www.baidu.com" @click.prevent.stop="hello">去百度</a>
            </div>
        </div>



        <!-- 按键修饰符： -->
        <input type="text" v-model="num" v-on:keyup.up="num+=2" @keyup.down="num-=2" @click.ctrl="num=10"><br />

        提示：

    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>
        new Vue({
    
    
            el:"#app",
            data:{
    
    
                num: 1
            },
            methods:{
    
    
                cancle(){
    
    
                    this.num--;
                },
                hello(){
    
    
                    alert("点击了")
                }
            }
        })
    </script>
</body>

</html>
  1. v-for
<!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>
            <!-- 为了提高渲染效率，要添加key字段 -->
            <li v-for="(user,index) in users" :key="user.name" v-if="user.gender == '女'">
                <!-- 1、显示user信息：v-for="item in items" -->
               当前索引：{
    
    {
    
    index}} ==> {
    
    {
    
    user.name}}  ==>   {
    
    {
    
    user.gender}} ==>{
    
    {
    
    user.age}} <br>
                <!-- 2、获取数组下标：v-for="(item,index) in items" -->
                <!-- 3、遍历对象：
                        v-for="value in object"
                        v-for="(value,key) in object"
                        v-for="(value,key,index) in object" 
                -->
                对象信息：
                <span v-for="(v,k,i) in user">{
    
    {
    
    k}}=={
    
    {
    
    v}}=={
    
    {
    
    i}}；</span>
                <!-- 4、遍历的时候都加上:key来区分不同数据，提高vue渲染效率 -->
            </li>

            
        </ul>

        <ul>
            <li v-for="(num,index) in nums" :key="index"></li>
        </ul>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>         
        let app = new Vue({
    
    
            el: "#app",
            data: {
    
    
                users: [{
    
     name: '柳岩', gender: '女', age: 21 },
                {
    
     name: '张三', gender: '男', age: 18 },
                {
    
     name: '范冰冰', gender: '女', age: 24 },
                {
    
     name: '刘亦菲', gender: '女', age: 18 },
                {
    
     name: '古力娜扎', gender: '女', age: 25 }],
                nums: [1,2,3,4,4]
            },
        })
    </script>
</body>

</html>
  1. v-if 和 v-show
<!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>
    <!-- 
        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>
  1. v-else 和 v-slse-if
<!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="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">
            看到我啦？！ &gt;= 0.2
        </h1>

        <h1 v-else>
            看到我啦？！ &lt; 0.2
        </h1>

    </div>


    <script src="../node_modules/vue/dist/vue.js"></script>
        
    <script>         
        let app = new Vue({
    
    
            el: "#app",
            data: {
    
     random: 1 }
        })     
    </script>
</body>

</html>

2.5 计算属性和监听器

<!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: ""
            },
            // 计算属性，this.xyjPrice*this.xyjNum + this.shzPrice*this.shzNum中的值有变化就会触发totalPrice这个方法
            computed: {
    
    
                totalPrice(){
    
    
                    return this.xyjPrice*this.xyjNum + this.shzPrice*this.shzNum
                }
            },
            // 监控器，此处监控的是data 中 xyjNum 这个属性，写了一个同名的方法，2个参数，一个新值，一个老值
            watch: {
    
    
                xyjNum(newVal,oldVal){
    
    
                    if(newVal>=3){
    
    
                        this.msg = "库存超出限制";
                        this.xyjNum = 3
                    }else{
    
    
                        this.msg = "";
                    }
                }
            },
        })
    </script>

</body>

</html>

过滤器

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

2.6 组件化

组件化

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

2.6 生命周期

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

三、vue的模块化开发

3.1 安装

打开cmd 输入一下命令

## 第一步：安装webpack -g 表示全局安装
npm install webpack -g
## 第二部：安装vue脚手架
npm install -g @vue/cli-init 
## 第三步：初始话vue项目,vue脚手架通过webpack模板初始化一个项目，名为vue-demo
vue init webpack vue-demo
## 第四步：启动vue项目
cd vue-demo
npm run dev
## 启动后显示： Your application is running here: http://localhost:8080
## 第五步：ctrl+C 停止项目，整合elementUI i表示install
npm i element-ui

在这里插入图片描述

3.2 结构

在这里插入图片描述

3.3 单文件组件

在这里插入图片描述

3.4 路由视图

在这里插入图片描述

3.5 快速生成模板的代码片段

设置》代码生成片段

// https://www.cnblogs.com/songjilong/p/12635448.html
{
    
    
    "Print to console": {
    
    
        "prefix": "vue",
        "body": [
            "<!-- $1 -->",
            "<template>",
            "<div class='$2'>$5</div>",
            "</template>",
            "",
            "<script>",
            "//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）",
            "//例如：import 《组件名称》 from '《组件路径》';",
            "",
            "export default {",
            "//import引入的组件需要注入到对象中才能使用",
            "components: {},",
            "data() {",
            "//这里存放数据",
            "return {",
            "",
            "};",
            "},",
            "//监听属性 类似于data概念",
            "computed: {},",
            "//监控data中的数据变化",
            "watch: {},",
            "//方法集合",
            "methods: {",
            "",
            "},",
            "//生命周期 - 创建完成（可以访问当前this实例）",
            "created() {",
            "",
            "},",
            "//生命周期 - 挂载完成（可以访问DOM元素）",
            "mounted() {",
            "",
            "},",
            "beforeCreate() {}, //生命周期 - 创建之前",
            "beforeMount() {}, //生命周期 - 挂载之前",
            "beforeUpdate() {}, //生命周期 - 更新之前",
            "updated() {}, //生命周期 - 更新之后",
            "beforeDestroy() {}, //生命周期 - 销毁之前",
            "destroyed() {}, //生命周期 - 销毁完成",
            "activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发",
            "}",
            "</script>",
            "<style scoped>",
            "//@import url($3); 引入公共css类",
            "$4",
            "</style>"
        ],
        "description": "生成vue模板"
    },
    "http-get请求": {
    
    
	"prefix": "httpget",
	"body": [
		"this.\\$http({",
		"url: this.\\$http.adornUrl(''),",
		"method: 'get',",
		"params: this.\\$http.adornParams({})",
		"}).then(({ data }) => {",
		"})"
	],
	"description": "httpGET请求"
    },
    "http-post请求": {
    
    
	"prefix": "httppost",
	"body": [
		"this.\\$http({",
		"url: this.\\$http.adornUrl(''),",
		"method: 'post',",
		"data: this.\\$http.adornData(data, false)",
		"}).then(({ data }) => { });" 
	],
	"description": "httpPOST请求"
    }
}

四、vue整合elementui

官网： https://element.eleme.cn/#/zh-CN/component/installation

# 直接npm安装，在项目中执行
npm i element-ui -S

# 或者引入样式

使用：在main.js 中写入一下内容

import ElementUI  from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';

// 让vue使用ElementUI组件
Vue.use(ElementUI);

五、组件的导入和导出

一个整体的功能模块，我们可以把它定义为一个组件，例如左侧导航我们可以把它定义成一个组件，这样其他的地方就可以很方便的调用它，如何进行组件的导入导出和使用呢。
第一步：定义组件，组件的三要素
a）、 页面布局
b）、 编写逻辑，并且在组件中也可以导入其他组件
c）、 编写样式
第二步：导出组件，用于其他组件调用，导出操作，在组件三要素的b中 export default
如：export default

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
    
    
  //import引入的组件需要注入到对象中才能使用
  components: {
    
    },
  props: {
    
    },
  data() {
    
    },
  //计算属性 类似于data概念
  computed: {
    
    },
  //监控data中的数据变化
  watch: {
    
    },
  //方法集合
  methods: {
    
    
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    
    },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    
    },
  beforeCreate() {
    
    }, //生命周期 - 创建之前
  beforeMount() {
    
    }, //生命周期 - 挂载之前
  beforeUpdate() {
    
    }, //生命周期 - 更新之前
  updated() {
    
    }, //生命周期 - 更新之后
  beforeDestroy() {
    
    }, //生命周期 - 销毁之前
  destroyed() {
    
    }, //生命周期 - 销毁完成
  activated() {
    
    } //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

第三步：在其他的组件或者页面中导入并使用
在


<script>
//导入组件category 并命名为Category 
import Category from "../common/category";
export default {
    
    
  //import引入的组件需要注入到对象中才能使用,第一个Category 才是使用的组件的名字
  components: {
    
     Category}, 等价于{
    
    Category:Category}

在中使用

<template>
  <el-row :gutter="20">
    <el-col :span="6">
      <category @tree-node-click="treenodeclick"></category>
    </el-col>

六、vue父子组件传递数据

6.1 子组件给父组件传递数据

场景：子组件是一个左侧3级分类，父组件左侧导入了三级分类，右侧时三级分类对应的列表，子组件点击的三级分类后父组件要对右侧列表进行更新。
第一步：子组件向父组件发送事件this.$emit(“事件名”,携带的数据…) 可以携带任意多个数据

    nodeclick(data, node, component) {
    
    
      console.log("子组件category的节点被点击", data, node, component);
      //向父组件发送事件；
      this.$emit("tree-node-click", data, node, component);
    }

第二步：父组件感应子组件发送的事件在template中，并转到了自己的事件

 <category @tree-node-click="treenodeclick"></category>

第三步：定义父组件自己的事件，相当于与感应到的子组件的事件绑定

//感知树节点被点击
    treenodeclick(data, node, component) {
    
    
      if (node.level == 3) {
    
    
        this.catId = data.catId;
        this.getDataList(); //重新查询
      }
    }

/**

  • 父子组件传递数据,当前组件时父组件
  • 1)、子组件给父组件传递数据，事件机制；
  • 子组件给父组件发送一个事件，携带上数据。
  • // this.$emit(“事件名”,携带的数据…)
    */

注意事项

v-bind:src 缩写 :src
{“bac”:abc} 缩写 {abc}

猜你喜欢

转载自blog.csdn.net/fen_dou_shao_nian/article/details/117265626
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
基本数据类型封装类比较 Java源码解读(一) 8种基本类型对应的封装类型
JS实现无缝滚动上
深入解析HashMap原理（基于JDK1.8）
mysql的连接池
关于.htc
linux下的ubuntu12.04图形界面
【数论】好推不好记的扩展欧几里德
设备树详解
cscope + tags 简单设置
xml学习
每日归档
更多
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022