创建Vue实例传入的options

你会发现，我们在创建Vue实例的时候，传入了一个对象options。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0kmBejFK-1609484043283)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记二/1.jpg)]

这个options中可以包含哪些属性呢？
- 详细解析
目前掌握这些选项：
- el：
  - 类型：string | Element
  - 作用：决定之后Vue实例会管理哪一个DOM。
- data：
  - 类型：Object | Function
  - 作用：Vue实例对应的数据对象。
- methods：
  - 类型：{ [key: string]: Function }
  - 作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。

Vue生命周期

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

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

也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。
不要在选项 property 或回调上使用箭头函数
比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8WV7u2oL-1609484043285)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记二/2.png)]

第一阶段

beforeCreate

最先开始的是创建，也就是「beforeCreate」，这个阶段，实例初步被创建，还没有初始化，就是一个具备基本模板，没有任何数据和事件的光杆司令，

created

然后进入到「created」阶段，这时候实例创建完成，并且立刻调用这个钩子里的函数，这时候数据观测 (data observer)，watch/event 事件回调的属性和方法配置完成，页面元素还没初始化，

扫描二维码关注公众号，回复： 12478792 查看本文章

beforeMount

接下来准备开始挂载dom节点，以供操作，在挂载之前「beforeMount」阶段，这时候相关的render函数首次被调用，并且完成页面元素和数据的初始化，

mounted

然后「mounted」阶段，这时候属性有了，方法有了，页面元素有了，数据也有了，所以这个阶段会对DOM节点进行操作，进行挂载完毕，并且挂载完毕后调用钩子里的函数，所以大多数的函数放在这里面，因为这里了开始可以对dom进行操作

第二阶段

beforeUpdate

第一阶段数据渲染完毕，页面展现完毕，这时候想要进行数据交互，这时的第一阶段是「beforeUpdate」，它发生在数据更新的调用时候，DOM还没有重新渲染之前，这时候可以进一步更改状态，而且不会触发重新渲染的过程

updated

这个阶段DOM以及重新渲染，可以行使操作新dom的的行为，但是应该避免出现这种行为，很可能会导致更新无线循环

beforeDestroy

到了这个阶段，上一阶段的行为最好放在这里使用，这是实例销毁之前的最后完整保留

destroyed

这个阶段实例被销毁，实例相关的一切消失

模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接写渲染 (render) 函数，使用可选的 JSX 语法。

Mustache语法

如何将data中的文本数据，插入到HTML中呢？
- 我们已经学习过了，可以通过Mustache语法（双大括号）。
- Mustache：胡子，胡须。
我们可以向下面这样来使用：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QvUZL2QU-1609484043286)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记二/3.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8spFyuEl-1609484043289)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记二/4.jpg)]

v-once指令

在某些情况下，我们可能不希望界面随意的跟随改变
- 这个时候，我们就可以使用一个Vue的指令
v-once：
- 该指令后面不需要跟任何的表达式（比如之前的v-for后面是有跟表达式的）
- 该指令表示元素和组件（组件后面才会学习）只渲染一次，不会随着数据的改变而改变

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02-v-once指令的使用</title>
</head>

<body>
    <div id="app">
        <h2>{
    
    {
    
    message}}</h2>
        <h2 v-once>{
    
    {
    
    message}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
    
    
            el: "#app",
            data: {
    
    
                message: "我是阿牛牛！"
            }
        })
    </script>
</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5s1wWZqK-1609484043290)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记二/5.gif)]

v-html

某些情况下，我们从服务器请求到的数据本身就是一个HTML代码
- 如果我们直接通过{ {}}输出，会将HTML代码也一起输出。
- 但是我们可能希望的按照HTML格式解析，并且显示对应的内容。
如果我们希望解析出HTML展示
- 可以使用v-html指令
  - 该指令后面往往会跟上一个string类型
  - 会将string的html解析出来并且进行渲染

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03-v-html指令的使用</title>
</head>

<body>
    <div id="app">
        <h2>{
    
    {
    
    url}}</h2>
        <h2 v-html="url"></h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
    
    
            el: "#app",
            data: {
    
    
                message: "大家好",
                url: '<a href="http://www.baidu.com">百度一下</a>'
            }
        })
    </script>
</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lLjuKGVn-1609484043294)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记二/6.jpg)]

v-text

