Vue（1）-------初识vue

王二狗吖

于 2019-05-22 20:28:52 发布

阅读量131

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/qq_41885672/article/details/90451499

版权

vue.js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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语法
注意事项：
1. 模板中的 this 指的是 new Vue得到的实例，在模板中 this可以省略不写
  
  {{ this.$data.msg }}
  
  {{ this.msg }}
  
  {{ msg }}
  推荐的
2. data选项在根实例中是对象，除了跟实例以外是函数。
3. 如何激活浏览器中,vue detools工具必须有服务器。