vue初学核心基础
一、初识vue
1.vue的使用
导入vue之后创建vue模块，el属性表示控制区域的id名称，data表示该区域内的数据
在vue中我们都是用表中模板的标准语法来传递数据
<head>
<meta charset="UTF-8">
<title>02-Vue基本模板</title>
<!--1.下载导入Vue.js-->
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ name }}</p>
</div>
<script>
// 2.创建一个Vue的实例对象
let vue = new Vue({
// 3.告诉Vue的实例对象, 将来需要控制界面上的哪个区域
el: '#app',
// 4.告诉Vue的实例对象, 被控制区域的数据是什么
data: {
name: "wlw"
}
});
</script>
</body>
2.vue数据的单向传递
2.1MVVM设计模式
在了解vue单项数据传递之前先了解下mvvm设计模式
在MVVM设计模式中由3个部分组成：
M : Model 数据模型(保存数据, 处理数据业务逻辑)
V : View 视图(展示数据, 与用户交互)
VM: View Model 数据模型和视图的桥梁 (M是中国人, V是鬼子, VM就是茅山道士)
MVVM设计模式最大的特点就是支持数据的双向传递
数据可以从 M -> VM -> V
也可以从 V -> VM -> M
2.2vue数据的单向传递
Vue其实是基于MVVM设计模式的
被控制的区域: View
Vue实例对象 : View Model
实例对象中的data: Model
数据传给vue对象，vue对象再传给界面
model => view model => view
3.vue数据的双向传递
默认情况下Vue只支持数据单向传递 M -> VM -> V
但是由于Vue是基于MVVM设计模式的, 所以也提供了双向传递的能力
在、
浙公网安备 33010602011771号