1. 官网: Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)
一、示例代码
如下代码:
<!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>初识vue</title><!-- 引入Vue --><script src="../js/vue.js"></script>
</head>
<body><!-- 准备好一个容器 --><div id="root"><h1>Hello!{{name}}!</h1></div><script>Vue.config.productionTip = false // 阻止vue在启动时生成生产提示new Vue({el:'#root', //el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串data:{ //data用于存储数据,数据共el所指定的容器去使用name:'JOJO'}})</script>
</body>
</html>
具体可以看注解
1. 如下图对应指定
2. 以下代码
Vue.config.productionTip = false; //阻止启动生产消息
没有Vue.config.productionTip = false这句代码,它会显示你生产模式的消息;
开发环境下,Vue 会提供很多警告来帮你对付常见的错误与陷阱。
而在生产环境下,这些警告语句却没有用,反而会增加应用的体积。
此外,有些警告检查还有一些小的运行时开销,这在生产环境模式下是可以避免的。
作用: 消息提示的环境配置,设置为开发环境或者生产环境
二、 钩子函数
<script type="text/javascript">var app = new Vue({el:"#app",//钩子函数created,该方法在页面显示之后,自动执行created() {console.log("created...");}});
</script>
Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期
然而当第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子
如上代码就示例了函数created()
该函数中的代码会在页面加载前渲染
具体学习如下文章:VUE 生命周期函数 beforeCreate、created、beforeMount、mounted_古雅学长的博客-CSDN博客