Vue学习进度一

已于 2022-06-06 19:05:14 修改
阅读量280 收藏
点赞数 1
分类专栏： Vue 文章标签： vue.js
于 2022-06-06 16:40:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52384627/article/details/125017503
版权

VUE学习进度一

1.初识Vue

1.1Vue实例+绑定容器

在这里插入图片描述
在这里插入图片描述

<!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">
    <!-- cdn -->
    <!-- 开发版本 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> -->
    <!-- 生产版本 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script> -->
    <script type="text/javascript" src="./js/vue.js"></script>
    <!-- <script type="text/javascript" src="./js/vue.min.js"></script> -->
    <title>Document</title>
</head>
<body>
    <!-- 创建一个容器 -->
    <div id="root">
        name:{{name}}<br>
        age:{{age}}<br>
    </div>


    <script type="text/javascript">
        Vue.config.productionTip = false ;//启动Vue禁止出现报错信息

        //Vue实例
        new Vue({
            el:"#root",//le指定Vue为哪个容器服务
            data: {//data数据供el指定的容器使用
                name:"尚硅谷",
                age:"20"
            }
        });

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

Vue模板语法

2.1插值语法{{}}+指令语法v-bind

在这里插入图片描述

<!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">
    <!-- cdn -->
    <!-- 开发版本 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> -->
    <!-- 生产版本 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script> -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <!-- <script type="text/javascript" src="./js/vue.min.js"></script> -->
    <title>Document</title>
</head>
<body>
    <!-- 创建一个容器 -->
    <div id="root">
        <!-- 插值语法 -->
        <h1>你好，{{name}}，我年龄是{{age}}岁</h1>

        <!-- 指令语法 -->
        <a v-bind:href="url">点击我跳转百度</a><br />
        <a :href="url">点击我跳转百度</a><br />
    </div>

    <script type="text/javascript">
        
        Vue.config.productionTip = false ;//启动Vue禁止出现报错信息

        //Vue实例
        new Vue({
            el:"#root",         //le指定Vue为哪个容器服务
            data: {             //data数据供el指定的容器使用
                name:"尚硅谷",
                age:"20",
                url:"http://www.baidu.com",
            }
        });

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

3.数据绑定

3.1数据绑定(单向绑定v-bind+双向绑定v-model)

在这里插入图片描述

<!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">
    <!-- cdn -->
    <!-- 开发版本 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> -->
    <!-- 生产版本 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script> -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <!-- <script type="text/javascript" src="./js/vue.min.js"></script> -->
    <title>Document</title>
</head>

<body>
    <!-- 创建一个容器 -->
    <div id="root">
        
        <!-- 普通写法 -->
        <h1>普通写法</h1>
        单向[表面修改本质没改]
        <input type="text" v-bind:value="name"><br/>
        双向[表面修改-->本质修改]
        <input type="text" v-model:value="name"><hr color="red">


        <!-- 缩略版本 -->
        <h1>缩略版本</h1>
        单向[表面修改本质没改]
        <input type="text" :value="name"><br/>
        双向[表面修改-->本质修改]
        <input type="text" v-model="name">


    </div>


    <script type="text/javascript">
        Vue.config.productionTip = false ;//启动Vue禁止出现报错信息

        //Vue实例
        new Vue({
            el:"#root",//le指定Vue为哪个容器服务
            data: {//data数据供el指定的容器使用
                name:"尚硅谷",
                age:"20"
            }
        });

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

4.el和data的两种写法

4.1el和data的两种写法

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <script type="text/javascript" src="../js/vue.js" ></script>
    <title>Document</title>
</head>
<body>
    <div id="root">
        <h1>name:{{name}}{{age}}</h1>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip=false;
    //     const v = new Vue({       
    //     //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@第一种写法@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@    
    //     // el: "#root",
    //     data: {       
    //         name: "尚真",
    //     },
    //   });
    //   //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@第二种写法@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
    // //   v.$mount("#root");

    //   setTimeout(() =>
    //   {
    //     v.$mount("#root");
    //   },1000)

    const v = new Vue({ 
        el: "#root",

        //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@方法一：对象式@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
        // data: {       
        //     name: "尚真",
        //     age: 28,
        // },

        //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@方法二：函数式@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
        //data:function(){}   this指Vue对象   --->简写：data(){}    (对)
        //data:()=>{}         this指Window对象                      (错)
        data()
        {
            console.log(this);
            //注意此处的return {}            “{”要与return在一行 
            return {
                name:"尚真",
                age:"20"
            }
        },
      });


</script>
</html>

5.MVVM模型

5.1MVVM模型

模板 --Vue实例对象–data中数据
在这里插入图片描述
在这里插入图片描述

<!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">
    <script type="text/javascript" src="/js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root">
        <h1>我叫{{name}}</h1>
        <h1>地址{{address}}</h1>
        <h1>测试1：{{1+1}}</h1>
        <h1>测试2：{{$emit}}</h1>
        <h1>测试3：{{$options}}</h1>
        <h1>测试4：{{_c}}</h1>
    </div>
    
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
    const vm = new Vue({         //el指定Vue为哪个容器服务
    el: "#root",
    data: {       //data数据供el指定的容器使用
        name:"HAUCM",
        address:"河南",
    },
  });
  console.log(vm);
</script>
</html>

在这里插入图片描述

6.数据代理

6.1Object.defineProperty（）[对对象的方法]

总结
在这里插入图片描述

注意：
在这里插入图片描述
情况一：
在这里插入图片描述
在这里插入图片描述
情况二：

在这里插入图片描述
在这里插入图片描述
程序

<!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">
    <script type="text/javascript" src="/js/vue.js"></script>
    <title>Document</title>
</head>
<body>

</body>

<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
let number = 19;
let person = {
        name: 'John',
        address: '河南',
    }
    Object.defineProperty(person, 'age',{
        // enumerable:true,//可以遍历
        // writable:true,//可以修改值
        // configurable:true,//可以删除属性
        
        //读取age执行,返回age值【通过修改number】
        get()
        {
            console.log("读取了age属性");
            return number;
        },
        //修改age执行,传入具体修改值
        set(value)
        {
            console.log("修给了age属性",value);
            number = value;
        }
    });
    for(let key in person) 
    {
        console.log(person[key]);
    }
</script>

</html>

age的set()和get()[上面程序执行的结果]
在这里插入图片描述

6.2数据代理(通过obj2读取(修改)obj的x)

在这里插入图片描述通过obj2读取(修改)obj的x

<!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">
    <script type="text/javascript" src="/js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
let obj = {x:100}
let obj2 = {y:200}  
//通过obj2读取(修改)obj的x
Object.defineProperty(obj2, "x", 
{
    //访问
    get()
    {
        return obj.x;
    },
    //修改
    set(value)
    {
        obj.x = value;
    }
})      
</script>
</html>

