一：基本使用
创建基本html项目，引入vue.js，创建一个div，将这个div作为vue的操作对象。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="mydiv">
{{hello}}
{{hobby[0]}}
{{hobby[1]}}
{{hobby[2]}}
{{hobby[3]}}
<br>
{{user.name}}
{{user.age}}
{{user.sex}}
{{user.addr}}
</div>
<script>
var app = new Vue({
el:"#mydiv",
data:{
hello:"hello Vue",
hobby:["唱","跳","Rap","篮球"],
user:{
name:"张三",
age:20,
sex:"男",
addr:" 郑州"
}
}
})
</script>
</body>
</html>
二：初步使用方法和vue标签指令
1.v-on 给标签绑定事件
使用 v-on 可以给标签绑定事件，例如点击事件、失焦事件
使用 v-on 实现计数操作，点击左侧按钮减一，点击右侧按钮加一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="mydiv">
<button type="button" v-on:click="sub()">
-
</button>
<span>{{num}}</span>
<button type="button" v-on:click="add()">
+
</button>
</div>
<script>
var app = new Vue({
el:"#mydiv",
data:{
num:0
},
methods:{
add() {
this.num++
},
sub() {
if (this.num>0) {
this.num--
}
}
}
})
</script>
</body>
</html>
2.使用 v-text 和 v-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 加载vue.js -->
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<h1>vue的v-text和v-html</h1>
v-text可以替换"{{key}}"
<div id="mydiv">
<span>{{name}}</span>
<br>
<span v-text="name"></span>
<br>
v-text只显示text形式
v-html显示html代码形式
<br>
v-text: <span v-text="link"></span>
<br>
v-html: <span v-html="link"></span>
</div>
<script>
let vue = new Vue({
el:"#mydiv",
data:{
name:"hello，vue03",
link:"<a href='https://www.baidu.com/'>点击跳转百度</a>"
}
})
</script>
</body>
</html>
3.
3.v-if 和 v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 加载远程vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Title</title>
</head>
<body>
<h1>vue中的v-if和v-show</h1>
<div id="mydiv">
<span v-if="name=='张三'">欢迎张三</span><br>
<span v-if="age>20">年龄大于20才能看见</span><br>
<span v-if="age<=20">年龄小于等于20才能看见</span><br>
<!-- 当使用v-show的时候，如果不满足条件，会自动在当前标签上加上 style="display: none" -->
<span v-show="age==20">年龄等于20才能看见，使用的是v-show</span>
</div>
<script>
let vue = new Vue({
el:"#mydiv",
data:{
name:"张三",
age:20,
}
})
</script>
</body>
</html>
4.v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 加载远程vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Title</title>
</head>
<body>
<h1>vue中的v-for遍历</h1>
<div id="mydiv">
使用vue的v-for遍历学校名:
<!--
v-for="自定义遍历 in 需要遍历的变量"
v-for="自定义遍历,索引 in 需要遍历的变量"
-->
<div v-for="school in schools">
{{school.name}}
<br>
遍历班级名：
<ul>
<li v-for="cls,i in school.classes">
{{cls}}=======当前索引{{i}}
</li>
</ul>
</div>
</div>
<script>
let vue = new Vue({
el:"#mydiv",
data:{
schools:[
{name:"第一高级中学",classes:["第一高级中学一班","第一高级中学二班","第一高级中学三班"]},
{name:"第二高级中学",classes:["第二高级中学一班","第二高级中学二班","第二高级中学三班"]}
]
}
})
</script>
</body>
</html>
5.v-model
v-model是双向绑定，当vue中的data中的数据变化的时候，dom元素的值也会变化，dom元素值变化的时候，data中的数据也会变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 加载远程vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Title</title>
</head>
<body>
<h1>使用vue中的v-model双向绑定</h1>
<div id="mydiv">
<p>
<input type="text" v-model="text">
<br>
data中的内容(text)：{{text}}
</p>
<p>
<input type="radio" value="男" name="sex" v-model="sex">男
<input type="radio" value="女" name="sex" v-model="sex">女
<input type="radio" value="人妖" name="sex" v-model="sex">人妖
<input type="radio" value="胡一菲" name="sex" v-model="sex">胡一菲
<br>
data中的内容(sex)：{{sex}}
</p>
<p>
<input type="checkbox" value="唱" name="aihao" v-model="aihao">唱
<input type="checkbox" value="跳" name="aihao" v-model="aihao">跳
<input type="checkbox" value="rap" name="aihao" v-model="aihao">rap
<input type="checkbox" value="篮球" name="aihao" v-model="aihao">篮球
<br>
data中的内容(aihao[])：{{aihao}}
</p>
<p>
<select v-model="addr">
<option disabled value="0">--请选择--</option>
<option value="豫A">郑州</option>
<option value="豫C">洛阳</option>
<option value="豫A">开封</option>
</select>
<br>
data中的内容(addr)：{{addr}}
</p>
</div>
<script>
let vue = new Vue({
el:"#mydiv",
data:{
text:"",
sex: "",
aihao:[],
addr:"00"
}
})
</script>
</body>
</html>
三：使用标签指令组合完成小的功能
1.类似轮播图的图片切换
当点击按钮的时候切换图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>图片切换</title>
<link rel="stylesheet" href="css/imgaeIndex.css" />
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="mydiv">
<div class="center">
<!-- 图片 -->
<img :src="imgs[index]" alt="" />
<!-- 左箭头 -->
<!-- 当前图片时第一张的时候不显示 -->
<a href="javascript:void(0)" class="left" @click="left()" v-if="index>0">
<img src="./img/prev.png" alt="" />
</a>
<!-- 右箭头 -->
<!-- 当前图片时最后一张的时候不显示 -->
<a href="javascript:void(0)" class="right" @click="right()" v-if="index<imgs.length-1">
<img src="./img/next.png" alt="" />
</a>
</div>
</div>
<script>
var app=new Vue({
el:"#mydiv",
data:{
//所有图片
imgs:[
"img/headimg1.jpg","img/headimg2.jpg","img/headimg3.jpg","img/headimg4.jpg",
"img/headimg5.jpg","img/headimg6.jpg","img/headimg7.jpg","img/headimg8.jpg"
],
//定义图片的索引
index:0,
},
methods:{
left(){
if(this.index>0){
this.index--;
}
},
right(){
if(this.index<this.imgs.length-1){//11
this.index++;
}
}
}
})
</script>
</body>
</html>
2.实现记事本功能
当在输入框输入数据之后，按下回车会添加到下放列表，点击右侧删除按钮可以进行删除
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>记事本</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="googlebot" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="css/Bookindex.css" />
</head>
<body>
<!-- 主体区域 -->
<section id="todoapp">
<!-- 输入框 -->
<header class="header">
<h1>记事本</h1>
<!-- 当按下回车的时候，将写入的数据加入数组 -->
<input
autofocus="autofocus"
autocomplete="off"
placeholder="请输入任务"
class="new-todo"
v-on:keyup.enter="enterdown()"
v-model="text"
/>
</header>
<!-- 列表区域 -->
<section class="main">
<ul class="todo-list">
<li class="todo" v-for="(item,index) in arr">
<div class="view">
<!-- 显示序号以及值 -->
<span class="index">{{index+1}}</span> <label>{{item}}</label>
<button class="destroy" v-on:click="del(index)"></button>
</div>
</li>
</ul>
</section>
<!-- 统计和清空 -->
<!-- 如果长度大于0显示，否则不显示 -->
<footer class="footer" v-if="arr.length>0">
<!-- 显示的总共有多少条数据 -->
<span class="todo-count"> <strong>{{arr.length}}</strong> items left </span>
<button class="clear-completed" v-on:click="clear">
Clear
</button>
</footer>
</section>
<script src="js/vue.js"></script>
<script>
var app=new Vue({
el:"#todoapp",
data:{
arr:["唱","跳","Rap","篮球"],
text:""
},
methods:{
enterdown() {
// 将输入的值添加到arr
this.arr.push(this.text);
this.text="";
},
del(index) {
// 从数组中删除一条数据
this.arr.splice(index,1);
},
clear() {
// 清空数组
this.arr=[];
}
}
})
</script>
</body>
</html>
四：使用vue与后端接口进行交互
1.使用vue从后端接口获取笑话，需要发送ajax请求，在vue中，使用的axios发送异步请求，与ajax请求相同。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入axios -->
<script src="js/axios.min.js"></script>
<!-- 引入vue.js -->
<script src="js/vue.js"></script>
</head>
<body>
<div id="mydiv">
<button type="button" v-on:click="getJoke()">
点击获取笑话
</button>
<ul>
<li v-for="joke in jokes">
{{joke}}
</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#mydiv",
data:{
jokes:[]
},
methods:{
// https://autumnfish.cn/api/joke/list?num=5
getJoke() {
axios.get("https://autumnfish.cn/api/joke/list?num=5").then((result)=>{
this.jokes=result.data.jokes;
})
}
}
})
</script>
</body>
</html>
2.获取天气信息，在输入框输入城市，按下回车，或者点击查询，进行天气的查询
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>天知道</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/tianindex.css" />
</head>
<body>
<div class="wrap" id="app">
<div class="search_form">
<div class="logo"><img src="img/logo.png" alt="logo" /></div>
<div class="form_group">
<input
type="text"
class="input_txt"
placeholder="请输入查询的天气"
v-model="city"
v-on:keyup.enter="enterdown()"+
/>
<button class="input_sub" v-on:click="enterdown()">
搜 索
</button>
</div>
</div>
<ul class="weather_list">
<!-- 将查询结果进行循环遍历 -->
<li v-for="tianqi in forecast">
<div class="info_type"><span class="iconfont">{{tianqi.type}}</span></div>
<div class="info_temp">
<b>{{tianqi.low}}</b>
~
<b>{{tianqi.high}}</b>
</div>
<div class="info_date"><span>{{tianqi.date}}</span></div>
</li>
</ul>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 自己的js -->
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
city:"",
forecast:[]
},
methods:{
enterdown() {
// 发送请求
axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city).then((result)=>{
this.forecast=result.data.data.forecast
})
}
}
})
</script>
</body>
</html>
1241
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
