Vue选项/数据/资源（基础结构介绍）

其他 2020-04-05 10:39:58 阅读次数: 0

Vue选项/数据/资源（基础结构介绍）

  • data methods computed 里面定义的属性不能重名；

Vue的data（数据层）

  • data属性值是对象,也可以是一个函数，如果一个函数就必须返回一个对象。
  • data属性值是对象
    data:{
    // data中的数据最后都会放到vm这个实例上
    msg:“hello”,
    person:“12345”,
    obj:{name:“邢民华”,age:18},
    arr:[88,77,66]
    }
    vm.msg=“world”;
  • data属性值是函数
    data:function(){
    // data的属性值可以是函数，如果是函数一定要返回一个对象
    // this --> 当前Vue的实例；
    // console.log(this);
    return {
    msg:“今天是17号”,
    a:100,
    b:100
    };
    }
  1. data中的数据如果数组中某一项发生改变，不能引起视图的更新；如果是对象的属性名对应的属性值更新，会引发视图的更新；
    数组arr vm.arr[0]=100;// 数据已经更新，但是视图没有更新
  2. 数组内置的方法，能够引发原数组发生变化，可以引发视图的更新
    pop push shift unshift splice sort reverse
<body>
    <div id="a">
        {{msg}}
        {{person}}
        {{obj.name}}
        {{arr}}
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        // filter   some  find  every   reduce forEach  map 
        // Vue : Vue是一个类 
        // 视图： 浏览器打开页面；
        // 数据影响视图；当vue中的data数据发生改变，视图也会发生改变；
        // 数据是响应式：reactive
        let vm = new Vue({
            // 这个对象中的属性名是固定的
            el:"#a",// el : 代表Vue的语法的范围
            data:{
                // data中的数据最后都会放到vm这个实例上
                msg:"hello",
                person:"12345",
                obj:{name:"邢民华",age:18},
                arr:[88,77,66]
            }
        });
        // vm.msg="world";
        // console.log(vm);
        //vm.arr[0]=100;// 数据已经更新，但是视图没有更新
        //1. data中的数据如果数组中某一项发生改变，不能引起视图的更新；
如果是对象的属性名对应的属性值更新，会引发视图的更新；
        //2. 数组内置的方法，能够引发原数组发生变化，可以引发视图的更新
        // pop push  shift  unshift splice sort  reverse
        // vm.obj.name="刘宝华";
        vm.arr=vm.arr.filter(item=>item>70);

        // 数据会影响视图，如果想更改视图，只需要更改对应的数据，视图会自动更新；
        // 采用了MVVM的原理；
        // 在框架中，框架没有直接操作真正的DOM,而是操作了虚拟的DOM，更改数据以后，
就会更改虚拟的DOM,然后进行DOM-diff的对比，只需要把发生变化的那个地方进行替换，大大地提高了页面的性能；
        //{type:"div",children:[{},{}]}
    </script>
</body>
-------------------------------------------------------------
      <body>
    <div id="app">
        <!-- {{msg}}
        {{a}} -->
        <div id="c">
            {{a}}
        </div>
        <input type="text" v-model="b" yy="b">
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        //let a=100;
        // 指令 ： 以v-开头，放在行间属性上，有着特殊意义的一些词；就是指令；
        // v-model :应用于表单元素;把data中数据放到input框中；
        // 双向数据绑定：数据能影响视图  视图影响数据;
        let vm = new Vue({
            el:"#app",
            data:function(){
                // data的属性值可以是函数，如果是函数一定要返回一个对象
                // 40%  60%
                // this --> 当前Vue的实例；
                // console.log(this);
                return {
                    msg:"今天是17号",
                    a:100,
                    b:100
                };
            }
        })
        
    </script>
</body>

Vue的methods（控制层）

  • 给元素绑定的事件的方法，需要放在methods中

