Vue中el和data的写法与 MVVM模型

执久呀

已于 2022-11-26 10:49:51 修改

阅读量900

点赞数 3

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

于 2022-11-26 10:49:36 首次发布

本文链接：https://blog.csdn.net/weixin_60719453/article/details/128049102

版权

el和data的两种写法

el的两种写法


<body>
<div id="root">
hello,{
  {name}}

</div>

<script type="text/javascript">
  const vm= new Vue({
     //  el:"#root",//el第一种写法
       data:{
           name:"孔超1"
       }
    })
   console.log(vm)//打印输出到网页控制台
vm.$mount("#root")//第二种写法
</script>
</body>

data的两种写法


<script type="text/javascript">
    const vm= new Vue({
        el:"#root",
        //data第一种写法 对象式

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

执久呀

关注关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

VUE数据模型设计思想指导

A_love_B的专栏

01-15

885

这是我放在githb上关于vue模型设计的一个思想，目前还在更新中… 如果有更好的建议，欢迎评论哦 github 模型设计 1. 模型设计在 MVVM 下面的模型设计，如果没有一定的准则，才开始开发很容易随意定节点，然后随意挂载在经历我们项目的一轮重构之后，我们的模型设计原则：添加 namespaced，用以隔离各个业务模块的 mutations， actions。结构类似，以 nam...

Vue小结(一): vue数据驱动模型

sunshineTing2的博客

07-03

1073

Vuejs的数据驱动是通过MVVM框架来实现的。 MVVM框架主要包含3个部分: model、view和 viewmodel。 Model: 指的是数据部分，对应到前端就是javascript对象 View: 指的是视图部分，对应前端就是dom Viewmodel: 就是连接视图与数据的中间件, 即观察者其中,数据和视图不能直接通信: View —— (事件触发) Dom Listeners —— Model ; Model —— (数据变化) Data Bindings —— View ; 首

1 条评论您还未登录，请先登录后发表或查看评论

Vue--模板语法、数据绑定、data与el的两种写法、MVVM模型

最新发布

weixin_42654944的博客

05-13

432

2、vm身上所有的属性及vue原型上所有属性，在vue模板中都可以直接使用。3、VM：视图模型（ViewModel）：Vue实例对象。1、data中所有的属性，最后都出现在了vm身上。1、M：模型（Model）：对应data中的数据。2、V：视图（View）：模板代码。

Vue之el，data

浩泽学编程的博客

05-23

401

Vue内的el，data属性（1）el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串（而这里所谓的容器就是带有id选择器的div的DOM对象，当然也可以用其他选择器）（2）Vue要想工作，肯定要实例一个Vue对象，且传入一个配置对象，而这个配置对象就是要制定的容器，这个对象配置也就是挂载，挂载之后Vue对象就可以和容器相关联（3）data用于储存数据，数据供el所指定的容器去使用。

国产免费数据库建模工具EZDML3.24发布支持生成和预览vue文件

huzgd的专栏

01-17

2413

国产免费数据建模和代码生成工具，新版增加了生成vue的JS脚本模板，默认采用ElementUI作为template界面

【Vue】基础（一）初识Vue - 模板语法 - 数据绑定 - el与data的两种写法 - MVVM模型

李子木的博客

10-20

695

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

Vue 中的MVVM

whaoe999的博客

03-31

1761

View层： 1、视图层 2、在前端开发中，通常就是 DOM 层 3、主要的作用是给用户展示各种信息 Model层： 1、数据层 2、数据可能是我们固定的死数据，更多的是来自服务器，从网络上请求下来的数据 3、在计数器案例中，就是后面取出来的obj，当然，里面的数据可能没有这么简单 VueModel层： 1、试图模型层 2、视图模型层是View和 Model 沟通的桥梁 3、一方面它实现了Data Binding，也就是数据绑定，将Model 的改变实时的反应到 View中 4、另

Vue——Vue简介、MVC与MVVM之间的区别（面试题）、条件渲染 (面试）、循环渲染(面试)、面试题/笔试题

qq_52301431的博客

08-30

1629

是阿里的尤雨溪出的框架Vue.js（读音 /vjuː/, 类似于 view）是目前最流行的一个框架，React是最流行的一个框架。Vue.js是前端的主流框架之一，和Angular.js、React.js并称为前端三大主流框架。数据驱动 vue.js 数据驱动和组件化开发，轻量级一些，分层渐进式框架；spa React.js 数据驱动和组件化开发，灵活性很高，需要什么都得自己构建逻辑自己写;app Angular.js 数据驱动 1.0 ，加上了组件化开发2.0，重量级框架;大型企业OA办公。.......

Vue实现MVVM

sdasadasds的博客

07-01

319

js创建对象的两种⽅式属性描述符：数据属性：数据属性包含⼀个数据值的位置，在这个位置可以读取和写⼊值访问器属性：是包含⼀对getter和setter函数**Object.defineProperty()**⽅法对数据属性和访问器属性进⾏修改 **Object.getOwnPropertyDescriptor()**⽅法取得指定对象指定属性的描述符如果要求对⽤户的输⼊进⾏特殊处理，或者设置属性的依赖关系，就需要⽤到访问器属性了ES6中某些方法的实现依赖于它，VUE通过它实现双向绑定此方法会直接在一个对象

05 MVVM模型

baidu_41922918的博客

07-23

161

MVVM模型 M：模型(Model) ：data中的数据 V：视图(View) ：模板代码 VM：视图模型(ViewModel)：Vue实例观察发现： 1.data中所有的属性，最后都出现在了vm身上。 2.vm身上所有的属性及 Vue原型上所有属性，在Vue模板中都可以直接使用。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>理解MVVM</.

Vue学习之--------el与data的两种写法、MVVM模型、数据代理（2022/7/5）

日常笔记 | 干货分享 | 毕设源码 | 毕设指导 | 答辩指导

07-05

457

Vue学习之--------el与data的两种写法、MVVM模型、数据代理（2022/7/5）

vue中el与data的两种写法和MVVM模型

qq_52619560的博客

07-20

252

1. el有2种写法 (1).mew Vue时候配置el属性 (2).先创建Vue实例,随后再通过vm.$mount('#root')指定el的值 2. data有两种写法 (1).对象式 (2).函数式 1. M:模型(Model):data中的数据 2. V:视图(View):模板代码 3. VM:视图模型(ViewModel):Vue实例...

创建前端数据模型，vue开发必备

weixin_33928137的博客

07-09

1650

后端的数据都是有对象的，那前端需不需要呢，非常需要！！！其实，这个库，我们已经用了2年了。我们将前端所有使用的业务数据模型都定义出来了。那在实际应用中，有什么用处呢？减少了无数的冗余代码，避免了非常多容易产生的bug。我们已经没有出现过什么提交接口，日期忘记转换的问题了？也没有出现过什么因为数据缺失，导致页面报错的问题，比如一些：{{user.org.title}}这种展示。话不多...

vue 基础 data含义、MVVM模型、v-model双向绑定、v-on:click、v-for、this的使用

可控的事情要谨慎，不可控的事情要乐观。

10-06

428

章节2.2 <body> <div id="app">{{content}}</div> <script> //原始写法 //var dom =document.getElementById("app"); //dom.innerHTML='hello world'; //data:...

Vue学习记录——数据绑定、el和data两种写法、MVVM模型

spring0205的博客

05-10

293

Vue学习记录容器和实例是一一对应的关系数据绑定 v-bind和v-model v-bind是单向绑定不能通过界面修改数据 v-model是双向绑定可以通过界面修改数据 v-model的使用是有范围的，只能应用在表单类元素类（input、select） v-model：value可以简写为 v-model 因为v-model默认收集的就是value的 el和data两种写法 el：（两种都可以用）第一种写法：el：‘#root’ 第二种写法：v.$mount(‘#root’) data 第一种写法

Vue入门实战教程（四）—— 模型层：数据

jcyka的专栏

04-30

660

四. 数据 1. 特性：响应式当一个 Vue 实例被创建时，它将data对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时就已经存在于data中的属性才是响应式的。理解：响应式属性： Vue实例里面的data对象中的属性(当实例被创建时就...

Vue2——VUE模板语法、数据绑定、el与data的写法

mantou_riji的博客

04-23

867

文章目录模板语法插值语法指令语法模板语法的总结对于需要重名的变量，可以设置层级来访问数据绑定单向数据绑定——v-bind双向数据绑定——v-model 模板语法即html模板块的语法。插值语法使用 {{js表达式}}作为vue语法。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模板语法</title> <sc

Vue data与el两种写法

qq030128的博客

04-02

(2).先创建Vue实例,随后再通过vm.$mount(‘#root’)指定el的值。(1).先new Vue时配置el属性。2.data有2种写法。

vue中el与data

05-09

在Vue中，el是一个关键属性，它指定了Vue实例所挂载的元素。它可以是一个CSS选择器，也可以是一个DOM元素。当Vue实例被创建后，它会将el属性指定的元素作为Vue实例的挂载点，并将其所有的模板和指令渲染到该元素上。而data是Vue实例的数据对象，用于存储组件的状态和数据。在Vue中，我们可以通过访问该对象中的属性来更新和操作组件的数据。当data的属性值发生变化时，Vue会自动更新组件中受影响的部分。在使用Vue时，我们通常会将el和data属性一起使用。el用于指定实例挂载的元素，而data用于存储实例的状态和数据。例如： ``` new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) ``` 在这个例子中，我们将el属性设置为CSS选择器`#app`，表示将Vue实例挂载到id为`app`的DOM元素上。同时，我们将data属性设置为一个对象，其中包含一个名为`message`的属性，其初始值为`'Hello Vue!'`。这样，Vue就会将该元素渲染为一个包含`'Hello Vue!'`文本的视图，并且当我们更新`message`属性时，视图也会自动更新。