<!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="app">
<h1>{{msg}}</h1>
<!-- 区别如下:v-bind是单向数据绑定,数据变化了,视图变化,视图变化了,数据不变 -->
v-bind指令:<input type="text" v-bind:value="name1">
<!-- v-model是双向绑定,只要有一方,无论是视图还是数据变化,都会使得对方发生改变 -->
v-model指令:<input type="text" v-model:value="name2">
<br>
<!-- 两者都可以完成数据绑定 -->
<!-- v-model只能用在表单内的标签上,如input,textarea,select标签等 -->
<!-- 为什么会有这样的限制 -->
<!-- 这样会报错 -->
<!-- <a v-model:href="link">百度</a> -->
<!-- 因为表单类的元素才能给用户提供可交互的界面,所以只支持v-model -->
<!-- 如,我们常见的点击按下选择变化等,dom编程就是依赖这些实现的事件捕获 -->
<!-- 因此,我们的v-model也就只支持表单类的标签 -->
<!-- v-model通常是用在value属性上的 -->
<!-- v-bind的简写形式是:,v-model的简写形式是v-model:表达式 -->
v-bind指令:<input type="text" :value="name1">
v-model指令:<input type="text" v-model="name2">
<br>
消息1:<input type="text" :value="msg">
消息2:<input type="text" v-model="msg">
</div>
<script>
new Vue({
el : "#app",
data : {
msg : "Hello",
name1 : "Jack",
name2 : "Rose",
link : "https://www.baidu.com"
}
});
</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>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<!-- 这就是view -->
<!-- view指的是容器 -->
<input type="text" v-model="name">
</div>
<!-- MVVM是什么?一种编程思想,类似于我们此前学习的MVC架构模式 -->
<!-- V(视图View),M(Model模型/数据),VM(ViewModel视图模型):VM是MVVM的核心部分 -->
<!-- 他起到核心的作用 -->
<!-- 目前主流的前端框架都实现了这个MVVM思想,如Vue或React等 -->
<!-- MVVM当中提倡Model和View进行了分离 -->
<!-- 假如我们的Model和View不分离,使用最原生的JS代码编写 -->
<!-- 如果数据出现任意改动,都需要大量的JS代码去操作我们的DOM元素 -->
<!-- 当model发生改变之后,VM就会自动更新view,我们再也不需要手动去更新操作dom的js代码 -->
<script>
// 这个就是vm
const vm = new Vue({
el : "#app",
data : {
msg : "Hello World",
// 这就是我们的model
name : "ZhangSan"
}
});
</script>
</body>
</html>
