vue的框架
- 既然Vue是一个框架, 那么它使用了什么架构模式?
-
目前我们市面上基本上是以 MVC 这个架构思维 为主
-
Vue使用 MVC 的衍生的模式,这个模式叫做 MVVM。
-
MVC
-
Backbone.js
-
MVP
-
MVVM
-
名词解释:
- M Model 表示数据
- V View 表示视图
- P/C/VM Presenter/Controller/ViewModel(视图模型) 表示就是逻辑
-
Vue中 VM改变,那么 V也会改变 , 反之也是一样的, 我们称之为 ‘双向数据绑定’。
-
数据驱动/ 双向数据绑定的原理 / 深入响应式的原理
- 当我们将数据写在data选项时,Vue会通过observer将data对象中的所有的属性都设置上getter和setter。
- 当我们将数据绑定在视图时,自动触发getter,会将默认值,展示在视图。
- 当我们通过视图修改数据是,会自动触发setter,将数据修改,同时视图也会发生更新。
vue.js使用
- 下载
* cdn
https://cdn.bootcss.com/vue/2.6.10/vue.js
* 本地保存
vue.js文件
* 模块化安装
npm i vue -D/-S
cnpm
yarn
- 引入
- 初始化
- 必须有一个html容器, 决定vue.js的作用范围
- 初始化
new Vue(options)- el 表示装载, 将上面id为app的模板装载在 new Vue的实例中,也确定了一个作用范围
- data 数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<p> {{ msg }} </p>
</div>
</body>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'hello Vue.js'
}
})
</script>
</html>
- 数据绑定(声明式渲染)
名词:
mustauch语法糖: 双大括号语法 {{}} 支持js语法
注意事项:-
模板中的 this 指的是 new Vue得到的实例 , 在模板中 this可以省略不写
{{ this.$data.msg }}
{{ this.msg }}
{{ msg }}
推荐的 -
data选项在根实例中是对象, 除了跟实例以外是函数。
-
如何激活浏览器中,vue detools工具必须有服务器。
-