Vue基本语法

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博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/16025.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Coppeliasim C++】焊接机械臂仿真

项目思维导图 该项目一共三个demo&#xff1a; 机械臂末端走直线 2. 变位机转台转动 3.机械臂末端多点样条运动 笔记&#xff1a; 基于等级的蚁群系统在3D网格地图中搜索路径的方法: 基于等级的蚁群系统(Hierarchical Ant Colony System,HACS)是一种改进的蚁群优化算法。它在传…

深度学习实战44-Keras框架下实现高中数学题目的智能分类功能应用

大家好,我是微学AI ,今天给大家介绍一下深度学习实战44-Keras框架实现高中数学题目的智能分类功能应用,该功能是基于人工智能技术的创新应用,通过对数学题目进行智能分类,提供个性化的学习辅助和教学支持。该功能的实现可以通过以下步骤:首先,采集大量的高中数学题目数据…

一百三十八、ClickHouse——使用clickhouse-backup备份ClickHouse库表

一、目标 使用clickhouse-backup在本地全库备份ClickHouse的数据库 二、前提 已经安装好clickhouse-backup 注意&#xff1a;由于之前同事已经按照好clickhouse-backup&#xff0c;所以我就没有安装 如有需要请参考其他人的博客安装一下&#xff0c;下面是我认为比较好的一…

分解质因子,将一个不小于2的整数分解质因数,例如,输入90,则输出:90=2*3*3*5

假设一个不小于2的整数n&#xff0c;对从2开始的自然数k&#xff0c;这个试探它是否是整数n的一个因子&#xff0c;如果是&#xff0c;则输出该因子&#xff0c;并将n/k的结果赋给n&#xff08;接下来只需要对n除以已经找到的因子之后的结果继续找因子&#xff09;。如果n的值不…

基于 STM32+FPGA 的通用工业控制器设计(一)系统方案设计

本章首先介绍了现有 PLC 系统的概况&#xff0c;然后提出了本文设计的通用工业控制器的 整体方案架构&#xff0c;分析了硬件和软件上需要实现的功能&#xff0c;最后对各部分功能进行分析并提 出具体的实现方案。 2.1 PLC 系统简介 可编程逻辑控制器&#xff08; Progra…

30天p小白学python-第三天(面向对象编程基础-进阶)

面向对象编程基础 活在当下的程序员应该都听过"面向对象编程"一词,也经常有人问能不能用一句话解释下什么是"面向对象编程",我们先来看看比较正式的说法。 "把一组数据结构和处理它们的方法组成对象(object),把相同行为的对象归纳为类(class)…

eventBus使用遇到的坑

**问题&#xff1a;**通过eventBus传递的参数&#xff0c;在子组件的methods中无法通过this.使用。 **思路&#xff1a;**考虑组件方法的执行顺序&#xff08;vue生命周期执行顺序&#xff09; **解决办法&#xff1a;**在传递参数的组件外 this.$nextTick this.$nextTick(() …

Spring 类型安全的配置属性

使用 Value("${property}") 注解来注入配置属性有时会很麻烦&#xff0c;特别是当你要处理多个属性或你的数据是分层的。 Spring Boot提供了一种处理属性的替代方法&#xff0c;让强类型的Bean管理和验证你的应用程序的配置。 另请参见Value 和类型安全配置属性之间的…

Android 面试题 避免OOM(内存优化)三

&#x1f525; OOM介绍&#xff08;out of memory 内存溢出&#xff09;&#x1f525; Android和java中都会出现由于不良代码引起的内存泄露&#xff0c;为了使Android应用程序能够快速高效的运行&#xff0c;Android每个应用程序都会有专门Dalvik虚拟机实例来运行&#xff0c;…

【机器学习】机器学习中的“本体”概念

一、说明 在机器学习中&#xff0c;本体越来越多地用于提供基于相似性分析和场景知识的 ML 模型。 在传统的基于标签的定义中&#xff0c;对象往往是孤立的&#xff0c;可扩展性差&#xff0c;存在重复的可能性&#xff0c;对象之间的关系无法体现。在基于本体的定义中&#xf…

