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工具必须有服务器。