Vue2（一）：初识Vue、模板语法、数据绑定、el和data的两种写法、MVVM、数据代理、事件

最新推荐文章于 2024-05-24 23:45:01 发布

椰果uu

最新推荐文章于 2024-05-24 23:45:01 发布

阅读量842

点赞数 19

分类专栏： Vue.js 文章标签：前端 vue.js

本文链接：https://blog.csdn.net/m0_73560798/article/details/135912805

版权

Vue.js 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

现在Vue3已经出了，但我打算先学Vue2，学完之后再接着学Vue3。加油！

一、Vue简介

Vue是一套用于构建用户界面的渐进式JavaScript框架。Vue可以自底向上逐层的应用，简单应用：只需要一个轻量小巧的核心库。复杂应用：可以引入各式各样的Vue插件。

1、vue的特点

（1）采用组件化模式，提高代码复用率、且让代码更好维护。

（2）声名式编码，让编码人员无需直接操作DOM，提高开发效率。
（3）使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。

2、Vue的调试

打开Vue2的官网安装 — Vue.js

点击下载开发版本

打开vscode 新建js文件夹

将上面下载的开发者版本Vue.js复制到js文件夹下面。

新建html

<title>初识Vue</title>
    <script type="text/javascript" src="../js/vue.js"></script>

用谷歌浏览器打开，按f12编译之后发现有这样的提示：

解决办法：

在vue.js里面ctrl+f查找productionTip

把true改为false

保存之后再去刷新浏览器页面，就没有提示了。

二、初识Vue

1、搭建Vue开发环境

右键空白处open with liveserver ，f12键编译之后发现报错。

解决办法：

找到一张自己喜欢的图片，重命名为favicon.ico

放在根目录下

再次刷新就没有错误了，成功启动Vue，图标就变成了设置的图片。

2、创建一个Vue实例

1.想让Vue工作，就必须创建一个vue实例，且要传入一个配置对象；

2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；

3.root容器里的代码被称为【vue模板】；

    <!-- 准备好一个容器 -->
    <!-- 快捷写法 #root -->
    <div id="root"> 
        <h1>hello,{{name}}</h1>//{{}}是插值语法

    </div> 
    <!-- 创建一个Vue实例 -->
    <script>
    //const x = new Vue({  不需要写const x 
        new Vue({
        el:'#root',//el用于指定当前Vue实例为哪个容器所使用，值通常为CSS选择器字符串
        data:{//data中用于存储数据，数据供el所指定的容器去使用，值我们先暂时写成一个对象
            name:'炒股票'
        }
       }); 
    </script>

3、简单总结

4.Vue实例和容器是一一对应的；

5.真实开发中只有一个Vue实例，并且会配合着组件一起使用；

6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；

7.一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新；

三、模板语法

1、插值语法与指令语法

<body>
    <!-- 插值语法 -->
    <div id="root">
    <h1>插值语法</h1>
    <h3>加油，{{name}}</h3>
    <hr>
    <!-- 指令语法 -->
    <h1>指令语法</h1>
    <a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习1</a>
    <!-- <a :href="url" x="hello">点我去尚硅谷学习2</a> -->
    </div>
</body>
<script>
    new Vue({
        el:'#root',
        data:{
            name:'cgp',
            school:{
                name:'宇宙',
                url:'http://www.atguigu.com'
            }
        }
    })
</script>

2、总结

Vue模板语法有2大类：

1.插值语法：

功能：用于解析标签体内容

写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

2.指令语法：

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件....）。

举例：v-bind:href="xxx"或简写为：href="xxx",xxx同样要写js表达式，且可以直接读取到data中的所有属性。

备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。

四、数据绑定

1、单向绑定与双向绑定

<body>
    <div id="root">
        <!-- 普通写法 -->
        单向数据绑定 <input type="text" v-bind:value="name"> <br>
        双向数据绑定 <input type="text" v-model:value="name">
        <!-- 简单写法 -->
        单向数据绑定 <input type="text" :value="name"> <br>
        双向数据绑定 <input type="text" v-model="name">
        <!-- 如下代码是错误的 因为v-model只能应用于表单类元素（输入类元素） -->
        <h2 v-model:x="name">你好啊</h2>
    </div>
</body>
<script>
    new Vue({
        el:'#root',
        data:{
            name:'学习第一天'
        }
    })
</script>

1.单向数据绑定（v-bind）
数据只能从data流向页面。
单向数据绑定：<input type="text" v-bind:value="name">
单向数据绑定简写：<input type="text" :value="name">

