Vue技术5.Vue中的MVVM
2023-09-27 14:26:24 时间
<!DOCTYPE html>
<html>
<head>
<mata charset="UTF-8" />
<title>理解MVVM</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
MVVM模型
1.M:模型(model):data中的数据
2.V:视图(view):模板代码
3.VM:视图模型(viewmodel):Vue实例
观察发现:
1.data中所有的属性,最后都出现在了vm身上。
2.vm身上所有的属性及vue原型上所有属性,在Vue模板中都可以直接使用。
-->
<!-- 准备好一个容器 -->
<div id="root">
<h1>学校名称:{{name}}</h1>
<h1>学校地址:{{address}}</h1>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el:'#root',
data:{
name:'尚硅谷',
address:'北京'
}
})
console.log(vm)
</script>
</html>
相关文章
- Vue自带的过滤器
- 前端技术栈-ES6、Vue、ElementUI,以及Vue脚手架快速构建前端项目
- 【转】vue技术分享-你可能不知道的7个秘密
- 精品微信小程序ssm电影院购票+后台管理系统|前后分离VUE
- vue中keep-alive详细讲解
- vue绑定内联样式
- Vue 简单实例 购物车4 - 全选和反选功能
- vue控制台报错
- 【Vue课堂】Vue.js 父子组件之间通信的十种方式
- Vue技术18.3组件的嵌套
- Vue技术15.5v-pre指令
- Vue技术15.3v-vloak指令
- Vue技术15.1v-text 指令
- Vue技术13收集表单数据
- Vue技术10.绑定样式
- Vue技术8.1姓名案例_插值语法实现
- vue 项目的I18n国际化之路
- vue系列:当vue路由配置history模式页面加载不出来的bug
- Vue3中使用Ant Design Vue图标
- 前后端分离,我怎么就选择了 Spring Boot + Vue 技术栈?
- Vue.js 实用技巧(二)
- vue——qs插件的使用
- vue 自定义事件