【Vue】深入理解MVVM与数据绑定

您所在的位置：网站首页 › iosmvvm双向绑定深入理解 › 【Vue】深入理解MVVM与数据绑定

【Vue】深入理解MVVM与数据绑定

2024-06-26 18:35| 来源: 网络整理| 查看: 265

与Vue的第一次相识 ->Vue.js是什么？是一套用于构建用户界面的渐进式框架 ->引入vue.js文件

在head标签中添加vue.js文件路径如：

->创建vue实例

在body标签下添加script标签，在添加的script标签中创建vue实例

var vm = new Vue({ }) ->MVVM模式 M:model层-通过VM与View建立联系进行操作 V:View层-即我们的DOM展现出的内容 VM：Vue给定的文件

在这里插入图片描述

- >在代码中理解MVVM模式 vueMVVM var vm = new Vue({ // 将vue实例与id是“root”的元素绑定 el:"#root" }) 与Vue的第二次见面

通过这个实例，揭开vue的面纱，看不懂没关系，继续往下看

vueMVVM {{content}} 点击我也是点击 var vm = new Vue({ // el表示实例的作用范围，即让这个vue实例接管id是"root"元素的内容 el:"#root", // 定义数据，在dom中可以用“{{数据名}}”去调用定义的数据 data:{ // 定义一个数据“content”,数据内容是“Hello Vue” content:'Hello Vue', todoValue:'Hello World' }, // 定义绑定元素中的事件 methods:{ //定义事件和事件内容 handlBtnClick:function(){ //执行的事件内容 this.content=this.todoValue } } }) 首先，与Model聊聊天 ->vue实例中的el属性：绑定vue对象的作用元素

应用：在model层，为创建的vue实例绑定id="root"的元素

var vm = new Vue({ // el表示实例的作用范围，即让这个vue实例接管id是"root"元素的内容 el:"#root" }) ->vue实例中的data属性：定义vue对象的数据属性

应用：定义两个Vue对象的属性“content”和“todoValue”,并赋值

应用：为实例添加methods属性，定义事件

var vm = new Vue({ // el表示实例的作用范围，即让这个vue实例接管id是"root"元素的内容 el:"#root", // 定义数据，在dom中可以用“{{数据名}}”去调用定义的数据 data:{ // 定义一个数据“content”,数据内容是“Hello Vue” content:'Hello Vue', todoValue:'Hello World' }, // 定义绑定元素中的事件 methods:{ //定义事件和事件内容 handlBtnClick:function(){ //执行的事件内容 this.content=this.todoValue } } }) 休息一会，与View层继续聊如何给vue实例定义事件呢？通过v-on属性就可以

->v-on：为元素绑定事件，用于事件的监听绑定，当监听到指定事件后执行该事件的内容应用：为button元素绑定click事件， v-on的缩写为“@”，所以v-on:click="handlBtnClick"和@click="handlBtnClick"效果相同应用：

点击我也是点击 var vm = new Vue({ // el表示实例的作用范围，即让这个vue实例接管id是"root"元素的内容 el:"#root", // 定义绑定元素中的事件 methods:{ //定义事件和事件内容 handlBtnClick:function(el){ //事件内容 } } }) ->数据绑定的三种方式 ->插值表达式

格式：{{vue实例的data中定义的属性名称}} 应用：将vue实例中定义好的“content”的值插入到dom元素中

{{content}} ->v-model:实现双相绑定

应用：在view层为元素绑定vue实例中的属性“todoValue”，在vue实例中“todoValue"值为 ‘Hello World’，所以文本框会显示Hello World 在这里插入图片描述实现了model层到view层的数据绑定，即view层可以获取model层的数据。为点击按钮添加事件"handlBtnClick”，当点击按钮时，获取文本框内容，将其使用差值表达式显示在前面“Hello Vue”的位置下面这个效果更明显,获取文本框中的值，将其通过差值表达式，显示在view中在这里插入图片描述

点击我也是点击 var vm = new Vue({ // el表示实例的作用范围，即让这个vue实例接管id是"root"元素的内容 el:"#root", // 定义数据，在dom中可以用“{{数据名}}”去调用定义的数据 data:{ // 定义一个数据“content”,数据内容是“Hello Vue” content:'Hello Vue', todoValue:'Hello World', }, // 定义绑定元素中的事件 methods:{ //定义事件和事件内容 handlBtnClick:function(el){ //执行的事件内容 this.content=this.todoValue } } }) ->v-bind:实现元素绑定

应用：修改dom元素text的title属性值为自定义—“文本框标题”

{{content}} var vm = new Vue({ // el表示实例的作用范围，即让这个vue实例接管id是"root"元素的内容 el:"#root", data:{ //自定义指定text的标题 txttitle:"文本框标题" }, })

效果：text文本框的title属性值为vue实例中设置的值在这里插入图片描述

本人初学，理解尚浅，有不当之处，望斧正。

【本文地址】

【Vue】深入理解MVVM与数据绑定

【Vue】深入理解MVVM与数据绑定

今日新闻

推荐新闻