▶ 我看过
---------------------------------------------------------------------------------------------------------------------------------
08.数据绑定
数据有两种绑定方式：单向绑定和双向绑定
双向绑定指的是，能够通过对屏幕上的输入改变后台的值。
而单向绑定只能通过后台改变屏幕的值
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../JS/vue.js"></script>
</head>
<body><div id="root">单向数据绑定:<input type="text" v-bind:value="name"><br>双向数据绑定:<input type="text" v-model:value="name"><!-- 这样写是错误的适合双向绑定的标签有单选框多选框输入框 能够在页面进行标签--><h1 v-model:value:x="name">喜羊羊</h1></div>
</body>
<script type="text/javascript"> new Vue({el:'#root',data:{name:'尚硅谷'}})
</script>
</html>
09.el与data 的两种写法
由于我们之后会步入组件化的学习，所以先提前给我们交代写法。
第一种方式是我们之前学习的默认模板
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><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>你好，{{name}}</h1></div><script>new Vue({el:'#root',data:{name:'尚硅谷'}})</script>
</body>
</html>第二种写法：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><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>你好，{{name}}</h1></div><script>const v= new Vue({// 第一种写法// el:'#root',// data:{// }// 第二种写法data(){return{name:'尚硅谷' }}})v.$mount('#root')</script> </body> </html>
10.理解MVVM
Vue虽然没有完全遵循MVVM模型，但是Vue的设计也受到了它的启发。
因此在文档中会使用vm去对应实例
M：model(模型) 对应data中的数据
V：view(视图) ：模板
VM：视图模型（ViewModel）:Vue实例对象
我感觉这里的话，面试可能会提问，因为感觉上是一个很经典的问题哈哈哈（狗头）。
比如会问你，MVVM是什么？
我们可以首先回答英文缩写分别是什么，之后再引入一个Vue实例进行阐述。
vm里有的，都可以通过出现在视图里。
data都可以出现在VM 里。
V通常就是HTML代码，也就是老师说到的模板代码
M就是Vue下面的data数据
VM就是Vue实例