6.3 Vue中的数据代理(vm._data = data)

总结
在这里插入图片描述

解释在这里插入图片描述

在这里插入图片描述
原理
在这里插入图片描述

7.事件处理

7.1事件处理基本使用

在这里插入图片描述

<!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">
    <script type="text/javascript" src="/js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root">
        <h1>欢迎来到{{name}}</h1>
        <button v-on:click="showInfo1">点击按钮显示提示信息1</button>
        <button @click="showInfo2($event,66)">点击按钮显示提示信息2</button>
    </div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
    new Vue({         //el指定Vue为哪个容器服务
    el: "#root",
    data: {       //data数据供el指定的容器使用
        name: "尚硅谷",
    },
    methods: { 
        showInfo1()
        {
            // console.log("");//第一个参数是event事件
            alert("你好,111");
        },
        showInfo2(event,number)
        {
            console.log(event,number)
            alert("你好,222");
        }

    }
  });
</script>
</html>

7.2事件修饰符

可以叠加：

//以下效果相同，但执行顺序不同
@click.stop.prevent="showInfo"
@click.prevent.stop="showInfo"

总结
在这里插入图片描述
在这里插入图片描述

<!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">
    <script type="text/javascript" src="/js/vue.js"></script>
    <title>Document</title>
    <style>
        *
        {
            margin: 20px;
        }
        #demo1 {
            background-color: aquamarine;
            /* width: 100px; */
            height: 100px;
        }
        .box1{
            background-color: aqua;
            height: 100;
        }
        .box2{
            padding: 5px;
            background-color: rgb(236, 127, 255);
            height: 50px;
        }
        .list{
            /* width: 500px; */
            height: 200px;
            background-color: aqua;
            overflow:scroll;
        }
        li{
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="root">
        <!-- <h1>名称:{{name}}</h1> -->
        <!-- @click.prevent阻止默认事件发生:点击时先提示，后跳转的情况 -->
        <a href="http://www.mycompany.com" @click.prevent="showInfo">阻止默认</a>
        <hr height="5px" color="red">

        <!-- 阻止冒泡传递：button发生，向上传递div也发生 -->
        <div id="demo1" @click="showInfo">
            <button @click.stop="showInfo">阻止冒泡</button>
        </div>
        <hr height="5px" color="red">

        <!-- 点击事件触发一次 -->
        <button @click.once="showInfo">只有一次</button>
        <hr height="5px" color="red">

        <!-- 捕获事件 -->
        <div class="box1" @click.capture="showMessage(1)">
            div1
            <div class="box2" @click="showMessage(2)">
                div2
            </div>
        </div>
        <hr height="5px" color="red">

        <!-- 只有点击该元素才会触发 -->
        <div id="demo1" @click.self="showInfo">
            <button @click="showInfo">阻止冒泡</button>
        </div>
        <hr height="5px" color="red">
        
        <!-- 滚动触发 -->
        <!-- @wheel:鼠标滚动轮 -->
        <!-- @scroll:滚动条 + 鼠标滚动轮 -->
        <ul class="list" @wheel="demo">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>

    </div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
    new Vue({         //el指定Vue为哪个容器服务
    el: "#root",
    data: {       //data数据供el指定的容器使用
        name: "尚硅谷",
    },
    methods:{
        showInfo(event)
        {
            // 阻止默认发生
            // event.preventDefault();

            //阻止冒泡
            // event.stopPropagation();//stop停止  Propagation传播


            // alert("你好1");

            console.log(event.target);
        },
        showMessage(number)
        {
            console.log(number);
        },
        demo()
        {
            for(let i = 0; i < 1000; i++)
            console.log("@");
            console.log("完成");
        }
    }
  });
</script>
</html>

7.3.键盘事件(keyup,keydown[ctrl,enter…])

一般，ctrl,alt,shift,meta,tab配合keydown使用

ctrl+y组合键

@keyup.ctrl.y="showInfo"

在这里插入图片描述

<!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">
    <script type="text/javascript" src="/js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root">
        <!-- @keyup.tab错误  @keydown.tab正确 -->
        <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
    </div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
    new Vue({         //el指定Vue为哪个容器服务
    el: "#root",
    data: {       //data数据供el指定的容器使用

    },
    methods: { 
        showInfo(e)
        {
            console.log("字符编码："+e.keyCode+"\t字符名称："+e.key+"\t事件类型："+e.type);
            // if(e.keyCode !== 13) return ;
            console.log(e.target.value);
        }
    }
  });
</script>
</html>

8. 计算属性

8.1姓名案例_插值语法实现

在这里插入图片描述

<!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">
    <script type="text/javascript" src="/js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root">
        <input type="text" v-model="firstname"><br>
        <input type="text" v-model="secondname"><br>
        <span>{{firstname}}-{{secondname}}</span>
    </div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
    new Vue({         //el指定Vue为哪个容器服务
    el: "#root",
    data: {       //data数据供el指定的容器使用
        firstname: "张",
        secondname: "三",
    },
  });
</script>
</html>

8.2姓名案例_methods实现

<!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">
    <script type="text/javascript" src="/js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root">
        <input type="text" v-model="firstname"><br>
        <input type="text" v-model="secondname"><br>
        <span>{{fullName()}}</span>
    </div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
    new Vue({         //el指定Vue为哪个容器服务
    el: "#root",
    data: {       //data数据供el指定的容器使用
        firstname: "张",
        secondname: "三",
    },
    methods: { 
       fullName()
       {
           return this.firstname.slice(0,3) + "-" + this.secondname;
       }
    }
  });
</script>
</html>

8.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">
    <script type="text/javascript" src="/js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root">
        <input type="text" v-model="firstname"><br>
        <input type="text" v-model="secondname"><br>
        <span>{{fullName}}</span>
    </div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
    new Vue({         //el指定Vue为哪个容器服务
    el: "#root",
    data: {       //data数据供el指定的容器使用
        firstname: "张",
        secondname: "三",
    },
    computed:{
        fullName:{
            //get作用？读取fullName时调用，返回值作为fullName的值
            //get什么时候调用？1.初次读fullName时（会缓存）2.依赖项发生改变
            get()
            {
                return this.firstname+"-"+this.secondname;
            },
            //修改fullName时调用
            set(value)
            {
                let arr = value.split("-");
                this.firstname = arr[0];
                this.secondname = arr[1];
            }
        }
    }
  });
</script>
</html>

8.4计算属性简写

当只涉及get()读取时可以简写, 注意调用时还是属性,不是函数

<!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">
    <script type="text/javascript" src="/js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root">
        <input type="text" v-model="firstname"><br>
        <input type="text" v-model="secondname"><br>
        <span>{{fullName}}</span>
    </div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
    new Vue({         //el指定Vue为哪个容器服务
    el: "#root",
    data: {       //data数据供el指定的容器使用
        firstname: "张",
        secondname: "三",
    },
    //当只涉及get读取时，可以简写，
    // 注意调用时还是属性，不是函数()
    computed:{
        fullName()
        {
            return this.firstname+"-"+this.secondname;
        },
    }
  });
</script>
</html>

9.监视属性

9.1天气样例 _监视属性

在这里插入图片描述
在这里插入图片描述

<!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">
    <script type="text/javascript" src="/js/vue.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="root">
        <h1>今天天气很{{info}}</h1>
        <button @click="change">更换</button>
    </div>  
</body>


<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
    let vm = new Vue({         //el指定Vue为哪个容器服务
    el: "#root",
    data: {       //data数据供el指定的容器使用
        isHot:true,
    },
    computed:{
        info()
        {
            return this.isHot ? "凉爽" :"炎热";
        }
    },
    methods:{
        change()
        {
            this.isHot = !this.isHot;
        }
    },
    //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@方法一@@@@@@@@@@@@@@@@@@@@@@@@@@@
    //监视isHot
    watch:{
        immediate:true,//初始化调用一下
        isHot:{
            //isHot改变，执行handler()
             handler(newvalue,oldvalue)
             {
                console.log("isHot改变了",newvalue,oldvalue);
             }
        }
    }
  });
// @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@方法二@@@@@@@@@@@@@@@@@@@@@@@@@@@@
//   vm.$watch('isHot',{
//         immediate:true,
//         handler(newvalue,oldvalue)
//         {
//             console.log("isHot改变了",newvalue,oldvalue);
//         }
//     })
</script>
</html>

9.2天气样例_深度监视【deep:true,】

在这里插入图片描述

在这里插入图片描述

<!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">
    <script type="text/javascript" src="/js/vue.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="root">
        <h1>今天天气很{{info}}</h1>
        <button @click="change">更换</button>
        <h1>{{number.a}}</h1>
        <button @click="add_a">点击a+1</button>
        <h1>{{number.b}}</h1>
        <button @click="add_b">点击b+1</button>
    </div>  
</body>


<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
    let vm = new Vue({         //el指定Vue为哪个容器服务
    el: "#root",
    data: {       //data数据供el指定的容器使用
        isHot:true,
        number:{
            a:1,
            b:2,
        }
    },
    computed:{
        info()
        {
            return this.isHot ? "凉爽" :"炎热";
        }
    },
    methods:{
        change()
        {
            this.isHot = !this.isHot;
        },
        add_a()
        {
            this.number.a++;
            // this.number.b++;
        },
        add_b()
        {
            // this.number.a++;
            this.number.b++;
        }
    },

    watch:{
        // immediate:true,//初始化调用一下
        isHot:{
            //isHot改变，执行handler()
             handler(newvalue,oldvalue)
             {
                console.log("isHot改变了",newvalue,oldvalue);
             }
        },

        //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@所有监视@@@@@@@@@@@@@@@@@@@@@@@@
        //监视多级结构中的所有属性变化
        number:{
            deep:true,//深度监视，所有number中的东西
            handler()
            {
                console.log("number发生变化");
            }
        }
        //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@分别监视@@@@@@@@@@@@@@@@@@@@@@@@@
        // 'number.a':{
        //     handler(){
        //         console.log("a改变了");
        //     }
        // },
        // 'number.b':{
        //     handler(){
        //         console.log("b改变了");
        //     } 
        // }
    }
  });


</script>
</html>

9.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">
    <script type="text/javascript" src="/js/vue.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="root">
        <h1>今天天气很{{info}}</h1>
        <button @click="change">更换</button>
        <!-- <h1>{{number.a}}</h1>
        <button @click="add_a">点击a+1</button>
        <h1>{{number.b}}</h1>
        <button @click="add_b">点击b+1</button> -->
    </div>  
</body>


<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
    const vm = new Vue({         //el指定Vue为哪个容器服务
    el: "#root",
    data: {       //data数据供el指定的容器使用
        isHot:true,
    },
    computed:{
        info()
        {
            return this.isHot ? "凉爽" :"炎热";
        }
    },
    methods:{
        change()
        {
            this.isHot = !this.isHot;
        }
    },
    watch:{
        //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@正常写法@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
        isHot:{
            immediate:true,
            deep:true,
             handler(newvalue,oldvalue)
             {
                console.log("isHot改变了",newvalue,oldvalue);
             }
        }

        //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@简写【只有handler()函数时】@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
        // isHot(newvalue,oldvalue)
        // {
        //     console.log("isHot改变了",newvalue,oldvalue);
        // }
    },
});
//@@@@@@@@@@@@@@@@@@@@@@@@@@@@正常写法@@@@@@@@@@@@@@@@@@@@@@@
// vm.$watch('isHot',{
//             immediate:true,
//             deep:true,
//              handler(newvalue,oldvalue)
//              {
//                 console.log("isHot改变了",newvalue,oldvalue);
//              }
//     })
//@@@@@@@@@@@@@@@@@@@@@@@@@@@@@简写@@@@@@@@@@@@@@@@@@@@@@@@@@@@
// vm.$watch('isHot',function(newvalue,oldvalue)
// {
//     console.log("isHot改变了",newvalue,oldvalue);
// })
</script>
</html>

9.4计算属性和监视属性比较

在这里插入图片描述

<!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">
    <script type="text/javascript" src="/js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root">
        <input type="text" v-model="firstname"><br>
        <input type="text" v-model="secondname"><br>
        <span>{{fullName}}</span>
    </div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
    new Vue({         //el指定Vue为哪个容器服务
    el: "#root",
    data: {       //data数据供el指定的容器使用
        firstname: "张",
        secondname: "三",
        fullName: "张-三",
    },
    watch:{
        firstname(newvalue,oldvalue)
        {
            setTimeout(()=>{
                this.fullName = newvalue + "-" + this.secondname;
            },1000);
            // this.fullName = newvalue + "-" + this.secondname; 
            console.log("First name changed");
        },
        secondname(newvalue,oldvalue)
        {
            this.fullName = this.firstname + "-" + newvalue;  
            console.log("Second name changed");
        }
    },
});


  // computed:{
    //     fullName:{
    //         //get作用？读取fullName时调用，返回值作为fullName的值
    //         //get什么时候调用？1.初次读fullName时（会缓存）2.依赖项发生改变
    //         get()
    //         {
    //             return this.firstname+"-"+this.secondname;
    //         },
    //         //修改fullName时调用
    //         set(value)
    //         {
    //             let arr = value.split("-");
    //             this.firstname = arr[0];
    //             this.secondname = arr[1];
    //         }
    //     }
    
</script>

</html>

10.绑定样式

10.1绑定class

在这里插入图片描述

在这里插入图片描述

<!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">
    <script type="text/javascript" src="/js/vue.js"></script>
    <title>Document</title>
    <style>
        .demo1{
            border: 5px solid black;
            width: 300px;
            height: 300px;
        }


        /* 测试1 */
        .demo2{
            background-color:blue;
            width: 300px;
            height: 300px;
        }
        .demo3{
            background-color:red;
            width: 300px;
            height: 300px;
        }
        .demo4{
            background-color:yellow;
            width: 300px;
            height: 300px;
        }

        /* 测试2 */
        .demo5{
            background-color:yellow;
            width: 300px;
            height: 300px;
        }
        .demo6{
            font-size: 40px;
        }
        .demo7{
             border-radius: 30%;
        }

    </style>
</head>
<body>
    <div id="root">
        <!-- 绑定class样式--字符串写法：样式的类名不确定，需要动态指定 -->
        <div class="demo1" :class="class_demo"  @click="change_demo">
            <h1>大家好</h1>
        </div>
        <br><br><br>
        <!-- 绑定class样式--数组写法： 样式个数不确定，样式的名子不确定-->
        <!-- 此处是将数组中的所有class值都应用 -->
        <div class="demo1" :class="class_Arr">
            <h1>大家好</h1>
        </div>
        <br><br><br>

        <!-- 绑定class样式--对象写法：绑定的个数，名称确定，但要动态确定用不用 -->
        <div class="demo1" :class="class_obj">
            <h1>大家好</h1>
        </div>
        <br><br><br>
    </div>
</body>

<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
    const vm = new Vue({         //el指定Vue为哪个容器服务
    el: "#root",
    data: {       //data数据供el指定的容器使用
        class_demo:"demo2",
        class_Arr:["demo5","demo6","demo7"],
        class_obj:{
            "demo6":true,
            "demo7":true,
        }
    },
    methods: { 
        change_demo()
        {
            const arr = ["demo2","demo3","demo4"];
            let idx =  Math.floor(Math.random()*3);
            this.class_demo = arr[idx];
            console.log(idx);
        },
    },
    
  });
//   console.log(this.class_demo);
</script>

</html>

10.2绑定style【不常用（略）】

11.条件渲染

11.1（v-show,v-if）

在这里插入图片描述

<!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">
    <script type="text/javascript" src="/js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root">
        <!-- display：hidden 而已,架构存在-->
        <!-- 若页面变化次数较多,建议使用v-show -->
        <h1 v-show="isHidden">你好,{{name}} </h1>
        <button @click="change">点击后相反操作</button>
        <hr color="red">
        
        
        <!-- 结构不存在 -->
        <h1>n:{{n}}</h1>
        <button @click="add">点击后加1</button>
        <h1 v-if="n===1">HTML1</h1>
        <h1 v-else-if="n===2">CSS2</h1>
        <h1 v-else-if="n===3">JS3</h1>
        <h1 v-else>Vue4</h1>
        <hr color="red">


        <!-- template不显示 -->
        <template v-if="n===1">
            <h1>HTML1</h1>
            <h1>CSS2</h1>
            <h1>JS3</h1>
            <h1>Vue4</h1>        
        </template>
    </div>
</body>

<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
    const vm = new Vue({         //el指定Vue为哪个容器服务
    el: "#root",
    data: {       //data数据供el指定的容器使用
        name:"上官",
        isHidden:true,
        n:0,
    },
    methods:{
        change()
        {
            this.isHidden = !this.isHidden;
        },
        add()
        {
            this.n++;
        }
    }
});
</script>

</html>

12.列表渲染

12.1基本列表

在这里插入图片描述

<!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">
    <script type="text/javascript" src="/js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root">
        <!-- 遍历数组 -->
        <ol>
            <!-- 记得给每一个Li确定唯一的id -->
            <li v-for="(p,index) in persons" :key="p.id">
                {{p.name}}---{{p.age}}---{{p.id}}
            </li>
        </ol>



        <!-- 对象 -->
        <ul>
            <!-- :key="k"意思:[:]用来解释k的来源是data -->
            <li v-for="(value,k) in cars" :key="k">
                {{k}}:{{value}}
            </li>
        </ul>

        <!-- 字符串 -->
        <ul>
            <li v-for="(ch,index) in str" :key="index">
                {{ch}}:{{index}}
            </li>
        </ul>
        
        <!-- 遍历次数 -->
        <ul>
            <li v-for="(num,index) in 5" :key="index">
                {{num}}:{{index}}
            </li>
        </ul>

     </div>
</body>

<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
    const vm = new Vue({         //el指定Vue为哪个容器服务
    el: "#root",
    data: {       //data数据供el指定的容器使用
        persons:[
            {id:"001",name:"张三",age:"18"},
            {id:"002",name:"李四",age:"19"},
            {id:"003",name:"王五",age:"20"},
        ],
        cars:{
            name:"奥迪A6",
            price:"56w",
            color:"red",
            address:"河南",
        },
        str:"hello",


    },
    methods:{

    }
});
</script>

</html>

在这里插入图片描述

12.2key作用与原理

index作为key

在这里插入图片描述

id作为key

在这里插入图片描述

总结

在这里插入图片描述
在这里插入图片描述

12.2.1index

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

12.2.2id

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

12.3列表过滤[类似搜索功能]

computed&&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">
    <script type="text/javascript" src="/js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root">
        <input type="text" placeholder="输入查询的名字:" v-model="checkname">
        <ul>
            <li v-for="(p,index) in filpersons" :key="p.id">
                {{p.name}}---{{p.age}}---{{p.sex}}
            </li>
        </ul>
     </div>
</body>

<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
    const vm = new Vue({         //el指定Vue为哪个容器服务
    el: "#root",
    data: {       //data数据供el指定的容器使用
        checkname:"",
        persons:[
            {id:"001",name:"马冬梅",age:"18",sex:"女"},
            {id:"002",name:"周冬雨",age:"19",sex:"女"},
            {id:"003",name:"周杰伦",age:"20",sex:"男"},
            {id:"004",name:"温兆伦",age:"21",sex:"男"},
        ],
        //使用watch实现时才用到 
        // filpersons:[],
    },
    computed:{
        filpersons()
        {
            return this.persons.filter((p)=>{
                 return p.name.indexOf(this.checkname) !== -1;
                });
        }
    },

    // watch:{
    //     checkname:{
    //         immediate:true,
    //         handler(newval)
    //         {
                // this.filpersons = this.persons.filter((p)=>{
                //     return p.name.indexOf(newval) !== -1;
                // });
    //         }
    //     }
    // },
    methods:{

    }
});
</script>

</html>

12.4 列表排序

<!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">
    <script type="text/javascript" src="/js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root">
        <input type="text" placeholder="输入查询的名字:" v-model="checkname"><br>
        <button @click="sort_type = 0">原序</button><br>
        <button @click="sort_type = 1">升序</button><br>
        <button @click="sort_type = 2">降序</button><br>
        
        <ul> 
            <li v-for="(p,index) in filpersons" :key="p.id">
                {{p.name}}---{{p.age}}---{{p.sex}}
            </li>
        </ul>
     </div>
</body>

<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
    const vm = new Vue({         //el指定Vue为哪个容器服务
    el: "#root",
    data: {       //data数据供el指定的容器使用
        checkname:"",
        sort_type:0,//0原,1升序,2降序
        persons:[
            {id:"001",name:"马冬梅",age:18,sex:"女"},
            {id:"002",name:"周冬雨",age:68,sex:"女"},
            {id:"003",name:"周杰伦",age:38,sex:"男"},
            {id:"004",name:"温兆伦",age:8,sex:"男"},
        ],
        //使用watch实现时才用到 
        // filpersons:[],
    },
    computed:{
        filpersons()
        {
            const arr =  this.persons.filter((p)=>{
                 return p.name.indexOf(this.checkname) !== -1;
                });

            if(this.sort_type)
            {
                arr.sort((p1,p2)=>
                {
                    if(this.sort_type===1)return p1.age - p2.age;
                    else return p2.age - p1.age;
                });
            }    

            return arr; 
        }
    },

    // watch:{
    //     checkname:{
    //         immediate:true,
    //         handler(newval)
    //         {
                // this.filpersons = this.persons.filter((p)=>{
                //     return p.name.indexOf(newval) !== -1;
                // });
    //         }
    //     }
    // },
    methods:{

    }
});
</script>

</html>

12.5 数据监测总结(数组,对象-添加，修改等等)

在这里插入图片描述
在这里插入图片描述

<!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">
    <script type="text/javascript" src="/js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root">
        <h1>学生信息：</h1>
        <button @click="student.age++">年龄++</button><br>
        <button @click="addSex">添加student的属性sex,默认男</button><br>
        <button @click=" student.sex='未知' ">修改student的属性sex,未知</button><br>
        <button @click="addFriend">添加一个朋友</button>
        <button @click="modifyFirstname">修改为张三</button>
        <button @click="addHobby">添加一个爱好:学习</button>
        <button @click="modifyFirsthobby">修改第一个爱好：开车</button>
        <h1>姓名:{{student.name}}</h1>
        <h1>年龄:{{student.age}}</h1>
        <h1 v-show="student.sex">性别：{{student.sex}}</h1>
        <!-- <> -->
        <hr height="5px" color="red">
        <h1>爱好：</h1>
        <ul>
            <li v-for="(h,index) in student.hobby" :key="index">
                {{h}}
            </li>
            
        </ul>
        <hr height="5px" color="red">
        <h1>朋友：</h1>
        <ul> 
            <li v-for="(p,index) in student.friends" :key="p.id">
                {{p.name}}---{{p.age}}
            </li>
        </ul>
     </div>
</body>

<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
    const vm = new Vue({         //el指定Vue为哪个容器服务
    el: "#root",
    data: {     
        //data数据供el指定的容器使用
        student:{
            name:"dyh",
            age:"20",
            hobby:["抽烟","喝酒","烫头"],
            friends:[
            {name:"F2",age:"18"},
            {name:"F3",age:"19"},
            ]
        }
      },
    methods:{
        addSex()
        {
            //#Case1
            // Vue.set(this.student,"sex","男");
            //#Case2
            this.$set(this.student,"sex","男");
        },
        addFriend()
        {
            //重点
            this.student.friends.unshift({name:"F1",age:"20"});
        },
        modifyFirstname()
        {
            console.log("@@@")
            //对象赋值不可以[无set]，对象属性赋值可以[有set]
            //错误方法
            // this.student.friends[0] = {name:"张三",age:"20"};
            this.student.friends[0].name = "张三";   
        },
        addHobby()
        {
            this.student.hobby.push("学习");
        },
        modifyFirsthobby()
        {
            console.log("@@@");
            //错误
            // this.hobby[0]="开车";


            //正确
            //#Case1
            // this.student.hobby.splice(0,1,"开车");
            //#Case2
            // Vue.set(this.student.hobby,0,"开车");
            //#Case3
            this.$set(this.student.hobby,0,"开车");
        }
        

    }
}); 
// 添加对象属性,修改对象的属性值 Vue.set()
// 添加数组元素,修改数组元素  push,splice..
</script>

</html>

13.收集表单数据

在这里插入图片描述
一般做法：绑定label元素
在这里插入图片描述
text做法
在这里插入图片描述
radio
在这里插入图片描述
checkbox
在这里插入图片描述

select&&option
在这里插入图片描述

<!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">
    <script type="text/javascript" src="/js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root">

        <form @submit.prevent="demo">
        <!-- 
        <label for="demo">账户</label>
        <input type="text" id="demo">
         -->
        
        账户：<input type="text" v-model.trim="Info.account" placeholder="账户名称"><br>
        密码：<input type="password" v-model="Info.passsword" placeholder="账户密码"><br>
        <!-- type="number"[控制输入数字]           v-model.number="Info.age"[控制输入字符串转换到number] -->
        年龄:<input type="number" v-model.number="Info.age" placeholder="年龄">    



        性别：
        <!-- name="sex"代表只能选一个 -->
        男:<input type="radio" name="sex" value="男" v-model="Info.sex">
        女:<input type="radio" name="sex" value="女" v-model="Info.sex">
        <br>




        爱好：
        学习：<input type="checkbox" v-model="Info.hobby" value="study">
        游戏：<input type="checkbox" v-model="Info.hobby" value="games">
        吃饭：<input type="checkbox" v-model="Info.hobby" value="eat">
        <br>

        <!-- 下拉框 -->
        选择校区：
        <select v-model="Info.city">
            <!-- 默认显示 -->
            <option value="">所属校区</option>
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="wuhan">武汉</option>
        </select>
        <br>
        
        
        提交信息：
        <textarea v-model.lazy="Info.other"></textarea>
        <br>

        <input type="checkbox" v-model="Info.agree"></input>阅读并接受<a href="http://www.baidu.com" target="_blank">《用户协议》</a>

        <br>
        <!-- 点击后默认刷新 -->
        <button>提交</button>
    </form>
        <!-- <button>提交</button> -->
    </div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
    new Vue({         //el指定Vue为哪个容器服务
    el: "#root",
    data: {       //data数据供el指定的容器使用
        Info:{
           account:"",
            passsword:"",
            age:"",
            sex:"男",
            hobby:[],
            city:"beijing",
            other:"",
            agree:"",
        }
    },
    methods: {
        demo()
        {
            console.log(JSON.stringify(this.Info))
        }
    }
  });
</script>

</html>

14.过滤器

在这里插入图片描述

<!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">
    <script type="text/javascript" src="/js/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.2/dayjs.min.js"></script>
    <title>Document</title>
    <style>
        .span
        {
            color: blue;
        }
    </style>
</head>
<body>
    <div id="root">
        <!-- <span class="span">计算属性</span> -->
        <h5>时间戳：{{time}}</h5>
        <h5>计算属性：{{fmtTime}}</h5>
        <h5>methods实现:{{getfmtTime()}}</h5>
        <h5>过滤器实现1(wucan):{{time | filterTime}}</h5>
        <!-- <h5>过滤器实现:{{time | filterTime()}}</h5> -->
        <h5>过滤器实现2(youcan):{{time | filterTime("YYYY-MM-DD") | cut()}}</h5>
    </div>
</body>

<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
//全局过滤器【多个vue实例可以使用】
Vue.filter("cut",function(value){
    return value.slice(0,4);
})
    const vm = new Vue({         //el指定Vue为哪个容器服务
    el: "#root",
    data: {       //data数据供el指定的容器使用
        time:1654049431800,
    },
    methods:{
        getfmtTime()
        {
            return dayjs(this.time).format("YYYY年MM月DD日 HH:mm:ss");
        }
    },
    computed:
    {
        fmtTime()
        {
            // dayjs(this.time).format("YYYY-MM-DD HH:mm:ss")------->返回time的格式化
            // dayjs().format("YYYY-MM-DD HH:mm:ss")---------------->返回当前时间
            return dayjs(this.time).format("YYYY-MM-DD HH:mm:ss");

        }
    },
    filters:
    {
        //1.不传参数 2.调用方法     "time | filterTime" 或者 "time | filterTime()"
        // filterTime(value)
        // {
        //     return dayjs(value).format("YYYY-MM-DD HH:mm:ss");
        // }
        
        //1.实现传参 2.调用方法     "time | filterTime("YYYY-MM-DD")"
        filterTime(value,str="YYYY-MM-DD HH:mm:ss")//输入str，按照str方式，不输入str,按照=之后的方式
        {
            return dayjs(value).format(str);
        },
        //只有本vue实例可以使用
        // cut(value)
        // {
        //     return value.slice(0,4);
        // }
    }   
});
</script>

</html>

15.内置指令

15.1v-text(类似{{}}插值语法)

在这里插入图片描述

<!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">
    <script type="text/javascript" src="/js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root">
        <h1>{{name}}河南</h1>
        <h1 v-text="name">河南</h1>
    </div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
    new Vue({         //el指定Vue为哪个容器服务
    el: "#root",
    data: {       //data数据供el指定的容器使用
        name: "你好",
    },
  });
</script>
</html>

在这里插入图片描述

15.2v-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">
    <script type="text/javascript" src="/js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root">
        <div>你好,{{name}}</div>
        <div v-html="str">喝可乐咯</div>
    </div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
    new Vue({         //el指定Vue为哪个容器服务
    el: "#root",
    data: {       //data数据供el指定的容器使用
        name: "杜沿河",
        str:"<h1>天机</h1>",
    },
  });
</script>
</html>

在这里插入图片描述

15.3v-cloak

在这里插入图片描述
在这里插入图片描述

15.4v-once(初始化的数值)

在这里插入图片描述

<!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">
    <script type="text/javascript" src="/js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root">
        <h1 v-once>初始:{{n}}</h1>
        <h1>目前：{{n}}</h1>
        <button @click="n++">点击加一</button>
    </div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
    new Vue({         //el指定Vue为哪个容器服务
    el: "#root",
    data: {       //data数据供el指定的容器使用
        n:1
    },
  });
</script>
</html>

15.5v-pre

在这里插入图片描述

<!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">
    <script type="text/javascript" src="/js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root">
        <h1 v-pre>hello world</h1>
        <h1 v-pre>目前：{{n}}</h1>
        <button v-pre @click="n++">点击加一</button>
    </div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
    new Vue({         //el指定Vue为哪个容器服务
    el: "#root",
    data: {       //data数据供el指定的容器使用
        n:1
    },
  });
</script>
</html>

在这里插入图片描述

16.自定义指令

16.1函数式

big函数何时会调用?
1.一开始，加载页面
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">
    <script type="text/javascript" src="/js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root">
        <h1>当前值：<span v-text="n"></span></h1>
        <h1>放大10倍后:<span v-big="n"></span></h1>
        <button @click="n++">n++</button>
    </div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
    new Vue({         //el指定Vue为哪个容器服务
    el: "#root",
    data: {       //data数据供el指定的容器使用
        name: "你好",
        n:1,
    },
    directives:{
        big(eliment,binding)
        {
            // big函数何时会调用，1.一开始，加载页面  2.指令所在模板重新解析时（模板内容改变时）
            eliment.innerHTML = binding.value*10;
            console.log(eliment)
            console.log(binding)
        }
    }
  });
</script>
</html>

16.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">
    <script type="text/javascript" src="/js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root">
        <h1>当前值：<span v-text="n"></span></h1>
        <h1>放大10倍后:<span v-big="n"></span></h1>
        <button @click="n++">n++</button>
        <hr>
        <input type="text" v-fbind:value="n">
    </div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
//@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@对象式【全局】@@@@@@@@@@@@@@@@@@@@@@@@@@@@
// Vue.directive("fbind",{
//             //绑定
//             //指定与元素成功绑定
//             bind(eliment,binding)
//             {
//                 // console.log("bind");
//                 //绑定时 focus()没有用
//                 eliment.value = binding.value;
//             },
//             //呈现
//             //指令所在元素被插入页面时
//             inserted(eliment,binding)
//             {
//                 // console.log("inserted");
//                 eliment.focus();//呈现到页面上才会有效果
//             },
//             //更新
//             //指令所在模板被重新解析时
//             update(eliment,binding)
//             {
//                 // console.log("update");
//                 eliment.value = binding.value;
//             }
//         })

// Vue.directive("fbind",function(eliment,binding)
//         {
//             console.log("@@@@@@@@");
//             eliment.value = binding.value;
//             eliment.focus();
//         })



    new Vue({         //el指定Vue为哪个容器服务
    el: "#root",
    data: {       //data数据供el指定的容器使用
        name: "你好",
        n:1,
    },
 
    directives:{
        big(eliment,binding)
        {
            // big函数何时会调用，1.一开始，加载页面  2.指令所在模板重新解析时（模板内容改变时）
            eliment.innerHTML = binding.value*10;
        },    
        
        //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@对象式【局部】@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
        fbind:{
            //绑定
            //指定与元素成功绑定
            bind(eliment,binding)
            {
                // console.log("bind");
                //绑定时 focus()没有用
                eliment.value = binding.value;
            },
            //呈现
            //指令所在元素被插入页面时
            inserted(eliment,binding)
            {
                // console.log("inserted");
                eliment.focus();//呈现到页面上才会有效果
            },
            //更新
            //指令所在模板被重新解析时
            update(eliment,binding)
            {
                // console.log("update");
                eliment.value = binding.value;
            }

        },


        //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@函数式【局部】@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
        // fbind(eliment,binding)
        // {
        //     console.log("@@@@@@@@");
        //     eliment.value = binding.value;
        //     eliment.focus();
        // }
    }
    
  });
</script>
</html>

17.生命周期

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

<title>分析生命周期</title>
	<script type="text/javascript" src="../js/vue.js"></script>

	<div id="root" :x="n">
		<h2 v-text="n"></h2>
		<h2>当前的n值是：{{ n }}</h2>
		<button @click="add">点我n+1</button>
		<button @click="bye">点我销毁vm</button>
	</div>

<script type="text/javascript">
	Vue.config.productionTip = false

	new Vue({
		el: '#root',
		// template:`
		// 	<div>
		// 		<h2>当前的n值是：{{n}}</h2>
		// 		<button @click="add">点我n+1</button>
		// 	</div>
		// `,
		data: {
			n: 1
		},
		methods: {
			add() { console.log('add')
				this.n++
			},
			bye() {
				console.log('bye')
				this.$destroy()
			}
		},
		watch: {
			n() {
				console.log('n变了')
			}
		},
		beforeCreate() {console.log('beforeCreate')},
		created() {console.log('created')},
		beforeMount() {console.log('beforeMount')},
		mounted() {console.log('mounted')},
		beforeUpdate() {console.log('beforeUpdate')},
		updated() {console.log('updated')},
		beforeDestroy() {console.log('beforeDestroy')},
		destroyed() {console.log('destroyed')},
	})
</script>

初始
在这里插入图片描述
点我n+1
在这里插入图片描述
点我销毁vm
在这里插入图片描述

18.非单文件组件

18.1基本使用

在这里插入图片描述

<!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">
    <script type="text/javascript" src="/js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root1">
        <!-- 3.编写标签 -->
        <sl></sl>
        <hr>
        <he></he>
        <!-- 不能用 -->
        <!-- <st></st> -->
    </div>
    <hr>
    <div id="root2">
        <!-- 不能用 -->
        <!-- <sl></sl> -->
        <he></he>
        <hr>
        <st></st>
    </div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息

//1.创建组件
const school = Vue.extend({
    template:`
        <div>
            <h1>学校名称：{{name}}</h1>
            <h1>学校地址：{{address}}</h1>
        </div>
    `,
    data()
    {
        return {
            name:"河南中医药大学",
            address:"郑州",
        }
    }
}) 
const student = Vue.extend({
    template:`
        <div>
            <h1>学生姓名：{{name}}</h1>
            <h1>学生年龄：{{age}}</h1>
        </div>
    `,
    data()
    {
        return {
            name:"张三",
            age:18,
        }
    }
})
const hello = Vue.extend({
    template:`
    <div>
        <h1>Hello,{{name}}</h1>
    </div>
    `,
    data(){
        return {
            name:"Tom",
        }
    }
})

//@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@     全局设置      @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
Vue.component("he",hello)//直接使用



//@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@     局部设置      @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
new Vue({
    el: "#root1",
    //2.注册组件
    components:{
        sl:school,
    }
  });

new Vue({
    el: "#root2",
    //2.注册组件
    components:{
        st:student,
    }
});  
</script>
</html>

18.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">
    <script type="text/javascript" src="/js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root1">
        <sl></sl>
        <hr>
        <sl/>
        <!-- 简写 -->
    </div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息

// const school = Vue.extend({
//     name: 'duyanhe',
//     template:`
//         <div>
//             <h1>学校名称：{{name}}</h1>
//             <h1>学校地址：{{address}}</h1>
//         </div>
//     `,
//     data()
//     {
//         return {
//             name:"河南中医药大学",
//             address:"郑州",
//         }
//     }
// })

// @@@@@@@@@@@@@@@@@@@@@@@@@@    简写    @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
const school = {
    name: 'duyanhe',//Vue开发工具体现的名称
    template:`
        <div>
            <h1>学校名称：{{name}}</h1>
            <h1>学校地址：{{address}}</h1>
        </div>
    `,
    data()
    {
        return {
            name:"河南中医药大学",
            address:"郑州",
        }
    }
}
new Vue({
    el: "#root1",
    components:{
        sl:school,
        //school            School
        //'my-school'       MySchool
    }
  });
  
</script>
</html>

18.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">
    <script type="text/javascript" src="/js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root1">
        <school></school>
        <student></student>
    </div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息

const hello = Vue.extend({
    template:`
        <h1>你好,{{name}}</h1>
    `,
    data(){
        return {
            name:"dyh",
        }
    }
})

const school = Vue.extend({
    template:`
        <div>
            <h1>学校名称：{{name}}</h1>
            <h1>学校地址：{{address}}</h1>
            <hello></hello>
        </div>
    `,
    data()
    {
        return {
            name:"河南中医药大学",
            address:"郑州",
        }
    },
    // 嵌套关键
    components:{
        hello
    }
})

const student = Vue.extend({
    template:`
        <div>
            <h1>学生姓名：{{name}}</h1>
            <h1>学生年龄：{{age}}</h1>
        </div>
    `,
    data()
    {
        return {
            name:"张三",
            age:18,
        }
    }
})

new Vue({
    el: "#root1",
    components:{
        school,
        student,
    }
});
  
</script>
</html>

18.4 VueComponent函数

在这里插入图片描述

18.5 一个重要的内置函数

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

19.单文件组件(略)

enumerable可枚举的

阿斯卡码
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
Vue学习
TONKIA的技术博客
01-10 408
一、Webpack安装
前端小白如何快速上手Vue框架(上篇)
热门推荐
Logbook的博客
03-05 13万+
前言: 我之前没有接触过任何前端知识,连基本的HTML语法,css,js的基础知识都不懂,再刚接手vue的时候也是一个头两个大. 然后当然先查vue官方文档,官网会有如下提示: 然后如果你按照提示开始按部就班的看html,css,js然后再回来学习Vue的话,你可能已经被OUT了(况且周期过长,着实不推荐).直接着手一个项目是进步最快的方式,何况还有度娘和Google保驾护航. 推荐vue学习文...
MVC和MVVM区别
qq_40007317的博客
06-09 1万+
1、MVC MVC是一种设计模式： M（Model）：模型层。是应用程序中用于处理应用程序数据逻辑的部分，模型对象负责在数据库中存取数据； V（View）：视图层。是应用程序中处理数据显示的部分，视图是依据模型数据创建的； C（Controller）：控制层。是应用程序中处理用户交互的部分，控制器接受用户的输入并调用模型和视图去完成用户的需求，控制器本身不输出任何东西和做任何处理。它只是接收请求并决定调用哪个模型构件去处理请求，然后再确定用哪个视图来显示返回的数据。 2、MVVM vue框
Vue的学习 —— ＜vue的开发环境＞ “6000字超详细”
2301_78038072的博客
05-13 894
在开始编写Vue应用程序之前，搭建一个合适的开发环境至关重要。本章节将详细指导如何设置和配置Vue的开发环境，确保有一个稳定、高效的工作空间。从安装Node.js开始，因为Vue.js项目需要Node.js来执行构建和打包过程。然后，我们会介绍如何使用Vue CLI（命令行界面）以及Vite创建新的Vue项目，包括一些常见的选项和配置。在创建项目之后，继续探索如何安装和管理项目依赖，以及如何设置开发服务器以便实时预览应用程序。
Vue Vue介绍、Vue基础语法、Vue生命周期、axios的使用
weixin_44504809的博客
05-20 1万+
Vue Vue介绍、Vue基础语法、Vue生命周期、axios的使用
Vue简介
橘猫吃不胖的博客
03-17 5364
Vue简介1 概述2 Vue热加载3 Vue的双向数据绑定的原理 1 概述 Vue.js 可以说是MVVM架构的最佳实践，是一个JavaScript MVVM库，是一套构建用户界面的渐进式框架。专注于 MVVM 中的 ViewModel，不仅做到了数据双向绑定，而且也是一款相对比较轻量级的JS 库，API 简洁。 Vue用于构建用户界面的渐进式框架，渐进式代表的含义是：主张最少。每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中
Vue - 快速入门，这一套就够了！（Vue core + 案例 + 效果演示）
CYK_byte的博客
10-16 8163
前置条件：掌握 HTML、CSS、JavaScript、AJAX.工具：VsCode.插件：Live Server（浏览器实时预览）Ps：建议都提前下载下来，没网的时候也能用.
基于Vue和JavaScript的在线学习&考试平台设计源码
最新发布
05-27
本设计源码提供了一个基于Vue和JavaScript的在线学习&考试平台，包含221个文件，其中包括66张png图片，59个vue组件文件，41个js脚本文件，17个scss样式文件，15个json数据文件，11个md文档，2张jpg图片，以及2个css...
vue使用axios实现文件上传进度的实时更新详解
08-28
最近在学习axios，然后项目就用到了，所以这篇文章主要给大家介绍了关于vue中利用axios实现文件上传进度的实时更新的相关资料，文中先对axios进行了简单的介绍，方法大家理解学习，需要的朋友们下面随着小编来一起...
一个基于C#、Sqlserver、Vue搭建的在线学习考试系统
04-07
“直播”可以在线互动，“录播”可以时实记录学习进度 试题同步练习 支持批量导入，手机随时随地刷题，时实记录练习成果和进度 在线考试 千人同考，断电、死机不丢题 分享、分润、分销 学员分享，多级裂变，...
第1章 搭建Vue3开发环境
11-29
在本章中，我们将学习如何搭建Vue3开发环境，包括安装Node.js、WebStorm和Vue DevTools的详细步骤。 1.1 安装Node.js Node.js是一个基于Chrome V8引擎的JavaScript运行环境，简单地说就是运行在服务端的JavaScript...
移动开发，Vue学习，相信我的资源就相信你的未来
09-23
会一直更新这个项目进度
Vue篇(超详细讲解)
2301_77112535的博客
12-14 5008
Vue:一套用于构建用户界面的渐进式JavaScript框架渐进式: vue可以自底向上逐层的应用如果应用很简单:只需要一个轻量小巧的核心库如果应用很负责:可以引用各式各样的Vue插件1、采用组件化模式,提高代码复用率,且让代码更好维护。2、声明式编码,让编码人员无需直接操作DOM,体高开发效率、3、使用虚拟DOM+优秀的Diff算法,尽量复用DOM节点。1、Vue的操作命令 启动.Vue 去你对应的包里 直接 yarn serve2、首先先需要检测自己是否安装了yarn 命令。
vue基础详解（全）
梁婉玲krysliang的博客
02-14 1万+
一，VUE的核心 1.数据驱动（mvvm模型，只要改变model的数据，视图层就会自动更新） 2.视图组件： 把整一个网页的拆分成一个个区块，每个区块我们可以看作成一个组件。网页由多个组件拼接或者嵌套组成。 二，使用vue 1.引入vue之后就可以进行下面的步骤 2.创建语法（创建 ，设置数据，挂载，渲染） var vm = new Vue（{}）//参数是一个对象 三、定义...
Vue基础知识总结 1：Vue入门
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
初识Vue
Floatwor青舟的博客
10-30 1289
目录为什么学习流行框架框架和库的区别Vue.js简介安装第一个简单实例一些常用指令跑马灯小案例 为什么学习流行框架 企业中为了提高开发效率：在企业中，时间就是效率，效率就是金钱。 提高开发效率的发展历史：原生JS–>Jquery之类的类库–>前端模板引擎–>Angular.js/Vue.js等（能够帮助我们减少不必要的DOM操作，提高渲染效率。通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了） 在Vue中，一个核心的概念就是，让用户不再操作DOM元
什么是 vue？超简单基础入门
黑马程序员官方博客
01-03 4583
构建用户界面用 vue 往 html 页面中填充数据，非常的方便框架框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！要学习 vue，就是在学习 vue 框架中规定的用法！vue 的指令、组件（是对 UI 结构的复用）、路由、Vuex、vue 组件库只有把上面老师罗列的内容掌握以后，才有开发 vue 项目的能力！
Vue基础——VueJS是什么、Vue的优缺点、vue2和vue3的模板区别、MVVM数据双向绑定、Vue的安装和使用、Vue模板语法-文本渲染、常用的vue的指令
ranran0306的博客
06-27 8095
Vue基础——VueJS是什么、Vue的优缺点、vue2和vue3的模板区别、MVVM数据双向绑定、Vue的安装和使用、Vue模板语法-文本渲染、常用的vue的指令
如何最快速度学习vue
07-13
学习 Vue 的速度取决于你的学习方法和个人的学习进度。以下是一些建议，帮助你以最快的速度学习 Vue： 1. 学习基础知识：首先，了解 Vue 的基础知识，包括 Vue 的核心概念、指令、组件等。可以通过官方文档、在线...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿斯卡码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值