Vue

钟佩颖

已于 2024-08-04 20:20:44 修改

阅读量200

点赞数 3

文章标签： vue.js javascript 前端前端框架

于 2024-08-01 21:09:36 首次发布

本文链接：https://blog.csdn.net/weixin_63627378/article/details/140835269

版权

Vue是什么

Vue特点

初始Vue小案例并分析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<body>

    <div id="root">
        <h1>Hello,{{name.toUpperCase()}},{{address}}</h1>
    </div>
    <!-- <div id="root">
        <h1>Hello,{{address}}</h1></h1>
    </div> -->
    <script>
        // 总结：
        // 1.想让vue工作就必须创建一个vue实例，且要传入一个配置对象
        // 2.root容器里面的代码依然符合html规范，只不过混入了一些特殊的vue语法
        // 3.root容器里面的代码被称为vue模版
        // 4.Vue实例适合容器一一对应的
        // 5.真实开发中只有一个vue实例，并且会配合组件使用
        // 6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
        // 7.一旦data中的数据发生改变，那么模版中用到该数据的地方也会自动更新

        // 注意区分：js表达式和js代码（语句）
        //         表达式：一个表达式会生成一个值，可以放在任何一个需要值的地方
        //                 eg：a
        //                 eg：a+b
        //                 eg：demo（1）
        //         js代码：
        //                 eg：if(a>0){}
        //                 eg：for（）

        Vue.config.productionTip = false;
        Vue.config.devtools = true
        new Vue({
            el:'#root',//el用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串
            // el:document.getElementById('root')
            data:{
                name:'zhangsan',
                address:'hahahha'      
            }
        })
        // new Vue({
        //     el:'#root',//el用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串
        //     // el:document.getElementById('root')
        //     data:{
        //         address:'haha'           
        //     }
        // })



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

模版语法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>
<!-- 
        模版语法两大类：
        1.插值语法：功能：用于解析标签中普通文本内容
        写法：{{xxx}}  xxx是js表达式，且可以直接读取到data中的所有属性
        
        2.指令语法：功能：解析标签，为标签添加动态效果（包括标签属性，标签内容，绑定事件....）
        举例：v-bind：href="xxx"或者简写成：href="xxx"   xxx同样是要写js表达式
        备注：Vue中有很多指令且指令都是v-??? -->

<body>
    <div id="root">
        <h1>插值语法</h1>
        <h3>你好，{{name}}</h3>
        <h1>指令语法</h1>
        <a v-bind:href="url">点我去学习</a>

    </div>
</body>
<script>
    Vue.config.productionTip = false;
    new Vue({
        el:"#root",
        data:{
            name:"jack",
            url:"http://www.baidu.com"
       
        }

        
    })
</script>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>
<body>
<!-- 
    vue中有两种数据绑定的方式
    单向绑定：v-bind   数据只能从data流向页面
    双向绑定：v-model  数据不仅能从data流向页面，还可以从页面流向data
    备注：双向绑定一般都应用于表单类元素上，如input  select
        v-model：value可以简写成v-model，因为v-model默认收集的就是value值 -->
        <div class="root">
        单项数据绑定：<input type="" :value="name">
        双项数据绑定：<input type="" v-model:value="name">
        双项数据绑定：<input type="" v-model="name">

    
     <!-- v-model只能应用在表单类元素上（输入类元素上） -->
     <h2 v-model:x="name">你好</h2>

   
    </div>

    
</body>

<script>
    new Vue({
        el:".root",
        data:{
            name:"张三"
        }
    })

</script>
</html>

el和data的两种写法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<!-- data和el的两种写法
el：
    1.   .new Vue的时候配置el的属性
    2.   先创建Vue实例，随后再通过vm.$mount('#root')手动指定容器元素
data：
    1.   对象式
    2.   函数式
    学到组件时，data必须是函数式，不然报错
重要原则：
有vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this指向会变成window，就不再是vue实例对象了 -->

</head>

<body>
    <div id="root">{{name}}</div>

</body>
<script>
    new Vue({
        el: '#root',
        // data: {
        //     name: '张三',     第一种： 对象式
        //     age: 18
        // }
        data:function(){
            console.log(this);  //此处的this是vue实例对象，箭头函数式this是window，箭头函数没有this，所以是windows
            return{             //第二种：函数式
                age:18,               
                name:"张三三",        
            }
        }
    })

    // let a = new Vue({
    //     // el:'#root', 第一种写法
    //     data: {
    //         name: '张三',
    //         age: 18
    //     }
    // })

    // a.$mount('#root') //第二种写法
    // // setInterval(() => {
    // //     a.$mount('#root')

    // // }, 1000)

</script>

</html>

MVVM模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
        M:模型Model data中的数据
        V：视图View 模版代码
        VM：视图模型viewModel  Vue实例
        观察发现：
        data中所有的属性最后都会出现在vm身上
        vm身上的所有属性及vue原形上的所有属性，在vue模版中都可以直接使用



    <div id="root">
        <h1>{{name}}</h1>
        <h1>{{age}}</h1>
    </div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
            name:"zhangsan",
            age:18
        }


    })
</script>
</html>

回顾Object.defineProperty方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>


    <script>
            let number=19

            let person={
            name:"张三",
            sex:"男",
            // age:18
        }

        Object.defineProperty(person,"age",{
            // value:19,
            // enumerable:true, //控制属性是否可以被枚举，默认是false
            // writable:true,   //控制属性是否可以被修改，默认是false
            // configurable:true //控制属性是否可以被删除，默认是false

            get:function(){//当有人读取person的age属性时，get函数（getter）就会被调用，且返回值就是age的值
                return number
            },

            set(value){
                console.log("有人修改了age属性了"); //没有改变peson的age值

                number = value  //这次修改了person的值

            }
           
        })
        console.log(Object.keys(person));
        console.log(person);
    </script>
    
