<vue初体验> 基础知识 1、vue的引入和使用体验
系列导航
注：本系列开发工具都是用的是HBuilderX.3.2.3
一、代码中如何引入vue
1、直接CDN引入
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
2、下载和引入
开发环境 https://vuejs.org/js/vue.js
生产环境 https://vuejs.org/js/vue.min.js
3、NPM安装
vue的脚手架的时候使用
初体验这里使用第二中的开发环境 https://vuejs.org/js/vue.js
下载方式：https://cn.vuejs.org/v2/guide/installation.html
注：也可以直接打开https://vuejs.org/js/vue.js 把显示的内容拷贝到一个文件中，文件命名为vue.js
二、效果
开始展示 Hello Vuejs 2秒后变成 Hello Word
三、代码结构
四、代码
01-Hello Vuejs.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-Hello Vuejs</title>
</head>
<body> <div id="app">{{message}}</div> <script src="vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
message: 'Hello Vuejs'
},
mounted() {
setTimeout(() => {
this.message = 'Hello World'
}, 2000)
}
})
</script> </body>
</html>
五、代码解释
1、创建Vue对象的时候，传入了一些options：{}
（1）{}中包含了el属性：该属性决定了这个Vue对象挂载到哪一个元素上，我们这里是挂载到了id为app的元素上
（2）{}中包含了data属性：该属性中通常会存储一些数据
这些数据可以是我们直接定义出来的，比如像上面这样。
也可能是来自网络，从服务器加载的。
<vue初体验> 基础知识 1、vue的引入和使用体验的更多相关文章
- Vue框架之基础知识
在没有学习基础知识之前,我们需要下载vue的js文件,在使用vue语法之前引包 <script src='./vue.js'></script> 一.模板语法 模板语法是一种可 ...
- Vue.js 运行环境搭建详解（基于windows的手把手安装教学）及vue、node基础知识普及
Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架——只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动 ...
- Vue开发重点基础知识
1.Vuejs组件 vuejs构建组件使用 Vue.component('componentName',{ /*component*/ }): 这里注意一点,组件要先注册再使用,也就是说: Vue.c ...
- Vue学习计划基础笔记(一) - vue实例
最近又重新看vue的文档了,计划是别人写的,之前看过一次,没有考虑太多,只考虑看懂能用就好.看完之后写过写demo,现在是零实际项目经验的,所以这一次打算细看,算是官方文档的二次产物吧,但是不是全部直 ...
- Android学习之基础知识四-Activity活动6讲（体验Activity的生命周期）
一.体验活动的生命周期的执行 代码组成: 1.三个Java类:MainActivity.java.NormalActivity.java.DialogActivity.java 2.三个布局文件:ac ...
- Vue基础知识简介
基础知识: vue的生命周期: beforeCreate/created.beforeMount/mounted.beforeUpdate/updated.beforeDestory/destorye ...
- Vue.js-08：第八章 - 组件的基础知识
一.前言 在之前的学习中,我们对于 Vue 的一些基础语法进行了简单的了解,通过之前的代码可以清晰的看出,我们在使用 Vue 的整个过程,最终都是在对 Vue 实例进行的一系列操作. 这里就会引出一个 ...
- vue基础知识之vue-resource/axios
Vue基础知识之vue-resource和axios(三) vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...
- Vue基础知识之vue-resource和axios
Vue基础知识之vue-resource和axios 原文链接:http://www.cnblogs.com/Juphy/p/7073027.html vue-resource Vue.js是数据驱 ...
- vue2.0基础知识，及webpack中vue的使用
## 基础指令 ## [v-cloak]{ Display:none; } <p v-cloak>xx{{msg}}xx</p> //解决闪烁问 ...
随机推荐
- js实现关闭子窗口时刷新父窗口
当我们在子窗口中关闭窗口时,可以使用JavaScript来刷新父窗口.下面是一个详细的介绍: 1. 获取父窗口对象: - 在子窗口中,可以使用`window.parent`属性获取父窗口的全局对象. ...
- 记一次逆向分析解密还原Class文件
前言 前阵子我的一位朋友发来一份代码让我帮忙看看.具体就是所有的jsp文件内容和大小都一样,漏洞挖掘无从下手.经过分析发现所有的Class都使用了自定义的加密工具加密,经过逆向分析,顺利解密,因而有了 ...
- Aop限流实现解决方案
01.限流 在业务场景中,为了限制某些业务的并发,造成接口的压力,需要增加限流功能. 02.限流的成熟解决方案 guava (漏斗算法 + 令牌算法) (单机限流) redis + lua + ip ...
- catcat-new【目录穿透+特殊文件】
catcat-new[目录穿透+特殊文件] 题目界面 点击任何一只猫猫,发现路径泄露: 解题步骤 测试目录遍历漏洞 路径: ?file=../../../../etc/passwd 成功读取到pass ...
- 万界星空科技服装行业mes解决方案
服装行业MES特色 企业透过全球供应链网络掌握实时的订单进度信息来实现电子商务排除生产现场自动化"孤岛",建立起业务计划层到控制层的桥梁,JIT库存管理与看板管理.精益生产与敏 ...
- CVE-2016-5734 复现
CVE-2016-5734 漏洞简介 phpMyAdmin 4.0.x-4.6.2 远程代码执行漏洞(CVE-2016-5734) phpMyAdmin是一套开源的.基于Web的MySQL数据库管理工 ...
- Next.js 开发指南 初始篇 | Next.js CLI
基础篇.实战篇.源码篇.面试篇四大篇章带你系统掌握 Next.js! 前言 欢迎学习 Next.js!在学习具体的知识点之前,我们先来创建一个 Next.js 项目.创建了可运行的项目,才能在学习 ...
- Java 将PPT转为OFD
本文以Java后端程序代码展示如何实现将PPT幻灯片转成OFD格式.下面是具体步骤. 步骤1:安装PPT库-Spire.Presentation for Java 方法一.通过Maven仓库安装.在p ...
- C++篇：第一章_变量和常量_知识点大全
C++篇为本人学C++时所做笔记(特别是疑难杂点),全是硬货,虽然看着枯燥但会让你收益颇丰,可用作学习C++的一大利器 注意:C++篇为本人手动将Word文档修改成Markdown格式(因为网上修改的 ...
- 云原生批量计算引擎 Volcano社区v1.8.0版本正式发布
本文分享自华为云社区<云原生批量计算引擎 Volcano社区v1.8.0版本正式发布>,作者: 云容器大未来. 北京时间2023年8月17日,Volcano 社区 v1.8.0 版本正式发 ...