Vue入门基础

最新推荐文章于 2025-04-16 09:24:20 发布

孤影_ls

最新推荐文章于 2025-04-16 09:24:20 发布

阅读量491

点赞数

分类专栏： Vue 文章标签： vue html5 es6 css3

本文链接：https://blog.youkuaiyun.com/Sheng_zhenzhen/article/details/104622229

版权

Vue 专栏收录该内容

16 篇文章

订阅专栏

本文深入探讨Vue.js框架的基本语法、数据绑定机制及MVVM原理。覆盖Vue的响应式系统、虚拟DOM操作、双向数据绑定特性，以及如何正确更新数据以确保视图实时刷新。适合初学者和有一定经验的开发者提升Vue应用开发技能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue

Vue初识

官网电商类（京东、天猫、唯品会、淘宝…）
移动端 APP(hybrid混合开发)
管理系统(单页面应用：VUE REACT)
大多数的项目都是系统类的；(OA管理系统，CRM管理系统，后台管理系统)
不乏有项目重构：用最新的技术栈替代原有的技术栈;
学习方法：看文档：学习；百度；

之前：html css javascript jquery bootstrap
jquery swiper==> 库:封装好方法，咱们直接调用里面的方法；fadeIn()
框架： angular react vue;// 咱们按照人家的规则写代码，框架去调用咱们的代码；

jquery ：操作的是真实的DOM，性能比较低
vue react angular ：操作的是虚拟的DOM【就是一个JS对象】性能好；

angular : 社区成熟；框架臃肿；不好学；
react : 适合开发大型的复杂的单页面应用，学习难度中等 FaceBook
vue : 易学，学习成本低；适合开发中小型的项目；// 尤雨溪
现在公司的项目框架vue和react占主要；
Vue ： vue-cli vue-router vuex vue-element
vue2.X.X

Vue基础语法

在胡子语法中绑定的数据值是对象类型，会基于JSON. stringify把其编译为字符串再呈现出来
(而不是直接toString处理的)串再呈现出来(而不是直接toString处理的)

并不是所有的数据更改最后都会通知视图重新渲染
1.初始数据是一个对象，对象中没有xxx键值对，后期新增的键值对是不会让视图重新渲染的，解决办法:
1.最好在初始化数据的时候，就把视图需要的数据提前声明好(可以是空值，但是要有这个属性) =>
原理:只有DATA中初始化过的属性才有GET/SET
2.不要修改某个属性名，而是把对象的值整体替换(指向新的堆内存)
3.可以基于vm. $set内置方法修改数据: vm. $set(obj,key ,value)

2.如果数据是一个数组需要基于:
1.ARR[N]=xxx 数据更新，不会引起视图更新
2.ARR. length-- 数据更新，不会引起视图更新
3.push/pop等内置的方法
4.重新把ARR的值重写(指向新的堆内存)
5.vm.$set

<body>
    <div id="app">
        <!-- {{obj.name}} -->
        {{obj}}
        <br>
        {{arr}}
        <br>
        {{"name" in obj?"ok":"No"}}
    </div>
    <!-- 数据更改影响视图更改 -->
    <!-- vm1 -->
    <!-- 开发的时候尽可能引用未压缩版本，这样有错误会抛出异常-->
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        let obj = {
            // name:""
        };
        let arr = [10];
        let vm1 = new Vue({
            //=> 基于querySelector获取视图容器:指定的容器不能是HTML和BODY
            el: "#app", //视图
            data: { //数据
 /* 
在胡子语法中绑定的数据值是对象类型，会基于JSON. stringify把其编译为字符串再呈现出来
(而不是直接toString处理的)串再呈现出来(而不是直接toString处理的)
// 
并不是所有的数据更改最后都会通知视图重新渲染
1.初始数据是一个对象，对象中没有xxx键值对，后期新增的键值对是不会让视 图重新渲染的，解决办法:
    1.最好在初始化数据的时候，就把视图需要的数据提前声明好(可以是空值，但是要有这个属性) => 
    原理:只有DATA中初始化过的属性才有GET/SET
    2.不要修改某个属性名，而是把对象的值整体替换(指向新的堆内存)
    3.可以基于vm. $set内置方法修改数据: vm. $set(obj,key ,value)
2.如果数据是一个数组需要基于:
    1.ARR[N]=xxx
    2.ARR. length--
    3.push/pop等内置的方法
    4.重新把ARR的值重写(指向新的堆内存)
    5.vm.$set
*/
                */
                obj,
                arr
            }
        });
        setTimeout(() => {
            //但数组在下面两种情况下无法监听,其他数据监听到变数，这也跟着变化
            利用索引直接设置数组项时，例如arr[indexofitem]=newValue
            修改数组的长度时，例如arr.length=newLength
            // 数组修改方法
            // vm1.arr[1] = 20;
            // vm1.arr.length--;
          	//下面可以被直接监听到，因为是重写了原数组加以修改
            // vm1.arr=[...arr,20]
            // vm1.arr.push(20);
            vm1.$set(vm1.arr, 1, 20);

            // 对象修改方法
            // 1
            // vm1.obj.name = "你好世界~~";
            // 2
            // vm1.obj = {
            //     ...obj,
            //     name:"你好世界~~"
            // };
            // // 3
            vm1.$set(vm1.obj, "name", "你好世界~~");
        }, 1000);
    </script>
