Vue前端框架笔记01：初识vue

最新推荐文章于 2024-03-08 10:41:40 发布

小薛引路

最新推荐文章于 2024-03-08 10:41:40 发布

阅读量1.5k

点赞数 7

分类专栏：前端知识学习

本文链接：https://blog.csdn.net/m1m2m3mmm/article/details/119596989

版权

前端知识学习专栏收录该内容

2 篇文章 1 订阅

订阅专栏

1 基本结构

2 插值语法与指令语法

3. 数据绑定

4. vue 实例的 el 和 data 的几种写法

5 MVVM模型

6 数据代理

6.1 Object.defineProperty

6.2 最简单的数据代理案例

6.3 数据代理原理分析

6.3.1 验证 data.name --》 getter --》 vm.name

6.3.2 验证 vm.name --》 setter --》 data.name

6.3.3 如果没有数据代理的话

6.3.4 数据劫持

1 基本结构

在 head 标签中，添加vue.js文件
准备一个容器：在容器中使用插值语法或者指令语法，获取vue实例中的数据
准备 vue 实例：键 el 的值为通过CSS选择器得到的容器；data 的值为 vue实例要与容器交互的数据内容

注意：一个 vue 实例只能挂载一个容器对象，vue 对象可以利用组件来分担其功能

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

<head>
    <meta charset="UTF-8">
    <!-- 引入开发版本的vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <title>初识Vue</title>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id='Demo'>
        <h1> hello {{name.toLowerCase()}}</h1> 
        <h1> age: {{age}}</h1>
        <h1> date: {{Date.now()}}</h1>
        <p>总结语法：<br>
            1. 想让VUE正常工作，必须创造一个VUE实例，且传入一个配置对象<br>
            2. root容器中依然是正常的html语法， 只不过混入了VUE的特殊语法<br>
            3. root容器中的代码称为【VUE模板】<br>
            4. 容器 和 实例 必须是一一对应的，但是vue会有组件配合使用 <br>
            5. 一旦data中的数据发生变化，页面中用到该数据的地方会自动更新
            注意区分表达式和js代码：<br>
            1. 表达式会生成一个值，可以放在任何一个需要值的地方<br>
                (1). a; (2): a+b; (3):demo(1); (4): x === y ? 'a' : 'b'<br>
            2. js代码，只控制代码执行，不会产生一个值<br>
                (1). if(){}; (2). for(){}<br>
            
        </p>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false // 阻止弹出生产者提示

        // 创建vue实例 -- 配置对象：键的值不可更改，对应的值类型不能随便改
        // 建立起容器 Demo 与 当前vue实例 的联系，值通常为 CSS选择器字符串
        new Vue({
            el:'#Demo',
            // el:document.getElementById('Demo') 这种写法通常不用
            // data 中用于存储数据，数据提供 el 所指定的容器去使用
            // 值暂时先写成一个对象，后期会写成一个函数；使用插值语法，将值写进容器中
            data:{
                name:"SY",
                age:18
            }
        })

    </script>
    
</body>

</html>

2 插值语法与指令语法

插值语法主要用在标签体中
指令语法通常用来管理标签(标签属性,标签体内容,绑定事件)，以v-开头

注意：无论是插值语法还是指令语法，其填充的都是 js表达式

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

<head>
    <meta charset="UTF-8">
    <!-- 引入开发版本的vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <title>模板语法</title>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id='Demo'>
        <h1> 插值语法：用于标签体的内容,双花括号内填js表达式 </h1> 
        <h3> age: {{age}}</h3>
        <hr>
        <h1> 指令语法：管理标签(标签属性,标签体内容,绑定事件)；通常以 v- 开头 </h1>
        <h2> v-bind: 用来管理标签属性， 可以缩写为 :；例如：v-bind:href="xxx"，xxx表示的是js表达式</h2>
        <a v-bind:href='school.url.toUpperCase()' > 跳转到官网 </h3>
        <a :href='school.url' > 跳转到{{school.name.toUpperCase()}}官网2 </h3>

    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false // 阻止弹出生产者提示

        new Vue({
            el:'#Demo',
            data:{
                name:"SY",
                age:18,
                school:{
                    name:'SanYuan',
                    url:'http://www.gcdxed.com/'
                }
            }
        })

    </script>
    
