当前位置：首页 > article >正文

Vue语法【2】

article 2025/8/26 12:28:10

1.插值表达式：

语法规则：

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

使用场景：

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

案例：

 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--  准备容器-->
<div id="app">//插值表达式<h1>hello,{{name}}</h1>
</div>//src属性的值即为vue环境资源所在的js文件路径<script src="vue/vue.js"></script><script>// 创建vue实例let vm=new Vue({//'#'表示选择器el:"#app",data:{name:'张三'}});
</body>
</html>

 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--  准备容器-->
<div id="app">//插值表达式<input type="text" value="{{name}}">
</div>//src属性的值即为vue环境资源所在的js文件路径<script src="vue/vue.js"></script><script>// 创建vue实例let vm=new Vue({//'#'表示选择器el:"#app",data:{name:'张三'}});
</body>
</html>

  在案例2中，我们在input标签中的value属性值中使用插值表达式来获取vue实例中的name变量，通过测试结果发现，此时无法获取到。

2.指令语法：

前景回顾：

上面案例2中我们在标签的属性内容中通过插值表达式来获取数据，发现获取不到，此时我们可以通过指令语法来解决此问题；

语法规则：

 v-bind：标签属性名=变量名简写：v-bind可省略简写后为（：标签属性名='变量名'）

示例：

 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--  准备容器-->
<div id="app">//指令语法简写后<input type="text" :value="name">
</div>//src属性的值即为vue环境资源所在的js文件路径<script src="vue/vue.js"></script><script>// 创建vue实例let vm=new Vue({//'#'表示选择器el:"#app",data:{name:'张三'}});
</body>
</html>

通过指令语法就可以实现在标签元素的属性内容中获取变量的值了

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--  准备容器-->
<div id="app"><a :href="url">点击跳转百度</a>
</div><!-- 1.引入vue环境 -->
<script src="vue/vue.js"></script>
<script>// 创建vue实例let vm=new Vue({el:"#app",data:{url:'Https://www.baidu.com'}});</script>
</body>
</html>

3.数据的绑定方式：

1.单向绑定：

概述：

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

示例：

 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--  准备容器-->
<div id="app"><h2>hello{{name}}</h2><input type="text" :value="name">
</div>//src属性的值即为vue环境资源所在的js文件路径<script src="vue/vue.js"></script><script>// 创建vue实例let vm=new Vue({//'#'表示选择器el:"#app",data:{name:'张三'}});
</body>
</html>

通过测试结果可以看出，当我们在浏览器上改变输入框的值时，最上面展示的数据并未发生改变，因为数据是单向绑定的缘故，我们在浏览器上改变数据，并不会引起Vue实例中的数据变化，因此浏览器上面展示的数据也就不会改变；

2.双向绑定：只能用于表单元素的value属性

概述：

双向绑定指的是数据的改变既可以从Vue实例对象的data流向浏览器，也可以从浏览器流向Vue实例对象的data；

语法：

双向绑定的语法与单向绑定类似，只需要将v-bind改为v-model即可

v-model:value='变量名'
简写：v-model='变量名'

示例：

 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--  准备容器-->
<div id="app"><h2>hello{{name}}</h2><input type="text" v-model="name">
</div>
<!--//src属性的值即为vue环境资源所在的js文件路径-->
<script src="vue/vue.js"></script>
<script>// 创建vue实例let vm=new Vue({//'#'表示选择器el:"#app",data:{name:'张三'}});</script></body></html>

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

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

1.el属性的写法：

概述：

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

写法

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

  <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--  准备容器-->
<div id="app"></div>
<!--//src属性的值即为vue环境资源所在的js文件路径-->
<script src="vue/vue.js"></script>
<script>// 创建vue实例let vm=new Vue({//'#'表示选择器el:"#app",data:{name:'张三'}});</script></body></html>

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

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

  <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--  准备容器-->
<div id="app"></div>
<!--//src属性的值即为vue环境资源所在的js文件路径-->
<script src="vue/vue.js"></script>
<script>// 创建vue实例let vm=new Vue({data:{name:'张三'}});//在Vue实例创建完成后 绑定容器vm.$mount("#app")</script></body></html>

2.data属性的写法：

概述：

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

写法：

方式1：对象式

  <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--  准备容器-->
<div id="app"></div>
<!--//src属性的值即为vue环境资源所在的js文件路径-->
<script src="vue/vue.js"></script>
<script>// 创建vue实例let vm=new Vue({//'#'表示选择器el:"#app",data:{name:'张三'}});</script></body></html>

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

方式2：函数式：

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--  准备容器-->
<div id="app"></div>
<!--//src属性的值即为vue环境资源所在的js文件路径-->
<script src="vue/vue.js"></script>
<script>// 创建vue实例let vm=new Vue({//'#'表示选择器el:"#app",data(){return{name:"张三"}}});</script></body></html>

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

5.MVVM模型：

1.概述：

 <font style="color:rgba(0, 0, 0, 0.85);">MVVM（Model-View-ViewModel）是一种软件架构模式，主要用于构建用户界面。它源自于经典的 MVC（Model-View-Controller）模式，并在前端开发中得到了广泛应用，尤其是在使用框架如 Angular、Vue.js 和 React 时。</font>

Model（模型）：

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

View（视图）：

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

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 实例的 <font style="color:rgba(0, 0, 0, 0.85);">_data</font> 属性上，从而实现数据的响应式处理和方便的访问方式。

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.数据代理的优势

提高性能：

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

方便的开发体验：

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

1.插值表达式：

语法规则：

使用场景：

案例：

2.指令语法：

前景回顾：

语法规则：

示例：

3.数据的绑定方式：

1.单向绑定：

概述：

示例：

2.双向绑定：只能用于表单元素的value属性

概述：

语法：

示例：

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

1.el属性的写法：

概述：

写法

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

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

2.data属性的写法：

概述：

写法：

方式1：对象式

方式2：函数式：

5.MVVM模型：

1.概述：

2.图解：

3.原理：

4.总结：

6.Vue中的数据代理：

1.概述：

2.原理：

1.使用 Object.defineProperty()

2.使用 Proxy

3.数据代理的优势

相关文章：

1.使用 `Object.defineProperty()`

2.使用 `Proxy`