这是我参与「第四届青训营 」笔记创作活动的的第5天。
本次笔记的内容是对“自学Vue”知识的第三次小总结。
注：本篇文章follow《尚硅谷Vue技术》张天禹老师的[Vue2.0+Vue3.0全套教程丨vuejs从入门到精通]课程完成
（一）el的两种写法
- 笔记：
el可以--->①直接在创建Vue实例对象的时候就配置el属性； ②先创建Vue实例，随后再通过vm.$mount('#root')指定el的值
第二种方式（$mount）更加灵活，其中“mount”有“挂载”之意，即把容器里所写的模板交给Vue实例后，解析之后重新挂载到页面上去
（二）data的两种写法
- 笔记： data对象式和函数式两种方式，其中函数式必须返回一个对象
注：
当后续使用组件时，必须用第二种函数式，否则会报错
由Vue管理的函数，一定不能写箭头函数，否则this就不再是Vue实例了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>el与data的两种写法</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>Hello,{{name}}!</h1>
</div>
<script>
Vue.config.productionTip = false
//el的两种写法：
// const vm = new Vue({
// // el:'#root', //第一种写法
// data:{
// name:'Wang'
// }
// })
// vm.$mount('#root')//第二种写法
//data的两种写法：
new Vue({
el:'#root',
//data的第一种写法：对象式
// data:{
// name:'Wang'
// }
//data的第二种写法：函数式
data(){
return{
name:'Wang'
}
}
})
</script>
</body>
</html>
（三）理解MVVM
虽然没有完全遵循MVVM，Vue的设计也受到了MVVM的启发
MVVM--->M：模型（Model)，data中的数据； V：视图（View），模板代码； VM：视图模型（View Model），Vue实例
- data中所有的属性，最后都出现在了vm身上
- vm身上所有的属性 及Vue原型身上所有的属性，在Vue模板中都可以直接使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mvvm</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>名称：{{name}}</h2>
<h2>战队：{{team}}</h2>
<h2>测试：{{$options}}</h2>
</div>
<script>
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
name:'Canyon',
team:'Damwon Kia'
}
})
</script>
</body>
</html>