</body>

</html>

3. 数据绑定

数据绑定分单向绑定和双向绑定：

单向绑定使用 v-bind: 指令语法，可以缩写为 : 。
双向绑定使用 v-model: 指令语法，主要用在表单类element上，这类element的特点是都有 value 属性，因此，可以省略 value。

注意：单向绑定时，修改页面的数据，不会更新到 vue 对象，修改 vue 实例，保存后会体现在页面上。双向绑定，两者会联动更新；修改页面element对应的vue实例会随之更新；修改vue实例对应的element也会随之更新。

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

<head>
    <meta charset="UTF-8">
    <!-- 引入开发版本的vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <title>模板语法</title>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id='Demo'>
        单项数据绑定(v-bind)：<input type="text" v-bind:value='name'> <br/>
        双向数据绑定(v-model)：<input type="text" v-model:value='name'>
        <p> 双向绑定只能作用于表单类(输入类)元素上，如input，单选框，复选框，select, 多行输入，他们都有 value 属性 </p>
        <p> v-model:value 可以简写为 v-model</p>
        单项数据绑定(v-bind简写)：<input type="text" :value='name'> <br/>
        双向数据绑定(v-model简写)：<input type="text" v-model='name'>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false // 阻止弹出生产者提示

        new Vue({
            el:'#Demo',
            data:{
                name:'SY_GIS'
            }
           
        })

    </script>
    
</body>

</html>

4. vue 实例的 el 和 data 的几种写法

el 的两种写法：
- 写法一：创建 vue 对象时，直接给出 el 和 data
- 写法二：创建 vue 实例时，不定义el, 在后期使用 mount 方法挂载
data的两种写法：
- 写法一：直接给出字典定义
- 写法二：以普通函数形式定义，繁琐但是强推这种方式。

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

<head>
    <meta charset="UTF-8">
    <!-- 引入开发版本的vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <title> el 和 data 的几种写法 </title>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id='Demo'>
        <p> data: {{name}}</p>
        <p> 写法1： 在定义Vue对象时，直接指定 el </p>
        <p> 写法2： 在定义Vue对象时，先不指定 el, 后期在挂载上 </p>
    </div>

    <div id='Demo1'>
        <p> data: {{name}}</p>
        <p> 写法1： 在定义Vue对象时，直接指定 data 对象 </p>
        <p> 写法2： 在定义Vue对象时，采用函数式，返回数据；学到组件时，必须使用函数式 </p>
        <p> 建议使用函数式，而且必须是普通函数，不能写成箭头函数 ()=>{}， 否则其 this 将表示的是 Windows 实例对象，而非 vue 实例对象 </p>
        <p> 由 vue 所管理的函数，绝对不能写成箭头函数 </p>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false // 阻止弹出生产者提示

        const v =  new Vue({        
            data:{
                name:'SY_GIS'
            }         
        })
        // // 延迟 1 秒以后，再挂载
        // setTimeout(
        //     () => {v.$mount('#Demo'), 1000}
        // )
        v.$mount('#Demo')

        const v1 =  new Vue({    
            el:'#Demo1',    
            // data:function(){
            //     console.log("@@@@",this) // 这里的 this 指的是 vue 实例对象
            //     return {
            //         name:'SY_GIS1'
            //     }                
            // }

            // 一般在对象中写方法，会删掉 :function， 写成如下形式：
            data(){
                console.log("@@@@",this) // 这里的 this 指的是 vue 实例对象
                return {
                    name:'SY_GIS1'
                }                
            }          
        })
    </script>
    
</body>

</html>

这里要注意，data不能使用 ()=>{} 类型的箭头函数，否则其 this 会指向 windows，而不是我们的 vue 实例。由于是普通函数，实际操作中，可以省去 :function 直接写 data() {}。

5 MVVM模型

所谓MVVM模型包含如下几个部分：Model、View、ViewModel 分别对应模型 - 视图 - 视图模型。