methods:{
// 这里面存储的是键值对、
// 1.给元素绑定的事件的方法，需要放在methods中
// 2. methods中的方法名不能和data中属性重名
// 3. 事件中的this指向当前vue的实例
// 绑定事件时，可以有小括号，也可以没有
// 1.在绑定事件时，如果没有小括号，那么第一个参数就是事件对象
// 2. 如果有小括号，但是没有传参，那么e默认是undefined；
// 3. 如果需要事件对象，并且需要传参，那么需要在绑定时使用$event进行占位；
fn(e, a) { // e: 事件对象
console.log(e, a);
}
}

<body>
    <div id="app">
        <button @click="fn">提交</button>
        <input type="text" @keyup="fn">
        {{msg}}
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        // v-on: 给元素绑定事件的指令
        // v-on:可以简写成@
    
        let vm = new Vue({
            el:"#app",
            data:{  
                msg:"该吃饭了"
            },
            // 给元素绑定的事件的方法，需要放在methods中
            methods:{
                // 这里面存储的是键值对、
                // 1.给元素绑定的事件的方法，需要放在methods中
                // 2. methods中的方法名不能和data中属性重名
                // 3. 事件中的this指向当前vue的实例
                fn(){
                    // console.log(this);
                    // console.log(100);
                    this.msg="该下课了";
                }
            }
        });
    </script>
</body>
-----------------------------------------------------------------------------------
      <body>
    <div id="app">
        <button @click="fn($event,100,200)">提交</button>
        <input type="text" @keyup="fn">
        {{msg}}
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                msg: "该吃饭了"
            },
            methods: {
                // 绑定事件时，可以有小括号，也可以没有
                // 1.在绑定事件时，如果没有小括号，那么第一个参数就是事件对象 
                // 2. 如果有小括号，但是没有传参，那么e默认是undefined；
                // 3. 如果需要事件对象，并且需要传参，那么需要在绑定时使用$event进行占位；
                fn(e, a) { // e: 事件对象
                    console.log(e, a);
                }
            }
        });
    </script>
</body>

Vue的filters过滤器

过滤器 {{a | toFixed(2)}}
filters里的方法不是挂在在实例上，所以filters里的方法可以和data方法重名
toFixed(val,a){// 形参；
// 当进行解析编译时，就会执行这个方法，方法的返回最终会放到页面上
val:形参的值就是管道符前面的值a:toFixed传递的
return val.toFixed(a);// 这个函数返回什么，那么页面展示什么
},

<body>
    <div id="app">
        <!--  这个toFixed的参数会传给filters中方法第二个参数； -->
        {{a | toFixed(2)}}
        {{b | toFixed(3)}}
        {{8 | addZero}}
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        let vm=new Vue({
            el:"#app",
            data:{
                a:10.5679,
                b:1.23456,
                c:8
            },
            methods:{
                
            },
            filters:{// 过滤器
                //filters里的方法不是挂在在实例上，所以filters里的方法可以和data方法重名
                toFixed(val,a){// 形参；
                //  val:形参的值就是管道符前面的值a:toFixed传递的
                    return val.toFixed(a);// 这个函数返回什么，那么页面展示什么
                },
                addZero(num){
                    // 当进行解析编译时，就会执行这个方法，方法的返回最终会放到页面上
                    return num<10?"0"+num:num;
                }
            }
            
        });
    </script>
</body>

Vue的created（钩子函数）

