Vue -- el 和 data 的两种写法 & MVVM模型
Posted Z && Y
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue -- el 和 data 的两种写法 & MVVM模型相关的知识，希望对你有一定的参考价值。
1. el 和 data 的两种写法
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>el与data的两种写法</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
data与el的2种写法
1.el有2种写法
(1).new Vue时候配置el属性。
(2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。
2.data有2种写法
(1).对象式
(2).函数式
如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
3.一个重要的原则：
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。
-->
<!-- 准备好一个容器-->
<div id="root">
<h1>你好，{{name}}</h1>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
//el的两种写法
/* const v = new Vue({
//el:'#root', //第一种写法
data:{
name:'尚硅谷'
}
})
console.log(v)
v.$mount('#root') //第二种写法 mount是挂在的意思*/
//data的两种写法
new Vue({
el: '#root',
//data的第一种写法：对象式
/* data:{
name:'尚硅谷'
} */
//data的第二种写法：函数式
data() {
console.log('@@@', this) //此处的this是Vue实例对象
return {
name: '尚硅谷'
}
}
// 或者这样写
// data: function () {
// console.log('@@@', this) //此处的this是Vue实例对象
// return {
// name: '尚硅谷'
// }
// }
// 但是不要这样写 旦写了箭头函数，this就不再是Vue实例了 而是全局的Window。
// data: () => {
// console.log('@@@', this) //此处的this是Vue实例对象
// return {
// name: '尚硅谷'
// }
// }
})
</script>
</html>
运行结果:
补充: $mount函数
$mount函数是Vue原型链上面的函数:
演示:
2. MVVM模型
2.1 概念
Vue官方文档:
MVVM模型
- M：模型(Model) ：对应 data 中的数据
- V：视图(View) ：模板
- VM：视图模型(ViewModel) ： Vue 实例对象
2.2 示例代码:
示例代码:
<!DOCTYPE html>
<html>
<head>
<meta 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>
<h1>测试一下1：{{1+1}}</h1>
<!-- 下面这些都是 Vue实例vm身上的属性 或者是Vue原型上面的属性 -->
<h1>测试一下2：{{$options}}</h1>
<h1>测试一下3：{{$emit}}</h1>
<h1>测试一下4：{{_c}}</h1>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el: '#root',
data: {
name: '重庆理工大学',
address: '重庆',
}
})
console.log(vm)
</script>
</html>
运行结果:
理解MVVM:
查看vm及Vue原型:
以上是关于Vue -- el 和 data 的两种写法 & MVVM模型的主要内容，如果未能解决你的问题，请参考以下文章