</body>
</html>

数据代理

事件处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    
    <div id="root">
        <H1>欢迎，{{name}}</H1>
        <button v-on:click="showinfo1">点我提示信息1</button>
        <button @click="showinfo2(66,$event)">点我提示信息2</button>

    </div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
            name:"at"
        },
        methods:{
            showinfo1(event){
                // alert("hello");
                console.log(event.target);
                // alert(event.target.innerHTML);
            },
            showinfo2(a,b){
                console.log(a,b);
                console.log(b.target);
                // console.log(b.target.innerHTML);
            }
        }
    })
</script>
</html>

事件修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <style>
        .demo1{
            background-color: aqua;
            height: 100px;
        }
        #haha{
            background-color: rgb(0, 255, 76);
            

            
           
        }
    </style>
</head>
<body>
    
    <div id="root">
        <H1>欢迎，{{name}}</H1>
        <!-- <button v-on:click="showinfo1">点我提示信息1</button>
        <button @click="showinfo2(66,$event)">点我提示信息2</button> -->
        <a href="https:www.baidu.com" @click.prevent="show">链接</a>
        <div class="demo1" @click="showinfo">
            <button id="haha"   @click.stop="showinfo">点我提示信息</button>
        </div>

    </div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
            name:"at"
        },
        methods:{
            show(event){
                alert("hello");
                // console.log(event.target);
                // alert(event.target.innerHTML);
            },
            showinfo(event){
                alert("button");
                // console.log(event.target);
                // alert(event.target.innerHTML);
            },
          
        }
    })
</script>
</html>

键盘事件

计算属性

插值语法或者methods实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

</head>
<body>
    <div class="root">
        姓：<input type="text" v-model:value="fname">
        名：<input type="text" v-model:value="lname">
        <br>
        姓名：<span>{{fname.slice(0,3)+lname}}</span>
        <br>
        姓名：<span>{{fname}} {{lname}}</span>
        <br>
        xm:<span>{{fullname()}}</span>
    </div>
    
    <script>
            new Vue({
                el:".root",
                data:{
                    fname:"zhang",
                    lname:"san"
                },
                methods:{
                    fullname(){
                       console.log(this);
                        return this.fname+" "+this.lname
                    }
                }
            })

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

computed实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

</head>
<body>
    <div class="root">
        姓：<input type="text" v-model:value="fname">
        名：<input type="text" v-model:value="lname">
        <br>
        <!-- 姓名：<span>{{fname.slice(0,3)+lname}}</span>
        <br>
        姓名：<span>{{fname}} {{lname}}</span> -->
        <br>
        <!-- xm:<span>{{fullname}}</span><br>
        xm:<span>{{fullname}}</span><br> -->
        xm:<input type="text" v-model:value="fullname">

    </div>
    
    <script>
           const vm= new Vue({
                el:".root",
                data:{
                    fname:"zhang",
                    lname:"san"
                },
                computed:{
                    fullname(){
                        return this.fname+" "+this.lname
                    }
                //     fullname:{
                //         // get有什么作用？当有人读取fullname的时候，会自动调用get方法，且返回值就作为fullname的值
                //         // 多次调用只返回一次，有缓存
                //         // get什么时候调用？
                //         // 1.第一次读取fullname的时候
                //         // 2.当fullname所依赖的数据发生变化
                //         // 自动调用的get方法，不是用户调用的，例如fullname.get（）是错误的
                //         get(){
                //             console.log("hahahh");
                //             console.log(this);  //此处的this是Vue实例
                //             return this.fname+" "+this.lname
                //         },
                //         set(value){
                //             const arr=value.split("-")
                //             this.fname=arr[0]
                //             this.lname=arr[1]
                //         }
                //     }
                }
               
            })

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

天气案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width='device-width', initial-scale=1.0">
    <title>Document</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div class="root">
        <h1>今天天气很{{info}}</h1>
        <br>
        <button @click="change()">change</button>
    </div>
    
</body>
<script>
    new Vue({
        el:".root",
        data:{
            weather:false
        },
        computed:{
            info:{
                get(){
                    return this.weather?"晴":"阴"
                }
            }
        },
        methods: {
            change(){
                this.weather=!this.weather
            }
        },
       
    })
</script>
</html>

监视属性

形式1：

形式2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width='device-width', initial-scale=1.0">
    <title>Document</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div class="root">
        <h1>今天天气很{{info}}</h1>
        <br>
        <button @click="change()">change</button>
    </div>
    
</body>
<script>
    let vm=new Vue({
        el:".root",
        data:{
            weather:false
        },
        computed:{
            info:{
                get(){
                    return this.weather?"晴":"阴"
                }
            }
        },
        methods: {
            change(){
                this.weather=!this.weather
            }
        },
       watch:{
        // info:{
        //     handler(oldvalue){
        //       alert(oldvalue)
        //     }
        // },
        weather:{
            immediate:true,//初始化时让handler函数执行一次
            handler(oldvalue,newvalue){
                console.log(oldvalue,newvalue)
            }
        }
       }
    })
    vm.$watch("weather",{
        handler(newvalue,oldvalue){
            console.log(newvalue,oldvalue)
        }

    })
</script>
</html>