Vue 学习笔记 1 —— Vue 实例

最新推荐文章于 2022-09-06 19:42:10 发布

我有两颗糖

最新推荐文章于 2022-09-06 19:42:10 发布

阅读量248

点赞数

分类专栏： Vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/qq_41140138/article/details/114404134

版权

Vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1. 创建 Vue 实例

通过 new 创建 Vue 实例：

一个 Vue 实例包括了 el, data, template, methods, computed 等属性

let vm = new Vue{
    // el 绑定的对象
    // data 数据
    // template 方法
    // methods 方法
    // computed 计算属性
}

2. 数据与方法

当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生响应，即匹配更新为新的值：

let data = {
    name: "Tom",
    age: 12
};

let vm = new Vue({
    data: data
});

vm.age = 2;
console.log(data.age);  // 2

data.age = 6;
console.log(vm.age);    // 6

注意：当 Vue 实例创建后，再向 data 添加属性 property，此时该属性不是响应式的：

data.c = 2;
console.log(vm.c);  // undefined

使用 Object.freeze() 可以使响应系统停止追踪变化：

let obj = {a: 1};
Object.freeze(obj);
new Vue({
    el: "#app",
    data: obj
})

3. 实例声明周期钩子

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

// created 钩子可以执行当实例被创建后执行的代码

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

注意：不要在选项 property 或回调函数上使用箭头函数，箭头函数无 this

Vue 实例的声明周期如下：

### 4. 应用例子

通过数据绑定，将 data 显示在 HTML 文档中：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <script src="./index.js"></script>
</head>

<body>
    <div id="root">{{content}}</div>
</body>

</html>

下面是 JavaScript 代码：

document.onreadystatechange = () => {
    // 挂载点： vue实例绑定的element
    // 模板： 挂载点内的为默认模板 可以重写
    new Vue({
        // vue 所绑定的节点
        el: "#root",
        // vue 中存储的数据 对象类型
        data: {
            content: "hello world!"
        }
    })
}

上面的代码可以在页面中添加一段文字 “hello world!”，{{}} 称为插值表达式，内插 Vue 实例的 data

参考：Vue 教程

我有两颗糖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 学习笔记 1 —— Vue 实例

1. 创建 Vue 实例通过 new 创建 Vue 实例：一个 Vue 实例包括了 el, data, template, methods, computed 等属性let vm = new Vue{ // el 绑定的对象 // data 数据 // template 方法 // methods 方法 // computed 计算属性}2. 数据与方法当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响
复制链接

扫一扫