Vue基础入门(2) Vue.js下载与安装

下载与安装Vue.js
Vue.js的官网： https://cn.vuejs.org/

如果在项目中使用Vue.js框架，有两种方式：一是在页面中使用Script的方式直接引入，可以在官网下载Vue.js的源码，也可以使用CDN的方式引入；二是使用NPM的方式构建Vue项目，或者是使用Vue-cli脚手架创建项目。

本节我们先通过Script标签在网页引入Vue.js的方式来学习Vue实例，因为这种方法上手简单，适合初学者学习Vue的基础语法入门。在后面的教程中，会单独介绍使用NPM和Vue-cli的方式搭建Vue项目。

本地引入

我们可以访问Vue.js的官网下载，地址：https://vuejs.org/js/vue.min.js

也可以通过访问GitHub下载，地址：https://github.com/vuejs/vue

在HTML页面中使用script标签引入：

<script src="js/vue.js"></script>

使用CDN引入

国内常用的CDN公共库有：

腾讯网静态资源公共库： https://libs.qq.com/

字节跳动静态资源公共库： http://cdn.bytedance.com/

BootCDN服务： https://www.bootcdn.cn/

又拍云JS库CDN服务： https://upcdn.b0.upaiyun.com/

我们以BootCDN为例，打开BootCDN网站，搜索Vue：

在搜索结果列表中选择Vue，进入Vue的CDN库列表，选择对应的版本，点击复制链接，或者是复制

<script src="https://cdn.bootcss.com/vue/2.6.11/vue.common.js"></script>

创建第一个Vue实例
声明式渲染

Vue.js的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM中。

HTML代码：

<div id="app">{{ message }}
</div>

JS代码：

var app = new Vue({el: '#app',data: {message: 'Hello Vue!'}
})

完整示例代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Vue实例</title></head><body><div id="app">{{ message }}</div><script src="js/vue.min.js"></script><script>var app = new Vue({el: '#app',data: {message: "Hello Vue"}})</script></body>
</html>

输出结果：

Hello Vue

通过上面的代码，我们已经成功的创建了第一个Vue应用。上面代码中JS的数据和DOM已经建立了关联，所有的东西都是响应式的。怎么确认数据是响应式的呢？我们可以打开浏览器，按F12进入开发者控制台（Console），修改 app.message 的值，可以看到页面中的数据也做了响应的更新，效果如下图：

每个Vue应用都是通过用 Vue() 函数创建一个新的Vue实例开始的：

var vm = new Vue({// 选项
})

虽然没有完全遵循MVVM模型，但是Vue的设计也受到了它的启发，因此在文档中经常会使用 vm （ViewModel的缩写）这个变量名表示Vue实例。

Vue基础入门(2) Vue.js下载与安装相关推荐

vue 基础入门：vue 的调试工具
1. 安装 vue-devtools 调试工具 vue 官方提供的 vue-devtools 调试工具,能够方便开发者对 vue 项目进行调试与开发. Chrome 浏览器在线安装 vue-devto ...
Vue基础入门(二）
Vue基础入门目录一.过滤器vue3已经删除!!!!!! 1.什么是过滤器(Filters) 2.代码展示 3.私有过滤器和全局过滤器 4.过滤器的注意点 5.优化时间代码示例二.watch 侦听 ...
Vue.js下载及安装
Vue.js下载及安装 Vue.js下载官网下载:https://cn.vuejs.org/v2/guide/installation.html Vue.js引用 //引入下载的Vue.js: &l ...
IPFS入门操作教程(一):下载并安装IPFS
IPFS入门操作教程(一):下载并安装IPFS 文章目录学习目标一.IPFS是什么? 二.下载安装IPFS 1.下载IPFS可执行文件压缩包 2.解压IPFS压缩包第三步:设置ipfs可执行文件 ...
rmd中无法打开链结r_从零开始入门R语言—Rstudio下载与安装
注意:在安装Rstudio之前一定要现状R软件. 安装方法: QQ ZHOU:从零开始入门R语言-软件下载及安装zhuanlan.zhihu.com 一.下载安装RStudio 上节我们已经下载了R ...
node.js 下载、安装以及淘宝镜像的下载、安装
1.Node.js下载,安装 1.打开node.js官网 https://nodejs.org/en/ 点击下载64位node.js; 如果想要安装不同版本 https://nodejs.or ...
Vue(三)：vue基础入门
目录一.侦听器 1.1 什么是watch侦听器 1.2 方法格式的侦听器的应用--判断用户名是否被占用 1.3 immediate属性-对象格式的侦听器 1.4 deep属性-对象格式的侦听器二 ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础：使用Vue.js 来画博客首页（一）...
缘起书说前两篇文章< 十五 ║ Vue前篇:JS对象&字面量&this>和 < 十六 ║ Vue前篇:ES6初体验 & 模块化编程>,已经通过对js面 ...
vue的基础知识-vue基础入门
vue的使用分享 1. Vue简介 2.Vue常用指令 3. V-router路由系统 4. Vue生命周期 1. Vue简介工欲善其事,必先利其器 1.1 Vue是什么? Vue (读音 /vju ...

Vue基础入门(2) Vue.js下载与安装

Vue基础入门(2) Vue.js下载与安装相关推荐

最新文章

热门文章