Vue语法【2】

1.插值表达式：

语法规则：

{{Vue实例中data的变量名}}

使用场景：

插值表达式一般使用在文本内容中，如果是元素的属性内容中则无法使用；

案例：

 


    
    




    //插值表达式
     
hello,{{name}}

  //src属性的值即为vue环境资源所在的js文件路径
 
 
 
 

3.数据的绑定方式：

1.单向绑定：

概述：

在上面案例中的指令语法就属于单向绑定，即数据的改变只能通过Vue实例的data流向浏览器，而不能通过浏览器流向Vue实例的data；

示例：

 


    
    




     
hello{{name}}
     

  //src属性的值即为vue环境资源所在的js文件路径
 
 

    
    

此时可以发现，当输入框内的数据改变时，最上面展示的数据也同步发生了改变，这也就实现了数据的双向绑定；

4.Vue实例中el与data属性的两种写法

1.el属性的写法：

概述：

  我们前面已经了解过了，在Vue实例对象中有两个比较关键的属性，其中el属性主要用于Vue实例对象与div容器的绑定。对于el属性的定义一般有两种写法，一个是在创建Vue实例对象时同时进行el属性的定义，另一种则是创建Vue实例对象完成后再进行el属性的定义；

写法

方式1：创建Vue实例对象时同时进行el属性的定义

说明：此种方式会导致Vue实例对象的效率较低

方式2：创建Vue实例对象完成后再进行el属性的定义

2.data属性的写法：

概述：

  data属性主要用于存储数据内容，在定义时一般也有两两种写法，一种是对象式写法，一种是函数式写法

写法：

方式1：对象式

说明：上面的案例中即为对象式写法，在data中的数据都以键值对形式进行存储。但此方式只适用于单页面语法学习时使用，在实际的项目中，会存在多个页面组件，这种对象式写法就不适用了，因为如果其中一个页面组件对data中的数据进行了修改，这个改动会导致所有的页面组件中的数据同时被修改；

方式2：函数式：

 说明：上面的案例即为data的函数式写法，在此种方式下，数据不再是直接存储在data对象中，而是通过data函数返回一个新对象，数据是存储在这个新对象中的。这样一来就可以解决多个页面组件环境下，数据改动的问题了，因为对于每个页面组件来说，它们都操作的是通过data函数获取的新对象，彼此之间是独立的，也就不会造成data对象式写法中的问题了；

5.MVVM模型：

1.概述：

 MVVM（Model-View-ViewModel）是一种软件架构模式，主要用于构建用户界面。它源自于经典的 MVC（Model-View-Controller）模式，并在前端开发中得到了广泛应用，尤其是在使用框架如 Angular、Vue.js 和 React 时。

1. Model（模型）：

• 案例中的data部分：代表应用程序的数据和业务逻辑。它通常包含数据的存储、处理和验证等功能。Model 不应该直接与视图进行交互，而是通过 ViewModel 来传递数据。
• 例如，在一个电子商务应用中，Model 可能包括商品信息、用户订单、库存数据等。

2. View（视图）：

• 模板代码部分（案例中的div容器部分）：负责显示数据和接收用户输入。它是用户与应用程序交互的界面，通常由 HTML、CSS 和 JavaScript 组成。View 不应该直接操作 Model，而是通过 ViewModel 来获取和更新数据。
• 例如，在一个网页应用中，View 可能是一个包含表单、列表和图表的页面。

3. ViewModel（视图模型）：

• 案例中的Vue实例对象：连接 Model 和 View 的桥梁。它将 Model 中的数据转换为 View 可以显示的格式，并将 View 中的用户输入转换为 Model 可以处理的格式。ViewModel 通常包含数据绑定、命令和事件处理等功能。
• 例如，在一个 Vue.js 应用中，ViewModel 就是 Vue 实例，它通过数据绑定将 Model 中的数据映射到 View 中的模板，同时通过事件处理将 View 中的用户输入传递给 Model。

2.图解：

3.原理：

• ViewModel（Vue对象）将 Model （data）中的数据通过Object.defineProperty() 复制到自身，并为data中的每个属性提供get/set方法，通过get/set方法实现了对data中数据的读写操作；
• 再通过模板语法将 ViewModel（Vue对象）中的数据绑定到 View 中的元素上，使得当 Model 中的数据发生变化时，View 中的元素会自动更新。
• 同时，当 View 中的元素发生变化时，ViewModel 会自动将用户输入转换为 Model 可以处理的格式，并更新 Model 中的数据。

4.总结：

• data中所有的属性，最后都出现在了Vue对象身上
• 对象身上的所有的属性以及 Vue原型身上所有的属性在Vue的模板上都可以直接使用；

6.Vue中的数据代理：

1.概述：

在 Vue 中，数据代理是指通过 Vue 实例将对数据的访问代理到 Vue 实例的 _data 属性上，从而实现数据的响应式处理和方便的访问方式。

2.原理：

1.使用 Object.defineProperty()

• 在 Vue 2.x 中，数据代理是通过 Object.defineProperty() 方法实现的。这个方法可以在一个对象上定义一个新的属性，或者修改一个对象的现有属性，并返回这个对象。
• Vue 使用 Object.defineProperty() 方法将 data 中的每个属性都定义为响应式的，并将它们代理到 Vue 实例上。这样，当你访问或修改 Vue 实例上的属性时，实际上是在访问或修改 _data 中的属性。

2.使用 Proxy

• 在 Vue 3.x 中，数据代理是通过 Proxy 对象实现的。Proxy 对象可以创建一个代理对象，用于拦截对目标对象的各种操作，并在操作发生时执行自定义的逻辑。
• Vue 使用 Proxy 对象将 data 中的每个属性都代理到 Vue 实例上，并在代理对象上实现了响应式处理。这样，当你访问或修改 Vue 实例上的属性时，实际上是在访问或修改 data 中的属性。

3.数据代理的优势

1. 提高性能：

• 通过数据代理，Vue 可以在数据发生变化时只更新与该数据相关的视图部分，而不需要重新渲染整个页面。这样可以提高应用的性能和响应速度。
• 例如，当你在 Vue 组件中修改一个数据属性时，Vue 只会更新与该属性相关的视图部分，而不会更新整个页面。

2. 方便的开发体验：

• 通过数据代理，Vue 实例上的所有数据属性都可以直接通过 this.propertyName 的方式访问，而不需要通过 this._data.propertyName 的方式访问。这样可以使代码更加简洁和易读，提高开发效率。
• 例如，在 Vue 组件中，可以直接使用 this.message 来访问 data 中的 message 属性，而不需要使用 this._data.message。