Vue基础知识
基础概念
在 HTML 中导入学习环境的在线 Vue 支持
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
在 Vue.js 2.x版本中
el为挂载点，指定修饰对象，#对应的是id选择器，注意不能挂载到body标签data是数据，仅在挂载点内部有效，可以写复杂类型，遵守js规则，替换差值表达式{{}}中的变量methods与 data 同级，一般用来表示函数
v-text会解析文本，渲染标签，替换标签内的所有值
差值表达式{{ }}支持字符串拼接
v-html可以解析 html 元素，如果无html元素则与v-text效果一致
<!DOCTYPE html>
<html>
<head>
<title>Vue基础</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
<h2>{{ school.name }} {{ school.mobile }}</h2>
<!-- 数组下标从0开始 -->
<h3>{{ campus[0] }}</h3>
<h2 v-text="message+'!'">深圳</h2>
<h2 v-text="info"></h2>
<!-- 差值表达式{{}}支持字符串拼接 -->
<h2>深圳{{ message + "!"}}</h2>
<p v-html="content1"></p>
<p v-html="content2"></p>
</div>
<script>
var app = new Vue({
el:'#app', //el挂载点，指定修饰对象，#对应的是id选择器，注意不能挂载到body标签
data:{ //数据，仅在挂载点内部有效，可以写复杂类型，遵守js规则
message:'Hello,Vue!', //替换差值表达式{{}}中的变量
school:{
name:'哈哈哈',
mobile:100000
},
campus:['beijing','shanghai','guangzhou','shenzhen'],
info:'front',
content1:'baidu',
content2:"<a href='http://www.baidu.com'>百度</a>"
}
})
</script>
</body>
</html>
v-on为元素绑定事件，与 java 不同的是不需要写on（比如 onclick 可以直接写 click），绑定的方法定义在methods中
可以用@代替v-on，实现简写，click表示鼠标点击事件，dblclick是双击事件
通过 this 可以拿到 data 中的数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue基础</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-on为元素绑定事件,绑定的方法定义在methods中 -->
<input type="button" value="v-on指令" v-on:click="doIT">
<input type="button" value="v-on简写" @click="doIT">
<input type="button" value="双击事件" @dblclick="doIT">
<!-- 用@代替v-on，实现简写，click表示鼠标点击事件，dblclick是双击事件 -->
<h2 @click="changeFood">{{ food }}</h2>
</div>
<script>
var app = new Vue({
//vue中不再考虑更改DOM元素，重点放在更改数据就可以了
el:'#app',
data:{
food:'西兰花炒蛋'
},
methods:{
doIT:function () {
alert("做饭");
},
changeFood:function(){ //可以通过this拿到数据
this.food+='好吃！';
}
}
})
</script>
</body>
</html>
v-show根据表达式的真假，切换元素的隐藏和显示，原理是修改元素的 display 来实现，可以在调试器中看到 style=“display:none”；
v-if 也是根据表达式真假，切换元素的隐藏和显示，具体是操纵DOM元素，将元素加入/移出 DOM 树
v-show 和 v-if 中都可以进行表达式的判断
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="切换" @click="changeIsShow">
<p v-if="isShow">加入和移出DOM</p>
<p v-show="isShow">显示和隐藏</p>
<p v-if="age>=18">条件判断</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
isShow:true,
age:19
},
methods:{
changeIsShow:function(){
this.isShow = !this.isShow;
}
}
})
</script>
</body>
</html>
v-bind 设置元素的属性，比如 src，title，class。**语法：v-bind:属性名=表达式 **
v-bind 也可以缩写，只使用冒号 : 来代替，例如 v-bind:src="···" 与 :src="···" 效果相同
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.active{
border: 5px solid red;
}
</style>
</head>
<body>
<div id="app">
<!-- 全写与简写 -->
<!-- 鼠标停留在第二张图片上可以看到title，点击最后一张图片可以看到样式变化 -->
<img v-bind:src="imgSrc" alt="">
<img :src="imgSrc" alt="" :title="imgTitle+'!!!'">
<img :src="imgSrc" alt="" :class="{active:isActive}" @click="Active">
</div>
<script>
var app = new Vue({
el:'#app',
data:{
imgSrc:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/\
u=2783013482,133979246&fm=26&gp=0.jpg',
imgTitle:'Test',
isActive:false
},
methods:{
Active:function(){
this.isActive = !this.isActive;
}
}
})
</script>
</body>
</html>
v-for 根据数据生成列表结构，经常与数组结合使用，数组长度的更新会同步到页面上，是响应式的。
v-for="(item,index) in arr"，item表示数组的元素，其名字可以更改，只有与之后的使用名称相对应即可，index是索引，从0开始，与item同理使用。in是关键字不能变，arr是数组名
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="添加数据" @click="add">
<input type="button" value="移除数据" @click="remove">
<!-- 获取普通数组 -->
<ul>
<li v-for="(item,index) in arr">
{{index+1}}address：{{item}}
</li>
</ul>
<!-- 获取对象数组 -->
<h2 v-for="item in vegetable" :title="item.name">
{{item.name}}
</h2>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
arr:["beijing","shanghai","guangzhou","shenzhen"],
vegetable:[
{name:"xilanhua"},
{name:"xilan"}
]
},
methods:{
add:function(){
this.vegetable.push({name:"huacai"});
},
remove:function(){
this.vegetable.shift(); //每次移除最左边的元素
}
}
})
</script>
</body>
</html>
v-on 也可以传递函数自定义参数，事件修饰符。官方文档：https://cn.vuejs.org/v2/api/#v-on
事件的后面跟上.修饰符 可以对事件进行限制，.enter 可以限制触发的按键为回车
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" @keyup.enter="sayHi">
<!-- 回车作为事件修饰符，只有当按下回车被释放的时候才会触发 -->
<input type="button" value="点击" @click="doIt('老铁',666)">
{{p1+p2}}
</div>
<script>
var app = new Vue({
el:'#app',
data:{
p1:"",
p2:""
},
methods:{
doIt:function(p1,p2){ //用形参接受传递的参数
this.p1 = p1;
this.p2 = p2;
},
sayHi:function(){
alert("吃了吗");
}
}
})
</script>
</body>
</html>
v-model 用于获取和设置标签元素的值，是双向的数据绑定，无论修改谁，另外一个都会同步更新
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="改变message" @click="setM">
<input type="text" v-model="message" @keyup.enter="getM">
<!-- message的值会同步更新 -->
<h2>{{message}}</h2>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:"xiao"
},
methods:{
getM:function(){
alert(this.message);
},
setM:function(){
this.message="库顶";
}
}
})
</script>
</body>
</html>
本地应用
- 简单计数器
<!-- 简单计数器 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 实现一个简单的计数器，从0到10 -->
<div id="app">
<h2>简单计数器</h2>
<button @click="sub">-</button>
<span>{{ num }}</span>
<button @click="add">+</button>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
num:1
},
methods:{
sub:function(){
if(this.num>0){
this.num--;
}else{
alert("已经最小了");
}
},
add:function(){
if(this.num<10){
this.num++;
}else{
alert("已经最大了");
}
}
}
})
</script>
</body>
</html>
- 简单记事本
<!-- 简单记事本 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.btn{
width: 30px;
height: 20px;
}
</style>
</head>
<body>
<div id="app">
<h1>简单记事本</h1>
<!-- .enter事件修饰符，按下回车添加数据。autofocus 属性规定当页面加载时 input 元素应该自动获得焦点 -->
<input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" placeholder="请输出任务">
<!-- 列表区域 -->
<section>
<ul>
<li v-for="(item,index) in list">
<!-- 序号、内容、删除按钮 -->
<span>{{ index+1 }}</span>
<label>{{ item }}</label>
<button class="btn" @click="remove(index)">删</button>
</li>
</ul>
</section>
<!-- 统计区域，无数据时进行隐藏 -->
<footer v-show="list.length!=0">
<span><strong>{{list.length}}</strong> item </span>
<button class="btn" @click="clear">清</button>
</footer>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
list:["写代码","吃饭","睡觉"],
inputValue:""
},
methods:{
add:function(){ //添加功能
this.list.push(this.inputValue);
},
remove:function(index){
this.list.splice(index,1); //删除以该序号开始的元素，一共删除一个
},
clear:function(){ //清空数组
this.list=[]
}
}
})
</script>
</body>
</html>
网络应用
使用官方推荐的网络请求库 axios，导入地址是 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
常用请求：
- axios.get(地址?key1=value1&key2=value2).then(function(response){},function(err){})
- axios.post(地址,参数对象).then(function(response){},function(err){})
axios中的 this 与 Vue中的 this 不是同一个this，axios中的this获取不到 Vue中 data的数据，一个较好的方法是把 Vue中的 this定义为 that，再传递给 axios使用。
如果服务器返回的数据比较复杂，获取的时候要注意层级结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>axios基本使用</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="get获取笑话" @click="getJoke">
<p>{{joke}}</p>
<br/>
<input type="text" v-model="user" placeholder="输入用户名">
<input type="button" value="post创建用户" @click="PostUser">
<p>{{info}}</p>
</div>
<script>
/*
接口：随机笑话
地址：https://autumnfish.cn/api/joke/list
方式：get
参数：num=n(笑话条数)
响应内容：随机笑话
接口2：用户注册
地址：https://autumnfish.cn/api/user/reg
方式：post
参数：username:xxxx(用户名)
响应内容：注册成功或失败
*/
var app = new Vue({
el:'#app',
data:{
joke:"很好笑的笑话",
info:"CreateUser",
user:""
},
methods:{
getJoke:function(){
var that = this;
//axios内部的this与Vue中的this不一样，必须定义that才能取到数据
axios.get("https://autumnfish.cn/api/joke/list?num=1").then
(function(response){
that.joke=response.data.jokes[0];
},function(err){
console.log(err);
})
},
PostUser:function(){
var that = this;
axios.post("https://autumnfish.cn/api/user/reg",{username:that.user})
.then(function(response){
that.info = response.data;
},function(err){
console.log(err);
})
}
}
})
</script>
</body>
</html>
扫一扫
1566
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
