<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> //解决闪烁问 ...
随机推荐
- 【scikit-learn基础】--『数据加载』之玩具数据集
机器学习的第一步是准备数据,好的数据能帮助我们加深对机器学习算法的理解. 不管是在学习还是实际工作中,准备数据永远是一个枯燥乏味的步骤.scikit-learn库显然看到了这个痛点,才在它的数据加载子 ...
- 基于Browscap对浏览器工具类优化
项目背景 原有的启动平台公共组件库comm-util的浏览器工具类BrowserUtils是基于UserAgentUtils的,但是该项目最后一个版本发布于 2018/01/24,之至今日23年底,已 ...
- 普冉PY32系列(十三) SPI驱动WS2812全彩LED
目录 普冉PY32系列(一) PY32F0系列32位Cortex M0+ MCU简介 普冉PY32系列(二) Ubuntu GCC Toolchain和VSCode开发环境 普冉PY32系列(三) P ...
- 自定义开发odoo14的统计在线用户人数
在 Odoo 14 中统计在线人数通常涉及到定制开发或者使用特定的模块. 自定义开发:如果没有现成的模块,您可能需要进行一些自定义开发.这通常涉及到扩展Odoo的用户模型,以跟踪用户的登录和登出活动. ...
- springboot整合mybatis步骤思路
/** * springboot整合mybatis步骤思路 * 依赖导入 * 建表 * 实体类 * mapper配置文件 * mapper接口 * yaml配置 * properties配置数据库连接 ...
- 性能集成监控系统exporter+Prometheus+Grafana
Prometheus 是一个时序数据库,存数据 exporter是收集器,来收集被监控的数据,想要监控不同的内容,就使用不同的exporter,这个exporter应该放在被测服务器上,再把expor ...
- Python脚本猜解网站登录密码（带token验证）
目录: 关键代码解释 设置请求头 get_token函数获取token值 完整代码: 运行结果: 上一篇文章:一个简单的Python暴力破解网站登录密码脚本 测试靶机为Pikachu漏洞练习平台暴力破 ...
- servlet怎么实现第一个程序和实现下载文件
简单介绍一下servlet是什么:1:Servlet是sun公司提供的一门用于开发动态web资源的技术 2:我们若想用发一个动态web资源,需要完成以下2个步骤: 第一步:1.编写一个Java类,实现 ...
- MyBatis 的缓存处理
作为常见的 ORM 框架,在使用 MyBatis 的过程中可以针对相关的查询进行缓存处理以提高查询的性能.本文将简要介绍一下 MyBatis 中默认的一级缓存和二级缓存,以及自定义缓存的处理 MyBa ...
- 网站优化之favicon.ico
本文于2015年底完成,发布在个人博客网站上. 考虑个人博客因某种原因无法修复,于是在博客园安家,之前发布的文章逐步搬迁过来. 背景 某一天在办公室分析产品首页加载速度时,无意中从Chrome浏览器的 ...