一、说明

上大学前,请的都是前端JavaScript、后端ASP/PHP/JSP、前后端代码混杂;上大学时,请的都是前端Jquery、后端SSH、前后端代码分离通过模板关联;大学出来后,请的都是前端三大框架、后端Spring Boot、前后端分离。

虽说本质的东西没怎么变,但形式上的东西总是得去记,三天两头搞套新轮子反正我个人是挺烦的。

二、安装

2.1 下载到本地并通过<script>标签引入

开发版本下载地址:https://vuejs.org/js/vue.js

生产版本下载地址:https://vuejs.org/js/vue.min.js

所谓开发版本就是没经过压缩的版本、体积比较大,所谓生产版本就是经过压缩的版本;所谓压缩就能写在一行的尽量写在一行。

使用像普通js文件一样使用<script>标签引入即可:

<!-- 使用开发版本 -->
<script src="vue.js"></script>
<!-- 使用生产版本 -->
<script src="vue.min.js"></script>

2.2 使用CDN

使用CDN的好处是js文件不用下载到本地(但个人总感觉没有下载到本地踏实)。以下是官网推荐的CDN国内的我也不清楚哪个好点。

<!-- 学习使用,返回的是最新版本 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 生产使用,可指定版本避免最新版本存在bug影响应用-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

2.3 使用npm安装

npm用于js库的下载,类似于python中的pip。不需要自己去找下载页面然后手动下载还是比较方便的,我们这里使用这种形式。

nodejs带有npm安装npm直接安装nodejs即可:http://nodejs.cn/download/

npm默认仓库比较慢,可使用以下三种方法进行处理:

# 方法一、配置代理。但该方法经常会报npm ERR!  Too many open connections错误
npm config set proxy http://[username:password]@127.0.0.1:1080
npm config set https-proxy http://[username:password]@127.0.0.1:1080
# 删除代理
# npm config delete proxy
# npm config delete https-proxy # 方法二、修改默认仓库。使用淘宝的https://registry.npm.taobao.org
# 所以我们直接把npm仓库改成https://registry.npm.taobao.org,那也和安装cnpm等效
npm config set registry https://registry.npm.taobao.org
# 查看当前所有配置:npm config list
# 只查看当前仓库:npm config get registry # 方法三、使用cnpm。可能某些时候我们不想修改仓库,那我们可以安装cnpm
# cnpm是淘宝发布的npm定制版,定制之处就是在于默认他库设置成淘宝的https://registry.npm.taobao.org
# 注意下面这条命令是指定从https://registry.npm.taobao.org安装cnpm,而不是修改npm的默认仓库
npm install -g cnpm --registry=https://registry.npm.taobao.org

npm带-g参数则把文件下载到npm安装目录的node_modules文件夹下,不带-g参数则把文件下载到当前目录的node_modules文件夹下。

# 我们只需要下载到当前文件夹下,不带-g
npm install vue
# get和post需要axios
npm install axios

三、vue程序编写

3.1 基本程序

在当前目录下创建test1.html写入以下内容:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个vue.js程序</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- {{}}是模板语法,其内是vue.js的内容 -->
<p> {{ vue_message }} </p>
<p> <button v-on:click="changeText">点击改变</button> </p>
</div> <script type = "text/javascript">
var js_message = "Hello Vue!"
// 注意new Vue()本质是在实例化对象,其内固定为el/data/methods三个参数不要写其他东西
// 用一个app参数去承接的意义是,如果需要那么可以在js中使用实例中的变量或方法,如app.changeTest()
var app = new Vue({
// el元素限定此方法内的元素作用的范围
// 这里#app表示只作用于id为app的节点及其子孙节点
el: '#app',
// data 区域存放变量,所有前面{{}}内要用到的变量都要在这里定义
// 此处将message变量赋值为js_message,而js_message被我们赋值为“Hello Vue!”,所以预期初始打开文件时显示的是“Hello Vue!”
data: {
vue_message: js_message
},
// methos区域存放函数,所有前面{{}}内或者vue语句用到的方法都要在这里定义
methods: {
changeText: function (event) {
this.vue_message = "Hello Vue Click!"
}
} })
</script>
</body>
</html>

初始访问页面如下:

点击按钮后如下,说明定义的vue变量和方法都已生效:

3.2 get和post请求

上面的程序交互逻辑只是在前端页面内进行处理,下面在此基础上我们这里实现一个从restful服务端获取结果并展示的vue页面。