所以，通常在定义 vue 对象时，我们将变量名设置为 vm

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

<head>
    <meta charset="UTF-8">
    <!-- 引入开发版本的vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <title>MVVM模型</title>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id='Demo'>
        <p> 单位名称：{{name}}</p> 
        <p> 单位地址：{{address}}</p>
        <p> 凡是vue对象的属性，都可以调用 {{$options}}</p>
        <p> MVVM 模型： Model / View / ViewModel </p>
        <p> Model: data 中的数据 </p>
        <p> View: 模板代码 </p>
        <p> ViewModel: Vue实例 </p>
        <p> data 中的所有属性，最终都会体现在 Vue 实例中， vm 身上的所有属性 以及 VUE 原型上的所有属性，在VUE模板中都可以直接使用</p>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false // 阻止弹出生产者提示

        new Vue({
            el:'#Demo',
            data(){
                console.log('@@@', this)
                return{
                    name: 'SY_GIS',
                    address: 'Xian'
                }
            }
        })

    </script>
    
</body>

</html>

通过MVVM，我们可以在容器中获取vue对象以及vue原型上的所有属性

6 数据代理

6.1 Object.defineProperty

对属性进行高级设置和操作

    <script>
        let number = 10
        let person = {
            name:'张三',
            sex:'男',
        }
        // 不可枚举，也就是说不能遍历
        // Object.defineProperty(person, 'age', {value:18})

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

            // 当有人读取person的age属性时，get方法(getter)就会诶调用，且返回值就是get的值
            get:function(){
                console.log('有人读取age属性了')
                return number;
            },
            // 当有人修改person的age属性时，set方法(setter)就会诶调用，且受到的值是set的值
            set(value){
                console.log('有人修改age属性了')
                number = value
            }
        })
        console.log(person)
    </script>

调试结果：

6.2 最简单的数据代理案例

通过一个对象代理对另一个对象的属性进行操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        let obj1 = {x:100}
        let obj2 = {y:100}
        Object.defineProperty(obj2, 'x', {
            get(){
                return obj1.x
            },
            set(value){
                obj1.x = value
            }
        })
    </script>
</body>
</html>

6.3 数据代理原理分析

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="../js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id='Demo'>
        <p> {{name}} </p>
        <p> {{address}} </p>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false // 阻止弹出生产者提示
        
        data = {name:'SY',address:'Xian'}

        const vm = new Vue({
            el:'#Demo',
            data
        });
    </script>
</body>
</html>

思路分析：

6.3.1 验证 data.name --》 getter --》 vm.name

6.3.2 验证 vm.name --》 setter --》 data.name

vm._data === data
vm._data === options.data 因为 new Vue 的参数是一个配置对象options，它里边有data
options.data === data

所以，论证了 vm._data 与 vue 实例传入的data 是一回事。

接着，修改 vm._data.name 相当于修改了 data，顺带着 vm.name 也会发生变化。

一旦 data 发生了修改，则对应的页面元素也会立即随之更新。

6.3.3 如果没有数据代理的话

代码应该写成如下形式：

<p> 没有数据代理的话：{{_data.name}},  {{_data.address}} </p>

6.3.4 数据劫持

vm._data 对 data 进行了修改，实际上是一个响应式；目的是检测 data 的数据发生了改编，同时将其更新到页面上。

小薛引路

关注

7
点赞
踩
29

收藏

觉得还不错? 一键收藏
打赏
10
评论
Vue前端框架笔记01：初识vue

基本结构、模板语法、数据绑定、el与data写法、MVVM模型、数据代理
复制链接

扫一扫

专栏目录

Vue前端框架笔记01：初识vue

1 基本结构

2 插值语法与指令语法

3. 数据绑定

4. vue 实例的 el 和 data 的几种写法

5 MVVM模型

6 数据代理

6.1 Object.defineProperty

6.2 最简单的数据代理案例

6.3 数据代理原理分析

6.3.1 验证 data.name --》 getter --》 vm.name

6.3.2 验证 vm.name --》 setter --》 data.name

6.3.3 如果没有数据代理的话

6.3.4 数据劫持

“相关推荐”对你有帮助么？