Vue基本语法

  1. 官网:Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

一、示例代码

如下代码:

html 复制代码
<!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. 如下图对应指定
  1. 以下代码
javascript 复制代码
Vue.config.productionTip = false; //阻止启动生产消息

没有Vue.config.productionTip = false这句代码,它会显示你生产模式的消息;

开发环境下,Vue 会提供很多警告来帮你对付常见的错误与陷阱。

而在生产环境下,这些警告语句却没有用,反而会增加应用的体积。

此外,有些警告检查还有一些小的运行时开销,这在生产环境模式下是可以避免的。

作用: 消息提示的环境配置,设置为开发环境或者生产环境

二、 钩子函数

javascript 复制代码
<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博客

相关推荐
安全系统学习1 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖1 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖1 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水2 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐2 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06272 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台2 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121382 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴2 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
AntBlack3 小时前
拖了五个月 ,不当韭菜体验版算是正式发布了
前端·后端·python