前端框架入门之Vue _el和data的两种写法分析MVVM模型

_el与data的两种写法

MVVM模型

_el与data的两种写法

查看vue的实例对象

我们在这边注释掉了el属性

这样的话div容器就绑定不了vue实例

当我们可以在这里写一个定时任务

然后再回头指定

这个mount有挂载的意思

就是把容器对象交给vue实例后

去给他挂载指定的对象

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>初识vue</title><!-- 引入 vue --><script type="text/javascript" src="./js/vue.js"></script></head><body><div id="root"><h1>你好 {{name}}</h1></div><script type="text/javascript">//阻止 Vue 在启动时生成生产提示Vue.config.productionTip=false;//创建 Vue 实例 const v= new Vue({// el:'#root',data:{name:'尚硅谷'}}) console.log(v);setTimeout(() =>{v.$mount('#root')},5000)</script></body></html>

data的写法

对象式

函数式

  //创建 Vue 实例 new Vue({el:'#root',// 对象式data:{name:'尚硅谷'},// 函数式data:function(){return {name :'尚硅谷'}}})

箭头函数不使用this的标准绑定规则，而是根据外层作用域来决定this

比如说window

我们选择的是标准的函数function

总结

一般上

我们data用函数式书写

MVVM模型

架构模型

Vue的开发在一定程度上参考的是MVVM模型

分析

我们通过Dom监听

返回给js模型

数据是存在模型里的

Vue把找到数据通过数据绑定来返回到View视图层上

把数据放到指定位置

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>初识vue</title><!-- 引入 vue --><script type="text/javascript" src="./js/vue.js"></script></head><body><div id="root"><h1>学校名称 {{name}}</h1><h1>学校地址 {{address}}</h1></div><script type="text/javascript">//阻止 Vue 在启动时生成生产提示Vue.config.productionTip=false;//创建 Vue 实例 new Vue({el:'#root',data:function(){return {name :'北华大学',address:'吉林省吉林市'}}})</script></body></html>