Vue.js 基础知识整理
1. Vue 简介
是JavaScript 框架；
简化Dom 操作；
2. Vue 指令【v-xxx】
2.1 v-test
设置标签的文本值
<div id="app">
<h2 v-text="message"></h2>
</div>
// 直接将message 添加到h2 标签内部，会覆盖之前内容
var app = new Vue({
el:"#app",
data:{
message:"Message content"
}
})
// 不覆盖，只插值：插值表达式
<div id="app">
<h2>{{message}}</h2>
</div>
// 表达式，例：字符串拼接
<div id="app">
<h2 v-text="message+'！！！'"></h2>
<h2>{{ message + '！！！'}}</h2>
</div>
字符串、数组、对象取值方式
<div id="app">
{{ message }}
<h2>{{school.name}}{{school.mobile}}</h2>
<ul>
<li>{{address[0]}}</li>
<li>{{address[1]}}</li>
<li>{{address[2]}}</li>
</ul>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "Hello Vue!",
school:{
name:"zhangsan",
mobile:"110"
},
address:["辽宁","大连","庄河"]
}
})
</script>
2.2 v-html
设置标签的innerHTML
<div id="app">
<p v-html="content"></p>
</div>
var app = new Vue({
el:"#app",
data:{
content:"超链接"
}
})
2.3 v-on
为元素绑定事件
<div id="app">
<input type="button" value="事件绑定" v-on:事件名="方法">
<input type="button" value="事件绑定" v-on:click="doIt">
<input type="button" value="事件绑定" v-on:mouseenter="doIt">
<input type="button" value="事件绑定" v-on:dblclick="doIt">
<input type="button" value="事件绑定简写" @click="doIt">
</div>
var app = new Vue({
el:"#app",
methods:{
doIt:function(){
// 逻辑
}
}
})
更改数据
<div id="app">
<h2 @click="changeContent">{{ food }}</h2>
</div>
var app = new Vue({
el:"#app",
data:{
name:"张三"
},
methods:{
changeContent:function(){
this.name += "是个大西瓜"
}
}
})
传递自定义参数，事件修饰符
<div id="app">
<input type="button" @click="doSum(1,2)" />
<input type="text" @keyup.enter="sayHi" />
</div>
var app = new Vue({
el:"#app",
methods:{
doSum:function(p1,p2){
alert(p1 + p2);
},
sayHi:function(){}
}
})
常见修饰符：
https://cn.vuejs.org/v2/api/#v-on
2.4 v-show
根据表达值的真假，切换元素的显示和隐藏（操作样式）
<div id="app">
<!--根据布尔值显示或隐藏-->
<img src="地址" v-show="true">
<!--动态更改布尔值，设置为参数-->
<img src="地址" v-show="isShow">
<!--表达式-->
<img src="地址" v-show="age>18">
</div>
var app = new Vue({
el:"#app",
data:{
isShow:true,
age:16
}
})
2.5 v-if
根据表达式的真假，切换元素的显示和隐藏（操纵dom元素，耗资源）
<div id="app">
<p v-if="true">我是P标签</p>
<p v-if="isShow">我是P标签</p>
<p v-if="表达式">我是P标签</p>
</div>
var app = new Vue({
el:"#app",
data:{
isShow:false
}
})
2.6 v-bind
设置元素的属性（src,title,class）
<div id="app">
<img v-bind:src="imgSrc">
<img v-bind:title="imgtitle+'!!!'">
<!--类名绑定-->
<img class="active">
<!--三元表达式-->
<img v-bind:class="isActive?'active':''">
<!--对象写法（推荐）-->
<img v-bind:class="{active:isActive}">
<!--【v-bin】可以省略-->
<img :class="{active:isActive}">
</div>
var app = new Vue({
el:"#app",
data:{
imgSrc:"图片地址",
imgTitle:"bind学习",
isActive:false
}
})
2.7 v-for
根据数据生成列表结构
<div id="app">
<ul>
<li v-for="item in arr">{{item}}</li>
<li v-for="(item,index) in arr">{{index}}{{item}}</li>
<!--对象数组-->
<li v-for="(item,index) in objArr">{{item.name}}</li>
</ul>
</div>
var app = new Vue({
el:"#app",
data:{
arr:[1,2,3,4,5],
objArr:[
{name:"zhangsan"},
{name:"lisi"}
]
}
})
2.8 v-model
获取和设置表单元素的值（双向数据绑定）
更改message 的值，input 显示内容会被更改；
反之，更改input 内容,message 的值也会被更改
<div id="app">
<input type="button" value="查看" @click="showValue"/>
<input type="text" v-model="message"/>
</div>
var app = new Vue({
el:"#app",
data:{
message:"你好！！"
},
methods:{
showValue:function(){
alert(this.message);
}
}
})
3. 网络应用
Vue 结合网络数据开发应用
3.1 Axios 网络请求库
Axios 网络请求库（内部封装ajax），只发送请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<input type="button" value="get请求" class="get">
<input type="button" value="post请求" class="post">
<script>
document.querySelector(".get").onclick = function(){
axios.get("https://autumnfish.cn/api/joke/list?num=6")
.then(function(response){
console.log(response);
}),function(err){
console.log(err);
}
}
document.querySelector(".post").onclick = function(){
axios.post("https://autumnfish.cn/api/user/reg",
{username:"jack"})
.then(function(response){
console.log(response);
}),function(err){
console.log(err);
}
}
</script>
</body>
</html>
3.2 Axios + Vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="获取笑话" @click="getJoke">
<p>{{joke}}</p>
</div>
<script>
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);
}
}
}
})
</script>
</body>
</html>
3.3 天气预报应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="查询" @click="search" />
<input type="text" v-model="city" placeholder="请输入查询地区" @keyup.enter="search"/>
<ul>
<li v-for="item in weatherlist">
<h1>{{item.date}}</h1>
<h2>{{item.type}}</h2>
{{item.high}} ~ {{item.low}}
</li>
</ul>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
city:"大连",
weatherlist:[],
},
methods:{
search:function(){
var that = this;
axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city)
.then(function(response){
//console.log(response.data)
that.weatherlist = response.data.data.forecast;
}),function(err){
console.log(err);
}
}
}
})
</script>
</body>
</html>
Live server
代码保存时，浏览器自动刷新