这是一个钩子函数；当初始化vue时，会默认调用的一个回调函数
一般情况下；请求数据都是在created中执行获取数据
当new Vue时，没有渲染真实的DOM之前，会执行这个钩子函数created;
请求到数据立即对data中的数据赋值，那么当编译DOM结构时，采用最新的数据编译；
减少DOM的渲染；
钩子函数中的this都指向vue的实例；

    <style>
        .x{
            font-size: 40px;
        }
        .y{
            color:red;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-for="a in products">{{a}}</div>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../node_modules/axios/dist/axios.js"></script>
    <script>
        // 用请求回来数据渲染视图；
        new Vue({
            el:"#app",
            data:{
                products:[]
            },
            created(){// 这是一个钩子函数；当初始化vue时，会默认调用的一个回调函数
                // 一般情况下；请求数据都是在created中执行获取数据
                console.log(100);
                // 当new Vue时，没有渲染真实的DOM之前，会执行这个钩子函数created;
              请求到数据立即对data中的数据赋值，那么当编译DOM结构时，采用最新的数据编译；
              减少DOM的渲染；
                //钩子函数中的this都指向vue的实例；
                this.getData();
            },
            methods:{
                getData(){
                    axios.get("./carts.json").then(data=>{
                        // data.data就是咱们获取的数据
                        // console.log(data.data); 
                        this.products=data.data;
                    });
                }
            },
            filters:{ 
                
            }
        });
    </script>
</body>

Vue的computed计算属性

computed: 计算属性
computed中属性不能喝data重名，也不能和methods重名
计算属性：当一个属性依赖多个属性改变时，一般采用computed方法；当依赖的属性发生改变时，会立即执行get方法，并且重新计算当前最新的val值，最后重新渲染视图；
computed :会默认走缓存，节省性能；
this --> Vue的实例
当依赖的属性发生改变时，会执行get方法
如果computed中的属性是函数，默认就是get;
get
当arr对象中的isSelected发生改变时，会默认触发一次get方法；
当获取使用val时，会默认把get的返回值给了val;
set
当设置更改val的值时，会默认执行computed的这个set方法

<body>
    <div id="app">
        <input type="checkbox" v-model="val"> 全选<br>
        <ul>
            <li v-for="a in arr">
                <input type="checkbox" v-model="a.isSelected">{{a.name}}
            </li>
        </ul>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        let  vm = new Vue({
            el:"#app",
            data:{
                arr:[{isSelected:false,name:"手机"},{isSelected:true,name:"电脑"}]
                
            },
            computed:{// 计算属性
                // computed中属性不能喝data重名，也不能和methods重名
                // 计算属性：当一个属性依赖多个属性改变时，一般采用computed方法；当依赖的属性发生改变时，会立即执行get方法，并且重新计算当前最新的val值，最后重新渲染视图；
                // computed :会默认走缓存，节省性能；
                val:{
                    get(){

// 当获取使用val时，会默认把get的返回值给了val;
// this --> Vue的实例
// console.log(100);
// 当arr对象中的isSelected发生改变时，会默认触发一次get方法；当依赖的属性发生改变时，会执行get方法
// console.log(100);
                      return this.arr.every(item=>item.isSelected);
                    },
                    set(a){
                        // 当设置更改val的值时，会默认执行computed的这个set方法
                        //console.log(a);// 代表的是当前val最新的值；
                        this.arr.forEach(item => {
                            item.isSelected=a;
                        });
                    }
                },
                sum(){
                    // 如果computed中的属性是函数，默认就是get;
                    return 100
                }
            }
        })
    </script>
</body>

computed的同异步

<body>
    <div id="app">
        {{a}}
        <li v-for="b in arr">{{b}}</li>
    </div>
    <script src="../node_modules/axios/dist/axios.js"></script>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
               arr:[]
            },
            computed:{
                a(){
                    // computed中不支持异步；
                    // 如果a的依赖数据是通过异步被更新的，那么a不能监听到最新发生的变化
                    let b;
                    axios.get("./carts.json").then((data)=>{
                        b=data.data;
                    });
                    // this.arr=[1,2,34,4]
                    // let b = 10;
                    // setTimeout(function(){
                    //     console.log(200);
                    //     b=88;
                    // },2000);
                    // return b;
                    return b;
                }
            }  
        });
    </script>
</body>
</html>

Vue的watch-监听data中属性

<body>
    <div id="app">
        <!-- <input type="text" v-model="a"> -->
        {{a}}
        <button @click="fn"></button>
       
    </div>
    <script src="../node_modules/axios/dist/axios.js"></script>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        // computed : 有缓存 当这个属性依赖多个属性计算而来；当依赖的属性发生改变以后，
      会触发get方法；重新计算该结果；
        // data中的属性不能喝methods中的重名，也不能和computed中重名，
        // watch : 监听；监听的是data的属性
        new Vue({
            el:"#app",
            data:{
               arr:[],
               a:100
            },
            computed:{
                
            },
            methods:{
                fn(){
                    this.a = 1;
                }
            },
            watch:{
                a(newVal,oldVal){// 监听现有的属性，当属性发生改变以后，会做的一些事情；
                    //console.log(10);
                    // newVal : 最新的值
                    // oldVal : 上一次的值
                    console.log(newVal,oldVal); 
                }
            }
        });
    </script>
