Vue(1)-------初识vue

    xiaoxiao2022-07-07  213

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

    最新回复(0)