服务端python实现可参考链接:https://www.cnblogs.com/lsdb/p/9774307.html

服务端java实现可参考链接:https://www.cnblogs.com/lsdb/p/9783435.html

另外如果和我这里一样html和api不同域,那么要处理跨域请求问题,不然浏览器会拒绝解析服务器返响应(Django可参考链接):

已拦截跨源请求:同源策略禁止读取位于 http://127.0.0.1:8000/test/ 的远程资源。(原因:CORS 头缺少 'Access-Control-Allow-Origin')。

(本质就是给服务器响应加上Access-Control-Allow-Origin头。又不是禁止访问服务器也不是别人服务器不回你,一定要服务器加个头你才处理响应没想清楚这是什么孤儿道理)

api接口get和post请求返回结果如下:

修改后页面代码如下,说明见注释:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个vue.js程序</title>
<script src="node_modules\vue\dist\vue.min.js"></script>
<!-- get/post新加处一。get/post需要使用axios,在某些教程可以看到使用vue-resource,但vue-resource已经不更新了-->
<script src="node_modules\axios\dist\axios.min.js"></script>
</head>
<body>
<div id="app">
<div id="sectionMsg" style="margin-top:20px">
<!-- {{}}是模板语法,其内是vue.js的内容 -->
<p> 当前值:{{ vue_count }} </p>
<button v-on:click="addOne">加一</button>
</div> <!-- get/post新加处二。get请求页面,v-for是vue的for循环语句 -->
<div id="sectionGet" style="margin-top:20px">
<li v-for="record in getResultRecords">
{{record.id}}-{{ record.username }}-{{record.password}}
</li>
<input type="button" name="getButton" @click="getQueryRecords()" value="GET查询">
</div> <!-- get/post新加处三。post请求页面,v-if是vue的条件判断语句 -->
<div id="sectionPost" style="margin-top:20px">
<input type="text" ref="userID" placeholder="输入用户id进行查询"/>
<div v-if="postResultRecord != ''">{{postResultRecord.username}}-{{postResultRecord.password}}</div>
<div v-else></div>
<input type="button" @click="postQueryRecords()" name="postButton" value="POST查询" />
</div>
</div> <script type = "text/javascript">
var js_count = 0
// 注意new Vue()本质是在实例化对象,其内固定为el/data/methods三个参数不要写其他东西
// 用一个app参数去承接的意义是,如果需要那么可以在js中使用实例中的变量或方法,如app.changeTest()
var app = new Vue({
// el元素限定此方法内的元素作用的范围
// 这里#app表示只作用于id为app的节点及其子孙节点
el: '#app',
// data 区域存放变量,所有前面{{}}内要用到的变量都要在这里定义
// 此处将message变量赋值为js_message,而js_message被我们赋值为“Hello Vue!”,所以预期初始打开文件时显示的是“Hello Vue!”
data: {
vue_count: js_count,
// get/post新加处四。新加getResultRecords和postResultRecord变量,用于接收get和post返回结果,初始值赋空
getResultRecords: '',
postResultRecord: '',
},
// methods区域存放函数,所有前面{{}}内或者vue语句用到的方法都要在这里定义
methods: {
addOne: function (event) {
this.vue_count += 1;
},
// get/post新加处五。新加一个get请求,get填请求的地址、then是响应后处理、catch是异常捕获
getQueryRecords: function(event){
axios
.get('http://127.0.0.1:8000/test/')
.then(response => (this.getResultRecords = response.data))
.catch(error => (this.vue_count = error));
},
// get/post新加处六。新加一个post请求,post填请求的地址+参数、then是响应后处理、catch是异常捕获
postQueryRecords: function(event){
axios
// 通过ref方式获取输入控件的值。当然也可以用原生javascript的document.getElementById("userID").value之类的方式获取
.post('http://127.0.0.1:8000/test/',{userid:this.$refs.userID.value})
.then(response => (this.postResultRecord = response.data[0]))
.catch(error => (this.vue_count = error));
},
}
})
</script>
</body>
</html>

初始访问页面如下:

各按钮分别点击后页面如下,可见get和post请求都已成功:

参考:

https://www.jianshu.com/p/24945ee1ec05

https://blog.csdn.net/caideb/article/details/81449156

http://www.runoob.com/vue2/vue-tutorial.html

