Vue的学习（2.0）——Vue实例＋模板语法

1.Vue实例

所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象 (一些根实例特有的选项除外)。

实例生命周期钩子

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

new Vue({
   
  data: {
   
    a: 1
  },
  created: function () {
   
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"![在这里插入图片描述](%E5%9B%BE%E7%89%87:%20!%5BAlt%5D%28https://img-home.csdnimg.cn/images/20220524100510.png%29#pic_center)

这里的created 钩子可以用来在一个实例被创建之后执行代码，也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。

下面这个是一个生命周期图

![实例的生命周期](https://img-blog.csdnimg.cn/5d5fd268bf074a08b8dfc082527befbd.png#pic_center

2.模板语法

插值

text

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<span>Message: {
   {
    msg }}</span>

通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新

<span v-once>Message: {
   {
    msg }}</span>

HTML

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令

// 这会将rawHtml内的所有标签以文本的形式呈现
<p>Using mustaches: {
   {
    rawHtml }}</p>
// 这会将rawHtml内的所有标签以html的形式呈现
<p>Using v-html directive: <