跳至主要內容

Vue简介

Guitar大约 7 分钟

介绍 — Vue.js (vuejs.org)

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

  • Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
  • Vue 将数据和 DOM 建立关联，所有东西都是响应式的。用户不用再和HTML直接交互。

MVVM分层思想

MVVM是什么？

​ M：Model（模型/数据）

​ V：View（视图）

​ VM：ViewModel（视图模型）

  • VM是MVVM中的核心部分。（它起到一个核心的非常重要的作用。

MVVM是目前前端开发领域当中非常流行的开发思想(一种架构模式)。目前前端的大部分主流框架都实现了这个MVVM思想，例如Vue，React等。

虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。

MVVM分层思想-Vue框架的实现
MVVM分层思想-Vue框架的实现

MVVM模型当中倡导将Model和View进行了分离，将数据变动产生的DOM改动都交给VM核心处理。也就是说，当Model发生改变之后，VM自动去更新View。当View发生改动之后，VM自动去更新Model。我们再也不需要编写操作DOM的JS代码了。开发效率提高了很多。

Vue全局配置对象

Vue.config是Vue的全局配置对象（静态的）。productionTip属性可以设置是否生成生产提示信息，默认值为true，修改为false则表示阻止生成提示信息。Vue.config.productionTip = false。

创建一个Vue实例

<!-- 安装vue -->
<script src="../js/vue.js"></script>

使用script标签进行Vue安装之后，上下文中就注册了一个全局变量：Vue。

<body>
    <!-- 指定Vue实例的挂载位置。 -->
    <div id="app"></div>
</body>

一个 Vue 应用会将其挂载（mount）到一个 DOM 元素上，然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。渲染的真实DOM会替换被挂载的element。

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的，如果直接调用Vue()函数，会报错：Vue is a constructor and should be called with the new keyword。

// 创建Vue实例
const myVue = new Vue({
    template : '<h1>Hello Vue!!!!!</h1>'
})

// 将Vue实例挂载到id='app'的元素位置。
myVue.$mount('#app')
//myVue.$mount(document.getElementById('app'))

构造函数参数

Vue构造函数的参数：options，译为多个选项，options对象的每个属性称为一个配置项option，配置项所对应的值称为选项值/选项对象。

  • 一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。
  • 选项对象options描述了由vue管理的数据（实例变量）、支持的方法（实例方法）、vue实例绑定的事件和托管的容器等。
根实例
└─ TodoList
   ├─ TodoItem
   │  ├─ TodoButtonDelete
   │  └─ TodoButtonEdit
   └─ TodoListFooter
      ├─ TodosButtonClear
      └─ TodoListStatistics
  • 所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象 (一些根实例特有的选项除外)。
  • Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $，以便与用户定义的 property 区分开来。以_开始表示该property或方法是vue保留的（私有的），不希望被操作的。

template 配置项

template配置项用来指定模板语句，模板语句是一个字符串形式的。

Vue框架自己制定了一些具有特殊含义的特殊符号。Vue的模板语句是Vue框架的一套语法规则。

template后面的模板语句会被Vue框架的编译器进行编译，转换成浏览器能够识别的HTML代码。

模板语句的数据来源：同一个vue实例所管理的所有数据。

使用胡子语法 {{key起始的调用表达}} 可以完成数据的插入。如：key.propertyName、key[index]、key(...)。

new Vue({
    template : 
    `<h1>
    	{{name}}
    	{{lead.name}}
    	{{actors[0].name}}
        {{a.b.c.d.e.name}}
    </h1>`, // 使用ES6模板字符串或普通字符串都可以

    // data选项值的属性名可作为模板语句中的key
    data : {
        name : '狂飙!!!',        
        lead : {
            name : '高启强',
            age : 41
        },
        actors : [
            {
                name : '安欣',
                age : 41
            }
        ],
        a : {
            b : {
                c : {
                    d : {
                        e : {
                            name : '呵呵'
                        }
                    }
                }
            }
        }
    }
}).$mount('#app') // 挂载。托管id为app的容器（element）

template配置项详解：

  1. template的选项值是模板语句，但是模板语句中只能有一个根节点。
  2. 只要data中的数据发生变化，模板语句一定会重新编译，重新渲染。
  3. 如果使用template配置项的话，指定挂载位置的元素会被替换。（原位置只剩下编译后的渲染结果）
  4. 如果不使用template配置项，会把被挂载的元素（.outerHtml）作为模板语句。（也是替换，但不会丢失元素信息）

el 配置项

el 配置项指定了该vue实例所托管的容器，如果缺省此配置项，需要调用.$mount('selector')进行手动挂载。

el : 'selector'
// selector是选择器，同CSS语法
el : document.getElementById('app')

一个vue实例只能托管一个容器，当选择器选中多个时，托管选中的第一个元素托管。

一个容器只能被一个vue实例所管理，当容器被多个vue实例选中时，仅有最先选中的vue实例能托管，其余vue实例无法挂载（不报错。需手动挂载？）。

data 配置项

data配置项的专业叫法：Vue 实例的数据对象（data实际上是给整个Vue实例提供数据来源的）。

data选项的类型是对象或者函数。如果data是对象的话，对象必须是纯粹的对象（含有零个或多个的 key/value 对）。

  • 当一个 Vue 实例被创建时，它将 data选项值 中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
// 我们的数据对象，作为data选项值
var dataObj = { a: 1 }

// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
  data: dataObj
})

// 获得这个实例上的 property
// 返回源数据中对应的字段
vm.a == dataObj.a // => true
dataObj == vm.$data // true

// 设置 property 也会影响到原始数据
vm.a = 2
dataObj.a // => 2

// ……反之亦然
dataObj.a = 3
vm.a // => 3

data对象的值属性、函数属性都会代理至 vue 实例：（vue实例的data是dataObj的引用）

<body>
    <div id="app">
        {{msg}}
        <br>
        {{fun("hel")}} 
        <!--页面结果为函数的返回值（返回undefined时为空）-->
    </div>
</body>

<script type="text/javascript">
    const vm = new Vue({
        el : "#app",
        data : {
            fun : function(val){
                console.log(val);
                return "1";
            },
            msg : "Vue"
        }
    })
</script>

  • 不建议在data选项中配置函数属性，因为开发者工具不能调试，且有methods选项供使用。

    image-20230501165103494
    image-20230501165103494

  • 只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。后期添加的新 property 的改动将不会触发任何视图的更新。

  • 不要在选项 property 或回调上使用箭头函数。因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。

Copyright ©2024-present Guitar