https://cn.vuejs.org/v2/guide/installation.html

Vue.js安装使用教程的更多相关文章

  1. 【vue】vue.js安装教程/vue项目搭建

    前提:已安装nodejs——npm  (备注教程  “物理安装”  ) 第一步:建了一个managerSys文件夹,用于保存项目 第二步:从cmd进入该文件夹,之后开始安装vue.js相关 1)在该项 ...

  2. (私人收藏)Vue.js手册及教程

    (私人收藏)Vue.js手册及教程 https://pan.baidu.com/s/1XG1XdbbdBQm7cyhQKUIrRQ5lrt Vue.js手册及教程 Vue.js 教程 Vue.js 安 ...

  3. 1.1 vue.js devtools使用教程

    1. vue.js devtools使用教程

  4. 01: vue.js安装

    1.1 vue.js安装与基本使用 官网:https://cn.vuejs.org/ 1.使用之前,我们先来掌握3个东西是用来干什么的 1. npm: Nodejs下的包管理器. 2. webpack ...

  5. vue.js安装教程

    vue.js环境搭建 1.下载node.js 网址:https://nodejs.org/en/ 版本:v10.16.3 2.安装node.js Node.js下载如下所示: 检查nodejs是否安装 ...

  6. Vue.js 安装

    注意:vue.js 不支持 IE8 及其以下版本,学习前请保证你的浏览器兼容 ECMAScript 5,可访问 http://caniuse.com/#feat=es5 查看支持 ECMAScript ...

  7. Vue.js安装

    环境 操作系统:window7 虚拟机:centos7 vue.js: 2.8 安装nodejs 参考我得文章: http://blog.csdn.net/u013066244/article/det ...

  8. vue.js 安装过程(转载)

      一.简介 Vue.js 是什么 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核 ...

  9. vue.js安装过程(npm安装)

    一.开发环境 vue推荐开发环境: Node.js: JavaScript运行环境(runtime),不同系统直接运行各种编程语言 npm: Nodejs下的包管理器. webpack: 它主要的用途 ...

随机推荐

  1. ARMLCD屏调试2--ili9325驱动编写

    2011-06-24 21:57:09 一,读id--完成 二,自己写了驱动--完成 三,调试LCD屏驱动--完成 一         读id,不过过程还有点曲折. 因为之前写命令写数据的时序是根据i ...

  2. 遍历tr通过name获取对应值用作判断或者赋值

    $("#table tr:gt(0)").each(function(i){ var bidPrice = $("input[name='bidPrice2s']&quo ...

  3. 解决 flannel.1 interface state DOWN

    ip a 查看结果  flannel.1 i state UNKNOWN 并且五 inet 发现日志 device (flannel.1): state change: unmanaged -> ...

  4. JavaScript之事件的绑定与移除

    对于事件的绑定的方法有多种多样,但是在解除绑定事件的时候,就要注意使用的是那种绑定事件的方法,因为不同的绑定方法所对应的解除事件是不同的. 1. 原始写法 1.1 绑定事件:对象.事件=事件处理函数 ...

  5. nodejs笔记之流(stream)

    nodejs的stream有四种流类型: 可读:Readable可写:Writable可读可写:Duplex操作被写入数据,然后读出结果:Transform常用事件:data:有数据可读时触发end: ...

  6. post请求中body数据类型

    1.application/json:json格式,如下: {"input1":"xxx","input2":"ooo" ...

  7. TeamViewer连CentOS

    用过TeamViewer的人都会感叹其远程连接的强大,昨天有将Windows和CentOS在同一网段内互相连接打通了,今天在外网环境下突然想到是否可以用TeamViewer在外网环境下连到CentOS ...

  8. linux随

    Linux 1991芬兰大学生linus 安全 开源 免费 可靠 (堡垒机)(跳转机) 多用户 多任务 处理并发及速度比windows好很多 命令:ifconfig pwd ls -a -l -t(时 ...

  9. linux查看服务器并发连接数

    netstat -n | awk '/^tcp/ {++S[$NF]} END {for(key in S) print key,"\t",S[key]}'

  10. 【读书笔记】使用JMeter创建数据库(Mysql)测试

    读书笔记:<零成本实现Web性能测试>第4章 记得某天按照虫师博客的写的,折腾后成功了.今天又忘记了... 折腾后又成功了,赶紧记录下... 原文:http://www.cnblogs.c ...