</body>

watch的深度监听

<body>
    <div id="app">
        姓：<input type="text" v-model="person.firstName">
        <br>
        名：<input type="text" v-model="person.lastName">
        <br>
        姓名：<input type="text" v-model="person.fullName">
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                person: {
                    firstName: "",
                    lastName: "",
                    fullName: ""
                }
            },
            computed: {

            },
            watch: {
// 如果监听了对象，当这个对象中的属性名对应的键值对发生改变以后，并不会触发监听的这个对象的函数；
              因为这个引用数据类型的地址没发生改变；
// 把person改成对象的写法，handler相当于函数，deep:true是对这个person对象中的每一个属性进行监听，
              当其中一个属性发生改变，也会触发handler这个函数；

               
                // person: {
                //     handler(newVal) {
                //         // 这是个函数；两个参数分别是person这个对象改变之前改变之后的的值
                //         // console.log(newVal);
                //         console.log(1);
                //     },
                //     deep: true,  // deep属性对对象进行深度监听。
                //     immediate: true //函数立即运行，初始化
                // },

                 // 监听其中一个属性时，可以写成'对象.属性名'
                "person.firstName": {
                    handler(newVal, oldVal) {
                        // 这是个函数；两个参数分别是person这个对象改变之前改变之后的的值
                        // console.log(100);

                        // console.log(newVal, oldVal);
                        console.log(newVal, oldVal);
                        console.log(1);
                    },
                    deep: true,
                    immediate: true //函数立即运行，初始化
                }
            }

        })
    </script>
</body>

Vue中computed和watch的区别

  • 如果用computed和watch都可以实现，能用computed就不要用watch；原因是computed有缓存；

computed 和 watch的区别

  1. computed 会默认走缓存，减少性能的开销

  2. computed不支持异步

  3. 当一个属性依赖多个属性变化而变化时，这个属性适合用computed;多对一

  4. watch ：不走缓存，性能开销大

  5. watch支持异步

  6. 当这个属性发生改变会影响其他属性时，这个属性用watch,一对多

<body>
    <div id="app">
 
        姓：<input type="text" v-model="firstName">
        名：<input type="text" v-model="lastName">
        姓名: <input type="text" v-model="fullName">
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        // 如果用computed和watch都可以实现，能用computed就不要用watch；原因是computed有缓存；
        // computed 和 watch的区别
        // 1. computed 会默认走缓存，减少性能的开销
        // 2. computed不支持异步
        // 3. 当一个属性依赖多个属性变化而变化时，这个属性适合用computed;多对一

        //1.watch ：不走缓存，性能开销大
        //2.watch支持异步
        //3. 当这个属性发生改变会影响其他属性时，这个属性用watch,一对多
        new Vue({
            el:"#app",
            data:{
                firstName:"",
                lastName:"", 
                fullName:""
            },
            computed:{
                // fullName(){// 得到结果；监听的每一个依赖的属性,当依赖属性的发生改变，
              就会执行该函数
                //     console.log(100);
                //     return this.firstName+this.lastName
                // }
            },
            methods:{     
            },
            watch:{
                firstName(newVal){
                    // 这个属性中的this指向vue的实例
                    setTimeout(()=>{
                        // 箭头函数：this指向上一级作用域
                        this.fullName=newVal+this.lastName;
                    },1000)

                },
                lastName(newVal){
                    // 每改变一次值，都会触发一次
                    setTimeout(()=>{
                        console.log(100)
                        this.fullName=this.firstName+newVal;
                    },1000)   
                }
            }
        });
     
        
    
    </script>
</body>
宅男呀
发布了51 篇原创文章 · 获赞 13 · 访问量 3060
私信 关注

猜你喜欢

转载自blog.csdn.net/Sheng_zhenzhen/article/details/104622514
今日推荐
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自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
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)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022