4_Apollo4BlueLite电源管理

1.Cortex-M4 Power Modes Apollo4BlueLite支持以下4种功耗模式&#xff1a; ▪ High Performance Active (not a differentiated power mode for the Cortex-M4) ▪ Active ▪ Sleep ▪ Deep Sleep &#xff08;1&#xff09;High Performance Mode 高性能模式不是arm定…

【深度学习】以图搜索- 2021sota repVgg来抽取向量 + facebook的faiss的做特征检索, 从环境搭建到运行案例从0到1

文章目录 前言安装小试牛刀用repVgg抽取向量构建Faiss索引进行相似性搜索本项目延伸其它项目拓展总结 前言 Faiss的全称是Facebook AI Similarity Search。 这是一个开源库&#xff0c;针对高维空间中的海量数据&#xff0c;提供了高效且可靠的检索方法。 暴力检索耗时巨大&a…

最全的3D动画软件介绍来了!良心总结9款3D动画制作必备软件

现在&#xff0c;市面上流行着的3D动画软件如此之多&#xff0c;以至于很难敲定到底哪一款更适合自己或自己的团队。本篇文章带来了一些热门的、被视为行业标准的3D动画软件的介绍&#xff0c;帮助您更好地做出选择。 不仅如此&#xff0c;您还能从文章中了解到在数字内容创建…

html/javascript-表格的创建和使用

html中表格的创建和使用 一 摘要二 使用html table标签创建表格&#xff08;在html文件中&#xff09;三 使用javascript创建表格&#xff08;在js文件中&#xff09;四 表格属性的设置&#xff1a;4.1. 右边框的设置&#xff1a;4.2. 只给表格单元格加右边框4.3. 动态设置右边…

费舍尔线性分辩分析(Fisher‘s Linear Discriminant Analysis, FLDA)

费舍尔线性分辩分析(Fisher’s Linear Discriminant Analysis, FLDA) 目录 费舍尔线性分辩分析(Fishers Linear Discriminant Analysis, FLDA)1. 问题描述2. 二分类情况3. 多分类情况4. 代码实现4.1 二分类情况4.2 多分类情况 5. 参考资料 1. 问题描述 为解决两个或多个类别的…

PS - Photoshop 抠图与剪贴蒙版功能与 Stable Diffusion 重绘

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/131978632 Photoshop 的剪贴蒙版是一种将上层图层的内容限制在下层图层的形状范围内的方法&#xff0c;也就是说&#xff0c;上层图层只能在下层图…

【备战csp-j】 csp常考题型详解(1)

一.计算机基础知识 1. 微型计算机的问世是由于( ) 的出现。 A.中小规模集成电路 B.晶体管电路 C.(超)大规模集成电路 D.电子管电路 答案&#xff1a; C 解析&#xff1a; 年代 元件 第一代 1946&#xff0d;1958 电子管 第二代 1959&#xff0d;1964 晶体管 …

32.选择器

选择器 html部分 <div class"toggle-container"><input type"checkbox" id"good" class"toggle"><label for"good" class"label"><div class"ball"></div></label&…

云原生训练营课程大纲

第一部分&#xff1a;Go 语****言基础 模块一&#xff1a;Go 语言特性 教学目标&#xff1a; 理解 Go 语言基本语法 理解 Go 语言常用数据类型 理解 Go 语言常用小技巧 深入理解 Go 语言的多线程编程 针对的用户痛点&#xff1a; 云原生从业者因为未熟练掌握 Go 语言&#…

bash sh 和 ./ 的区别

bash&#xff1a; 这是Bash shell的解释器。当你使用bash script.sh运行脚本时&#xff0c;你是在告诉系统使用Bash解释器来执行脚本。这意味着脚本中的所有Bash特性都可以使用。 sh&#xff1a; 这是Bourne shell的解释器。当你使用sh script.sh运行脚本时&#xff0c;你是在告…