vue-day1

最新推荐文章于 2024-10-09 21:20:29 发布

宇宙超级无敌暴龙嗜血战士

最新推荐文章于 2024-10-09 21:20:29 发布

阅读量47

点赞数

文章标签： vue.js javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/m0_48837272/article/details/129504251

版权

vue2认识

声明式编程：

区分于命令式, 只需要声明数据即可，直接用

    const wm = new Vue({
        el:"#app", // 挂载到#app 模版上
        data:{ // 数据层  Model层
            msg:"hello world"
        }
    })

    let json = { // 数据层  Model层
        msg: "hello world",
        age:18,
        list:["a","b","c","d",'e']
    }

// json已经被vm对象所管控，只能在#app这个区域使用数据

    const vm = new Vue({
        el: "#app", // 挂载到#app 模版上
        data: json
    })

  console.log(json); // 
  console.log(vm); // 它身上除了有json对象上的属性，还有对应的getter和setter方法
    // 想改变json的msg的值，看看改一下vm（通过改变vm代理对象的 msg属性，照样修改了json对象的数据）
  vm.msg = 'hello vue';// 走setter，
    // Vue2.0 底层使用的Object.defineProperty

MVVM模型

viewmodel 层如何知道数据变化了，更改到view层

vm一旦创建，会将data上的数据数据，作为属性挂载到vm实例对象上（可以通过上述代码 vm.msg）

内部借助于Object.defineProperty()，将data中的属性遍历，并为每一个属性设置getter和stter方法

当获取数据时，会调用getter方法，设置数据时，调用setter方法

设置数据的时候，触发setter方法，setter方法内部自动触发 watcher方法，进行新旧dom对比，更新渲染到dom上。

vue3认识

三层架构：

Model层：数据层(data 里面的数据)

vm层：控制层

view：视图层

vm层：将model的数据显示到视图层

    Vue.createApp({
        data() {
            return {
                msg: "hello world"//数据写这里
            }
        }，
          methods(){
        //方法写这里
        }，
           computed: {
            // 对data中数据处理的  （长得像方法，使用起来像属性，计算属性）
         }，
    }).mount("#app")//捆绑在这里

模板语法

声明式语法不支持将undefined和null声明式的渲染到页面，但是占了位置，其他都支持

   Vue.createApp({
    data () {
        return {
            msg:"hello",
            num:10,
            flag:true,
            arr:[12,45,56],
            obj:{name:'zs',age:18},
            unde:undefined,
            nu:null
        }
    }
   }).mount("#app")