Vue.js
Vue.js
简介
Vue (读音 /vju?/，类似于 view) 是一套用于构建用户界面的渐进式框架。
- JavaScript框架：相比于库，框架更为强大，但是用框架必须遵守其规则。
- 简化DOM操作：对Vue对DOM元素有特殊语法修饰，直接用就完了、
- 响应式数据驱动：数据改变页面同步更新。
官方文档
Vue作者是中国人，文档对中文支持还是不错的：
-
v2.x
-
v3.x
Vue基础
起步
-
导入开发版本的Vue
-
开发环境版本，包含了有帮助的命令行警告
-
生产环境版本，优化了尺寸和速度
-
-
创建Vue实例对象
-
使用模板语法把数据渲染到页面上
- 声明式渲染
- 插值表达式
第一个Vue程序
Document
{{message}}
插值表达式
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：
{{数据名}}
el 挂载点
通过CSS选择器设置Vue示例管理的元素，被命中元素内部被两个大括号修饰的部分会被Vue实例中同名数据替换。
作用范围
作用范围只在Vue实例命中的元素内部生效，且可以对多个挂载点生效，嵌套元素内的挂载点也生效。
{{message}}
{{message}}
{{message}}
{{message}}
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
可使用的选择器
id选择器、class选择器和标签选择器均可使用，需要注意的是，使用标签选择器时如果存在多个相同的标签，则只会匹配第一个。推荐使用id选择器。
{{message}}
{{message}}
var app = new Vue({
// el: '#app', // id选择器可使用
// el:".app", // class选择器可使用
el:"div",
data: {
message: 'Hello Vue!'
}
})
可设置的DOM元素
只支持双标签(即有开头有结尾的标签)，不支持单标签(压根没地写挂载点)。注意，不支持html标签和body标签
{{message}}
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
data数据对象
Vue中用到的数据定义在data中，不仅支持字符串，也支持其他复杂数据类型，遵循js语法即可。
{{message}}
{{map.a}} {{map.b}}
- {{array[0]}}
- {{array[1]}}
- {{array[2]}}
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
map:{
a:"a_value",
b:"b_value"
},
array:["1","2","3"]
}
})
Vue指令
指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
v-text
用于将数据填充到标签中，但是是整体替换。
原本内容
原本内容
{{message1 + '!'}}原本内容
var app = new Vue({
el: '#app',
data: {
message1: 'Hello Vue!',
message2: 'Hello World!'
}
})
v-html
也可以实现v-text功能，但也可以插入并解析HTML代码
原本内容
原本内容
{{content2}}原本内容
var app = new Vue({
el: '#app',
data: {
content1: 'Hello Vue!',
content2: '百度一下，你就知道'
}
})
v-on
插入事件，绑定方法写在 methods 中，可以实现数据修改。
{{message}}
var app = new Vue({
el: '#app',
data:{
message:"我"
},
methods:{
fun1:function(){
alert("Hello");
},
fun2:function(){
alert("World!");
},
change:function(p1){
this.message += p1;
}
}
})
v-show
根据表达式真假切换元素显示和隐藏，操纵的是样式。
var app = new Vue({
el: '#app',
data:{
open:false,
close:true,
age:17
},
methods:{
LED:function(){
this.open=!this.open;
this.close=!this.close;
},
AgeUp:function(){
this.age++;
}
}
})
------》
v-if
根据表达式真假切换元素显示和隐藏，操纵的是DOM元素。
如上例，实现效果相同，但实现方式不同：
---------》
v-bind
用于绑定元素属性
![]()
![]()
var app = new Vue({
el: '#app',
data:{
imgSrc:"../images/FBI_Warning.jpg"
}
})
v-for
Vue界的 for-each 循环。
-
{{index+1}}array:{{item}}
var app = new Vue({
el: '#app',
data:{
array:["a","b","c"]
}
})
v-model
获取和设置表单元素的值(双向数据绑定)
{{message}}
var app = new Vue({
el: '#app',
data: {
message: "我"
},
methods: {
GetMessage: function () {
alert(this.message);
}
}
})
------》
axios
常用网络请求库
导入
基础语法
-
get
axios.get(地址?查询字符) //查询字符格式为 key=value&key2=value2&key······ -
post
axios.post(地址,参数对象) //参数对象格式为 {key=value, key2=value2, key······} -
then
axios.get(地址?查询字符).then(function(response){},function(err){}); axios.post(地址,参数对象).then(function(response){},function(err){});
示例：
/*
接口1：随机笑话
请求地址：https://autumnfish.cn/api/joke/list
请求方法：get
请求参数：num(笑话条数，数字)
响应内容：随机笑话
*/
document.querySelector(".get").onclick = function(){
axios.get("https://autumnfish.cn/api/joke/list?num=2")
.then(function(response){
console.log(response);
},function(err){
console.log(err);
})
}
/*
接口2：用户注册
请求地址：https://autumnfish.cn/api/user/reg
请求方法：post
请求参数：username(用户名，字符串)
响应内容：注册成功或失败
*/
document.querySelector(".post").onclick = function(){
axios.post("https://autumnfish.cn/api/user/reg",{username:"Kiang"})
.then(function(response){
console.log(response);
},function(err){
console.log(err);
})
}
Vue + axios
使用Vue与axios结合比使用原生语法要更好记、简便。
{{joke}}
var app = new Vue({
el:"#app",
data:{
joke:"随机笑话"
},
methods:{
getJoke:function(){
var that = this;
axios.get("https://autumnfish.cn/api/joke")
.then(function(response){
that.joke = response.data;
},function(err){
console.log(err);
})
}
}
})
---》
Vue组件
非单文件组件
test
Vue CLI
简介
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，使用Vue脚手架之后我们开发的页面将是一个完整的系统，它提供：
- 通过
vue-cli实现的交互式的项目脚手架，通过执行命令方式即可下载相关依赖 - 通过
@vue/cli+@vue/cli-service-global实现的零配置原型开发。 - 一个运行时依赖 (
@vue/cli-service)，该依赖：- 可升级；
- 基于 webpack 构建，并带有合理的默认配置；
- 可以通过项目内的配置文件进行配置；
- 可以通过插件进行扩展。
- 一个丰富的官方插件集合，集成了前端生态中最好的工具。
- 一套完全图形化的创建和管理 Vue.js 项目的用户界面。
安装
-
环境准备：需要安装配置 node.js
-
配置淘宝镜像
npm config set registry https://registry.npm.taobao.org验证
npm config get registry -
配置下载位置
npm config set cache "D:\npm\cache" npm config set prefix "D:\npm\global"验证
npm config ls
-
-
执行安装命令
npm install -g vue-cli -
创建第一个Vue脚手架项目