</body>

Vue小胡子语法

1.小胡子语法{{}}中支持表达式
2. {{}}中null 和undefined不能被解析；
3. {{}}中支持三元运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<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>
</html>

Vue实现双向数据绑定

data的属性值可以是函数，如果是函数一定要返回一个对象,对象里数据都会放到Vue的实例上
数据=>视图当data中的数据发生改变，视图也会发生更新；
//视图=>数据输入改变input框中的值，会让data中的数据同时发生改变

// MVVM原理：
// M : model(数据) V:View(视图) VM(视图数据)
// 实际上，model和视图不能直接通信，需要通过vm进行数据传递，vm中有一个观察者，当model中数据发生改变以后，会通知视图进行对应的视图更新，当视图发生改变，vm也能监听到视图的变化，通过元素的DOM事件进行监听视图是否发生改变，如果改变，通知数据进行更改；
// MVC : model view controller

在VUE中，如果想更新视图，都要联系到更改数据；通过数据驱动视图的更新；

<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框中；
        // 双向数据绑定：数据能影响视图  视图影响数据;
      
        // 能够修改原数组的方法去执行，那么会引发视图的更新的；
        // debugger 断点
        // VUE的DOM渲染是异步的；
        // debugger
        // 在Vue中，想更新视图，一定要去更新数据；
        console.log(a.innerHTML);

        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>

<body>
    <!-- MVVM 双向数据绑定 -->
    <!-- 视图改变数据也改变 -->
    <div id="app">
        人民币：￥ <input type="text" v-model="priceRMB">
        <br>
        美元：$ <span>{{priceRMB/6.981}}</span>
    </div>
    <!-- IMPORT JS -->
    <script src="../node_modules/vue/dist/vue.min.js"></script>
    <script>
        // ==>v-model先实现把数据绑定到视图层（给INPUT设置VALUE值)，然后监听文本框内容的改变，
      一旦改变，会把数据也跟着改变；数据一变，视图会重新渲染；
        let vm1 = new Vue({
            el: "#app",
            data: {
                priceRMB: 0
            }
        })
        // MVVM 双向数据绑定 VUE    
        // MVV单向数据绑定  REACT
    </script>
</body>

MVVM原理

VUE的双向数据绑定原理：
- 当执行 new Vue() 时，Vue 就进入了初始化阶段，一方面Vue 会遍历 data 选项中的属性，并用 Object.defineProperty 将它们转为 getter/setter，实现数据变化监听功能；另一方面，Vue 的指令编译器Compile 对元素节点的指令进行解析，初始化视图，并订阅Watcher 来更新视图，此时Wather 会将自己添加到消息订阅器中(Dep),初始化完毕。当数据发生变化时，Observer 中的 setter 方法被触发，setter 会立即调用Dep.notify()，Dep 开始遍历所有的订阅者，并调用订阅者的 update 方法，订阅者收到通知后对视图进行相应的更新。

<body>
    <div id="app">
        {{msg}}
        <div>
            {{arr}}
        </div>
        <input type="text" v-model="msg" yy="1">
        <!-- <div v-for="a in arr"></div> -->
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
     
        let vm = new Vue({
            el:"#app",
            data:{
// ueObserver 数据监听器，把一个普通的 JavaScript 对象传给Vue的data属性，
VUE将遍历data中所有的属性，并使用Object.defineProperty()方法把这些属性全部转成set、get方法
                msg:"hello",
                arr:[1,2,3,4]
            }
        });
        vm.msg=9;
// 当进行complie解析指令时，给每一个元素进行指令解析，并绑定一个更新函数；
当数据发生变化之后，是observe通过Object.defineProperty进行监听到，通知对应的更新函数执行，
视图就会更新；

        let  obj = {name:88,age:99};
        Object.defineProperty(obj,"name",{
            get(){
                // 当获取obj对应name属性对应的属性值时，会默认执行这个get方法
                console.log(100);
                // get方法的return返回值就是该属性名对应的属性值
                //return 1;
            },
            set(b){
                // 当设置obj的name属性值时，会默认执行set方法；
                // 这个形参就接收到了设置属性名的属性值；
                console.log(b);
            }
        });
        var a = obj.name;
        console.log(a);
        console.log(obj);
        
        //obj.name=300;
        obj.age=100;
    </script>
</body>
</html>

Vue模拟实现v-model

v-model-般给表单元素设置的，实现表单元素和数据之间的相互绑定
数据影响视图==> Object.defineProperty(obj,“val”,{get(){},set(){}})
视图影响数据==> DOM事件

    <div id="app">
        <input type="text" id="box">
    </div>
    <script>
        let box = document.getElementById("box");
        // 数据影响视图
        let  obj = {};// 用来存储数据的一个对象；
        Object.defineProperty(obj,"val",{
            get:function(){
                // 这是一个函数，不是一个箭头函数
                return box.value;
            },
            set(newVal){
                //console.log(newVal);// 这个是obj的val的最新的值；
                box.value = newVal;
            }
        });
        let c = obj.val;
        // 视图影响数据==> DOM事件
        box.addEventListener("input",function(){
            // 触发这个事件的目的是更改obj的val的属性值
            obj.val = this.value;
        })
    </script>