<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> //解决闪烁问 ...
随机推荐
- serdes调试常见功能汇总
初始化流程 CORE复位流程 FW手动加载 FW版本自生成(可选) lane复位流程 TX复位流程 RX复位流程 TX,RX使能,disable(可选)关闭数据通道 速率频点配置,CPU模式配置,PL ...
- Java使用线程池和缓存提高接口QPS
1.什么是QPS? QPS:Queries Per Second意思是"每秒查询率",是一台服务器每秒可以相应的查询次数,是对一个特定的查询服务器在规定时间内所处理流量多少的衡量标 ...
- .net 温故知新【16】：Asp.Net Core WebAPI 筛选器
一.筛选器 通过使用筛选器可在请求处理管道中的特定阶段之前或之后运行代码. 这即是我们经常听到的面向切面编程AOP(Aspect Oriented Programming)技术,AOP通过预编译方式和 ...
- CH395+EMQX实现MQTT应用(Windows系统)
目录: 1.MQTT协议 1.1简介 1.2特性 1.3实现方式 1.4数据包结构 2.EMQX具体操作步骤 3.代码说明 4.工程链接 MQTT协议 1.MQTT简介 MQTT是一种基于 发布/订阅 ...
- ES索引误删的名场面
ES索引误删的名场面 慌了3秒,果断发个邮件: 01 最近,在版本发布时: ES线上未备份的索引,被当场「误删」了: 对于新手来说,妥妥的社死名场面: 对于老手来说,慌它3秒表示一下态度: 当时的情况 ...
- 江西财经大学第一届程序设计竞赛 G题小Q的口袋校园
题目链接:https://www.nowcoder.com/acm/contest/115/G 解题思路:题解就一份代码,贪心的思想.先按开始时间进行排序. 然后不断贪心获得happy[ j ]的最大 ...
- django+drf开发一些个人的标准化
最近在改造一下个人的开发风格.特分享一下. 子应用我一般放在apps中,每个不同模块的子应用起不同的名字.startapp后自己移动一下,记得修改一下Appconfig中的name即可. 子应用中创建 ...
- java方法的定义与执行
java中的方法在类中定义. 定义方法格式: 访问修饰符 返回值类型 方法名(参数列表){ ... 执行内容 ... return 返回值; } 访问修饰符:表示方法在哪里能被 ...
- MD5加密算法工具类创建
直接上代码 /** * 通用方法工具类 */ public class CrowdUtil { /** * 对明文字符串进行MD5加密 * @param source * @return */ pub ...
- BFS（三）单词接龙 ⅱ
对应 126. 单词接龙 II 问题描述 按字典 wordList 完成从单词 beginWord 到单词 endWord 转化,一个表示此过程的 转换序列 是形式上像 beginWord -> ...