2.双向数据绑定（v-model）
双向绑定一般都应用在表单类元素上（如：input、select等）
v-model:value可以简写为v-model，因此v-model默认收集的就是value值
双向数据绑定：<input type="text" v-model:value="name">
双向数据绑定简写：<input type="text" v-model="name">

2、总结

五、el与data的两种写法

1、el的两种写法

    new Vue({
        el:"#root",//el第一种写法
        data:{
            name:'cgp'
        }
    })

    const v = new Vue({
        data:{
            name:'cgp'
        }
    })
    console.log(v);
    v.$mount('#root') //el第二种写法

2、data的两种写法

    //data的两种写法
    new Vue({
            el: "#root",
            data: {//data的第一种写法:对象式
                name: 'cgp'
            }
        })

    new Vue({
        el:'#root',
        data() { //data的第二种写法：函数式 （不能用箭头函数）
            console.log('@@@',this);//此处的this指的是Vue实例对象
            return{
                name:'cgp'
            }
        }
    })

3、总结

1、目前哪种写法都可以，当学到组件时，data必须使用函数式，否则会报错。
2、由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了，而是window。

六、理解MVVM

1、模型图

2、总结

MVVM模型1.M：模型（Model）：data中的数据2.V：视图（View）：模板代码3.VM：T视图模型（ViewModel)：Vue实例

观察发现：

1.data中所有的属性，最后都出现在了vm身上。

2.vm身上所有的属性及Vue原型上所有属性，在Vue模板中都可以直接使用。

七、数据代理

1、1.Object.defineProperty方法

Object.defineProperty方法会直接在对象上定义一个新的属性，或者修改一个对象的现有属性，然后返回该对象。
比如下面这个案例，我们可以借助这个方法让变量number和person对象中的age产生关联

    <!-- 回顾Object.defineproperty方法 -->
    <script>
        let number = 18
        let person = {
            name:'cgp',
            sex:'女',
            // age:'18'
        }
        Object.defineProperty(person,'age',{
            // value:'18',
            // enumerable:true,//控制属性是否可以枚举，默认值是false
            // writable:true,//控制属性是否可以被修改，默认是false
            // configurable:true,//控制属性是否可以被删除，默认是false
            //当有人读取person的age属性时，get函数getter就会被调用，且返回值就是age的值
            get() {
                console.log('有人读取age属性了');
                return number
            },
            //当有人修改person的age属性时，set函数setter就会被调用，且会收到修改的具体值
            set(value) {
                console.log('有人修改了age属性,且值是',value);
                number=value
            }
        })
        // console.log(Object.keys(person));
        
        console.log(person);
    </script>

建议不是太懂得再去看一遍老师的课，完整的敲一遍

2、理解数据代理

数据代理：通过一个对象代理另一个对象中属性的操作（读/写）
比如下面这个案例，我们可以通过obj2来管理obj1里面的x（读/写）
记住这个案例，后面的理解起来可能会容易些

    <script>
        let obj1 = {x:100}
        let obj2 = {y:200}

        Object.defineProperty(obj2,'x', {
            get() {
                console.log('有人要通过obj2读取obj1');
                return obj1.x
            },

            set(val) {
            console.log('有人要通过obj2修改obj1');
            obj1.x = val;
            }
        })
        console.log(obj1);
        console.log(obj2);
    </script>

3、Vue中的数据代理

1、Vue中的数据代理：
通过vm对象来代理data(或者说是_data)对象中属性的操作（读/写）
2、Vue中数据代理的好处：
更加方便的操作data中的数据
3、基本原理：
通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作（读/写）data中对应的数据。

其实_data和data就是一个东西，这里先理解为_data是收集了data中的数据，然后vm对_data进行数据代理，也就是对data中的数据进行数据代理，目的只有一个，就是为了编码方便，要不然插值语法每次还得写{{_data.name}}什么的，有了这个数据代理，直接{{name}}就搞定了。

椰果uu

关注

19
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
Vue2（一）：初识Vue、模板语法、数据绑定、el和data的两种写法、MVVM、数据代理、事件

Vue是一套用于构建用户界面的渐进式JavaScript框架。Vue可以自底向上逐层的应用，简单应用：只需要一个轻量小巧的核心库。复杂应用：可以引入各式各样的Vue插件。4.Vue实例和容器是一一对应的；5.真实开发中只有一个Vue实例，并且会配合着组件一起使用；6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；7.一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新；Vue模板语法有2大类：1.插值语法：功能：用于解析标签体内容。
复制链接

扫一扫