Vue基本语法

最新推荐文章于 2024-06-12 16:13:25 发布

转载最新推荐文章于 2024-06-12 16:13:25 发布 · 117 阅读

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/weixin_45735355/article/details/118931768?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166686268516782388015953%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=166686268516782388015953&biz_id=0&ut

文章标签：

#vue.js #前端 #javascript

本文主要介绍了Vue的钩子函数和插值表达式。钩子函数是Vue提前定义好的事件，类似于Servlet的init和distory方法，还阐述了Vue生命周期相关知识。插值表达式用于将Vue中定义的数据显示在页面上，允许输入JS代码片段，并给出了相应的语法和案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.钩子函数
**概述：**钩子函数, 其实就是Vue提前定义好的事件, 其作用类似于Servlet的init方法和distory方法

语法：

（1）什么是vue生命周期?

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

（2）vue生命周期的作用是什么?

Vue生命周期中有多个事件钩子，让我们在控制整个Vue实例过程时更容易形成好的逻辑。

（3）vue生命周期总共有几个阶段?

可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/后。

（4）第一次页面加载会触发哪几个钩子?

第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

（5）DOM 渲染在哪个周期中就已经完成?

DOM 渲染在 mounted 中就已经完成了。

（6）简单描述每个周期具体适合哪些场景?

生命周期钩子的一些使用方法：

beforecreate : 可以在此阶段加loading事件，在加载实例时触发；

created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用；

mounted : 挂载元素，获取到DOM节点；

updated : 如果对数据统一处理，在这里写上相应函数；

beforeDestroy : 可以做一个确认停止事件的确认框；

nextTick : 更新数据后立即操作dom；

2. 插值表达式
**概述：**插值表达式用户把vue中所定义的数据,显示在页面上. 插值表达式允许用户输入"JS代码片段"

语法：{{ 变量名/对象.属性名 }}

案例：

<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue插值表达式</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>欢迎来到-->{{ name }}</h1>
</div>
<script type="text/javascript">
//创建vue对象
var app = new Vue({
//让vue接管div标签
el:"#app",
//定义数据,里边包含一个属性name,值为"白大锅"
data:{
name:"白大锅"
}
});
</script>
</body>
</html>