v-text作用和Mustache比较相似：都是用于将数据显示在界面中
v-text通常情况下，接收一个string类型
一般不使用，因为不够灵活，无法拼接，用Mustache语法多一点

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04-v-text指令的使用</title>
</head>

<body>
    <div id="app">
        <h2>{
    
    {
    
    message}}</h2>
        <h2 v-text="messageb"></h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
    
    
            el: '#app',
            data: {
    
    
                message: '你好呀呀呀呀！！！！'
            }
        })
    </script>

</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WdXqAN98-1609484043296)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记二/7.jpg)]

v-pre

v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05-v-pre指令的使用</title>
</head>

<body>
    <div id="app">
        <h2>{
    
    {
    
    message}}</h2>
        <h2 v-pre>{
    
    {
    
    message}}</h2>

    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
    
    
            el: '#app',
            data: {
    
    
                message: 'ABCDEFG'
            }
        })
    </script>
</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aUfO5GaF-1609484043298)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记二/8.jpg)]

v-cloak

在某些情况下，我们浏览器可能直接显示出未编译的Mustache标签，这样效果不好。效果类似下图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8zNafyvw-1609484043299)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记二/9.gif)]

cloak：斗篷
我们来尝试下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>06-v-cloak指令的使用</title>
</head>
<style>
    [v-cloak] {
    
    
        display: none;
    }
</style>

<body>
    <div id="app" v-cloak>
        {
    
    {
    
    message}}
    </div>
    <script src="../js/vue.js"></script>
    <script>
        setTimeout(function() {
    
    
            const app = new Vue({
    
    
                el: '#app',
                data: {
    
    
                    message: '我是阿牛。'
                }
            })
        }, 2000);
    </script>
</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fOrki1Tf-1609484043299)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记二/10.gif)]

v-bind

前面我们学习的指令主要作用是将值插入我们模板的内容当中。
但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定。
- 比如动态绑定a元素的href属性
- 比如动态绑定img元素的src属性
这个时候，我们就可以使用v-bind指令：
- 作用：动态绑定属性。
- 缩写：:
- 预期：any (with argument) | Object (without argument)
- 参数：attrOrProp (optional)
下面，我们具体来学习v-bind的使用。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01-v-bind的基本使用</title>
</head>

<body>
    <div id="app">
        <img v-bind:src="imgURL" alt="">
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
    
    
            el: '#app',
            data: {
    
    
                message: '我是阿牛',
                imgURL: 'https://img14.360buyimg.com/seckillcms/s280x280_jfs/t1/159102/8/582/154338/5febe437E52bffa60/50425eceacc07177.jpg.webp'
            }
        })
    </script>
</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JB1YZk0T-1609484043300)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记二/11.jpg)]

简写：:的使用，直接使用冒号代替v-bind:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01-v-bind的基本使用</title>
</head>

<body>
    <div id="app">
        <a :href="aHref">百度</a>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '我是阿牛',
                aHref: 'http://www.baidu.com'
            }
        })
    </script>
</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GiAQLVIe-1609484043301)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记二/12.gif)]

动态绑定class（对象语法）：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02-v-bind动态绑定class</title>
</head>
<style>
    .red {
    
    
        color: red
    }
    
    .bold {
    
    
        font-weight: bold;
    }
</style>

<body>
    <div id="app">
        <p :class="{red: isRed, bold: isBold}">{
    
    {
    
    massage}}</p>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
    
    
            el: '#app',
            data: {
    
    
                massage: '我是阿牛',
                isRed: true,
                isBold: true
            }
        })
    </script>
</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kA4rHG2Z-1609484043301)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记二/13.gif)]

v-bind动态绑定style：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04-v-bind动态绑定style</title>
</head>

<body>
    <div id="app">
        <!-- <h2 :style="{key(属性名): value(属性值)}">{
    
    {
    
    message}}</h2> -->

        <!-- '50px'必须加上单引号，否则当做一个变量去解析 -->
        <!-- <h2 :style="{fontSize: '50px'}">{
    
    {
    
    message}}</h2> -->

        <h2 :style="{fontSize: finalSize + 'px', color: finalColor}">{
    
    {
    
    message}}</h2>

    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
    
    
            el: '#app',
            data: {
    
    
                message: '我是阿牛',
                finalSize: 100,
                finalColor: 'blue'
            }
        })
    </script>
</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vUbsX36s-1609484043302)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记二/14.gif)]

回顾

Vue笔记一——Vue安装与体验

Vue笔记二——Vue声明周期与模板语法

文章目录