<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> //解决闪烁问 ...
随机推荐
- SpringBoot Seata 死锁问题排查
现象描述:Spring Boot项目,启动的时候卡住了,一直卡在那里不动,没有报错,也没有日志输出 但是,奇怪的是,本地可以正常启动 好吧,姑且先不深究为什么本地可以启动而部署到服务器上就无法启动的问 ...
- jvm的jshell，学生的工具
jshell 在我眼里,只能作为学校教学的一个玩具,事实上官方也做了解释,以下是官方的解释: 在学习编程语言时,即时反馈很重要,并且 它的 API.学校引用远离Java的首要原因 教学语言是其他语言 ...
- 寻找市场中的Alpha-WorldQuant功能的实现（下）
导语:本文介绍Alpha的相关基本概念,以及寻找和检验Alpha的主要流程和方法.在上篇中我们梳理了 WorldQuant经典读本FindingAlphas的概要以及WebSim的使用.作为下篇,我们 ...
- 组合式api-子父组件之间通信props和emit
整体来说和vue2也是比较相似的. 使用props传递数据到子组件 父组件给定数据. 子组件中使用defineProps来接收父组件传递的数据. 子组件emit触发事件通知父组件 思想和vue2完全一 ...
- Linux磁盘专题-常用分区命令
划分分区 fdisk 专门用于划分MBR类型的分区.(mbr分区类型在linx中也叫msdos) 注意:fdisk在centos7上已经可以用来划分gpt类型的分区. 详细不说了,N年之前学习过 gd ...
- 为什么许多数字孪生产品开始了GIS融合的尝试？
随着数字孪生技术的发展,越来越多的产品意识到要实现数字孪生的最大价值,需要考虑多个维度的数据,包括空间信息.地理位置.环境条件等.因此,许多数字孪生产品开始了与GIS系统的融合尝试,以进一步提升其功能 ...
- 【Python】【OpenCV】定位条形码（二）moments和HuMoments
根据上一篇博客可知,单纯的通过求取最大面积而进行定位的局限性,因此我们接下来将通过cv2.moments()和cv2.HuMoments()这两个方法来在更复杂的环境中去找到我们的目标区域. cv2. ...
- Javascript Ajax总结——FormData类型
XMLHttpRequest1级只是把已有的XHR对象的实现细节描述出来.XMLHttpRequest2级进一步发展了XHR.FormData类型FormData类型,为序列化表单以及创建以表单格式相 ...
- python自动化测试相关资料
java神功: https://yuedu.baidu.com/ebook/10f4bf7530126edb6f1aff00bed5b9f3f80f7212 selenium书:https:// ...
- Pikachu漏洞靶场 （SSRF服务端请求伪造）
SSRF(Server-Side Request Forgery:服务器端请求伪造) curl 点击 累了吧,来读一首诗吧 url是这样的: http://192.168.171.30/pikachu ...