【Vue 从入门到实战进阶式掌握完整知识体系】002

2025-07-27 15:14:11

【Vue 从入门到实战进阶式掌握完整知识体系】002 二、Vue语法基础1、Vue中的应用和组件的基本部分代码代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

【Vue 从入门到实战进阶式掌握完整知识体系】002

二、Vue语法基础

1、Vue中的应用和组件的基本部分

代码

代码语言：javascript代码运行次数：0运行复制

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>基础语法</title>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  // 创建一个 vue 应用实例，给这个实例起一个名字，叫做“app”
  // 传入了一个参数，这个参数使用 {} 括起来，表示最外层应该如何展示
  // 也就是 vue 应用的根组件
  // mvvm 设计模式：m -> model 数据 view -> 视图 vm -> 视图数据连接层
  // 下面的 data 就是数据，是我们自己定义的
  // 下面的 template 就是视图模板，也是我们自己定义的
  // vm 视图数据连接层是 vue 组件做的
  ct app = ({
    data(){
      return{
        message: 'hello world'
      }
    },
    template: '<div>{{message}}</div>'
  });

  // 挂载（绑定）到 id 为 root 的标签
  // 这行代码的返回值就是 vue 应用的根组件
  // 这里的 vm 就是应用的根组件
  ct vm = ('#root');
</script>

</html>

运行结果

image-20210612112626889.png

2、理解Vue的生命周期函数*

生命周期图

图片来自官方文档，注释是本人参考网上解读和英文含义写的，不是特别专业，仅作参考！

lifecycle.png

代码

代码语言：javascript代码运行次数：0运行复制

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>基础语法</title>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  ct app = ({
    data(){
      return{
        message: 'hello world'
      }
    },
    // 创建实例之前执行的函数
    beforeCreate(){
      cole.log(, "beforeCreate");
    },
    // 创建实例之后执行的函数
    created(){
      cole.log(, "created");
    },
    // 实例创建之后，挂载之前执行
    beforeMount(){
      cole.log(document.getElementById("root").innerHTML,"beforeMount");
    },
    // 挂载之后执行，此时数据已经被绑定到视图上了
    mounted(){
      cole.log(document.getElementById("root").innerHTML,"mounted");
    },
    // 当数据发生变化时，页面更新前执行的函数
    beforeUpdate(){
      cole.log(document.getElementById("root").innerHTML,"beforeUpdate");
    },
    // 当数据发生变化时，页面更新后执行的函数
    updated(){
      cole.log(document.getElementById("root").innerHTML,"updated");
    },
    // 当 vue 应用失效时，且在被销毁前，执行的函数
    beforeUnmount(){
      cole.log(document.getElementById("root").innerHTML,"updated");
    },
    // 当 vue 应用失效时，且在被销毁后，执行的函数
    unmounted(){
      cole.log(document.getElementById("root").innerHTML,"updated");
    },
    template: '<div>{{message}}</div>'
  });
  ct vm = ('#root');
</script>

</html>

运行结果

image-202106121252499.png

关于模板

参考生命周期图解的7和8，如果有模板就去编译，没有就将所绑定的标签作为模板，因此可以这样写！

代码语言：javascript代码运行次数：0运行复制

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>基础语法</title>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root">
    <!-- 将页面内容写到这里 -->
    <div>{{message}}</div>
  </div>
</body>

<script>
  ct app = ({
    data(){
      return{
        message: 'hello world'
      }
    }
    // 删除这里的模板
    // template: '<div>{{message}}</div>'
  });
  ct vm = ('#root');
</script>

</html>

Vue的生命周期函数图

de01e70e56406cbf99861fa2aa4tplv-ku1fbpfcp-zoom-1.png

Vue全部的生命周期钩子与Vue2比较

我们可以看到beforeCreate和created被setup替换了（但是 Vue 中仍然可以使用，因为 Vue 是向下兼容的，也就是实际使用的是 vue2 的）。其次，钩子命名都增加了on; Vue.x 还新增用于调试的钩子函数onRenderTriggered和onRenderTricked

eadd1ec0ac944951ae245cf41fcetplv-ku1fbpfcp-zoom-1.png本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。原始发表：2025-01-06，如有侵权请联系 cloudcommunity@tencent 删除生命周期语法vue基础入门

#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格

本文地址：http://www.dnpztj.cn/biancheng/1200352.html

本站网友孩子沉迷游戏怎么办	21分钟前发表
没有就将所绑定的标签作为模板
本站网友地铁4号线末班车	30分钟前发表
理解Vue的生命周期函数*生命周期图图片来自官方文档
本站网友合肥出租网	19分钟前发表
Vue语法基础1
本站网友柳州男科医院	15分钟前发表
分享自作者个人站点/博客
本站网友 beats音效	23分钟前发表
且在被销毁前
本站网友广东人	17分钟前发表
"created"); }
本站网友什么羊奶粉最好	1分钟前发表
"updated"); }
本站网友疯狗咬人	0秒前发表
"created"); }

【Vue 从入门到实战进阶式掌握完整知识体系】002