Vue声明式渲染、条件与循环、事件绑定、双向绑定和Vue生命周期

最新推荐文章于 2024-08-04 16:07:55 发布

江海共余生

最新推荐文章于 2024-08-04 16:07:55 发布

阅读量151

点赞数

本文链接：https://blog.csdn.net/qq_44673810/article/details/107515356

版权

声明式渲染

<div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

data: {
    message: 'Hello Vue!'
  }

条件与循环

v-if

在这里插入图片描述

seen：false时 “hello vue”不显示
seen：true时 “hello vue”显示

v-for
v-for 可以绑定数组的数据来渲染一个项目列表

事件绑定

v-on可以绑定一个事件例：单击“反转信息”按钮实现文字反转
在这里插入图片描述
实现代码如下：

<div id="app">
    <button v-on:click="reverseMessage">反转信息</button>
</div>

methods:{
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  },

双向绑定

Vue 提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。
将message绑定到文本框，当更改文本框的值时，<p>{{ message }}</p> 中的内容也会被更新。
例：
在这里插入图片描述
实现代码：

<div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

  data: {
    message: 'Hello Vue!'
  }

Vue生命周期

Vue的生命周期一共有八个阶段
1、beforeCreate (创建前)
2、created (创建后)
3、beforeMount (载入前)
4、mounted (载入后)
5、beforeUpdate (更新前)
6、updated (更新后)
7、beforeDestroy (销毁前)
8、destroyed (销毁后)

vue第一次页面加载会触发的钩子函数：beforeCreate、 created、 beforeMount 、mounted

DOM渲染在mounted周期中就已经完成了
在这里插入图片描述