1.el和data：
书写：el:"id class div ..."
data:里面存放数据
2.本地应用：
1.v-text指令：
<h2 v-text="message+'!'">123</h2> 输出：你好！
<h2>小明{ {message+"!"}}</h2> 输出：小明你好！
var app=new Vue({
el:"#app",
data:{
message:"你好"
}
})
2.v-html指令：解析标签输出在html中
3.v-on：
<input type="button" value="v-on:click" v-on:click="doIt"> //点击指令
<input type="button" value="@click" @click="doIt"> //简写
@dblclick：双击指令
4.案例计数器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color: #ccc;
}
.sum{
float: left;
width: 300px;
height: 100px;
background-color: #fff;
text-align: center;
line-height: 100px;
font-size: 50px;
}
.left ,.right{
float: left;
width: 100px;
height: 100px;
font-size: 50px;
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<button class="left" @click="jian">-</button>
<div class="sum"><span>{
{ num }}</span></div>
<button class="right" @click="add">+</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
num:1
},
methods:{
add:function(){
this.num++;
},
jian:function(){
this.num--;
}
}
})
</script>
</body>
</html>5.v-show：根据表达式的真假，切换元素的显示和隐藏（操作的为display）
<div class="bg" v-show="isShow"></div> //也可以写v-show="true" v-show="age>=18"
6.v-if:根据表达式的真假，切换元素的显示和隐藏，操作的为dom（直接隐藏元素）
7.v-bind：
<div id="app">
<img v-bind:src="imgSrc">
<img :src="img"> //简写
<img src="" alt="" :class="isActive?'active':''">
<img src="" alt="" :class="{active:isActive}"> //更改类名 后面为真否则前面为真
</div>
8.案例轮播图：
9.v-for：根据数据生成列表结构：
<li v-for="item in arr"></li>
<li v-for="(item,index) in arr"></li> item是数据 index为索引
10.v-on补充：
@keyup.enter //按回车才能触发
11.v-model:获取和设置表单元素的值(双向数据绑定)
<div id="app">
<h2 v-model="message+'!'">123</h2>
<input type="button" value="修改message" @click="seM">
<input type="text" v-model="message" @keyup.enter="geM">
<h2>小明{
{message+"!"}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
message:"你好"
},
methods:{
geM:function(){
alert(this.message);
this.message="";
},
seM:function(){
this.message="鸡蛋"
}
}
})
</script>12，案例记事本
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小黑记事本</title>
<style>
*{
margin: 0 ;
padding: 0;
background-color: #F0F0F0;
}
.todo{
background-color: red !important;
width: 98%;
list-style: none;
line-height: 35px;
border-top:0.5px solid #E0E0E0;
border-bottom:0.5px solid #E0E0E0;
border-left:1px solid #E0E0E0;
border-right:1px solid #E0E0E0;
}
#todoapp{
width: 280px;
margin: 100px auto;
}
h1{
font-family:"隶书";
font-size: 32px;
color: saddlebrown;
text-align:center;
margin-bottom: 40px;
}
input::-webkit-input-placeholder {
color: #9C9C9C;
}
.new-todo{
outline: none;
width: 95%;
height: 35px;
border:1px solid #E0E0E0;
background-color: white;
padding:0 4px;
color: #9C9C9C;
font-size: 15px;
}
.view{
display: flex;
padding:0 4px;
color: #9C9C9C;
font-size: 15px;
background-color: white;
}
.index{
flex: 1;
background-color: white;
}
label{
flex: 10;
background-color: white;
}
.destroy{
flex: 1;
display: none;
color: red;
border: none;
background-color: white;
}
.view:hover .destroy{
display: block;
}
.todo-count{
display: block;
width: 95%;
line-height: 20px;
color: #9C9C9C;
font-size: 10px;
padding:0 4px;
border:0.5px solid #E0E0E0;
background-color: white;
box-shadow:
0 0.0625px 0.1875em 0 rgb(0 0 0 / 16%),
0 0.5em 0 -0.25em #f2f2f2ed,
0 0.5em 0.1875em -0.25em rgba(0, 0, 0, 1),
0 1em 0 -0.5em #e5e5e5,
0 1em 0.1875em -0.5em rgba(0, 0, 0, 1);
}
strong{
background-color: white;
}
.todo-clear{
position: relative;
background-color: white;
color: #9C9C9C;
font-size: 10px;
top: -24px;
left: 250px;
border: none;
}
</style>
</head>
<body>
<section id="todoapp">
<header class="header">
<h1>小黑记事本</h1>
<input v-model="inputValue" @keyup.enter="add" class="new-todo" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" />
</header>
<section class="main">
<ul class="todo-list">
<li class="todo" v-for="(item,index) in list">
<div class="view">
<span class="index">{
{index+1}}</span>
<label>{
{item}}</label>
<button class="destroy" @click="remove(index)">×</button>
</div>
</li>
</ul>
</section>
<footer class="footer">
<span class="todo-count">
<strong>{
{list.length}}</strong> items left
</span>
<button class="todo-clear" @click="clear">clear</button>
</footer>
</section>
<footer class="info"></footer>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#todoapp",
data:{
list:[],
inputValue:""
},
methods:{
add:function(){
this.list.push(this.inputValue);
this.inputValue="";
},
remove:function(index){
this.list.splice(index,1);
},
clear:function(){
this.list=[];
}
}
})
</script>
</body>
</html>
3.网络应用：
axios基本使用：
<input type="button" value="get请求" class="get">
<input type="button" value="post请求" class="post">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
document.querySelector(".get").onclick=function(){
axios.get("https://autumnfish.cn/api/joke/list?num=3")
.then(function(response){
console.log(response);
},function(err){
console.log(err);
})
}
</script>三大案例：
1.获取笑话：
<div id="app">
<input type="button" value="获取笑话" @click="getJoke">
<p>{
{joke}}</p>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
joke:"笑话"
},
methods:{
getJoke:function(){
var that=this; //this会改变,所以命名一个that
axios.get("https://autumnfish.cn/api/joke/list?num=1")
.then(function(response){
console.log(response.data.jokes[0]);
// console.log(response.data);
that.joke=response.data.jokes[0];
},function(err){
console.log(err);
})
}
}
})
</script>2.查询天气：
<div id="app">
<input type="text" v-model=weather @keyup.enter="getW">
<a href="javascript:;" @click="changeCity('唐山')">唐山</a>
<a href="javascript:;" @click="changeCity('武汉')">武汉</a>
<a href="javascript:;" @click="changeCity('沧州')">沧州</a>
<ul>
<li v-for="it in weatherList">
{
{city}}:{
{it.type}}
{
{it.date}}
最低温度：{
{it.low}}
最高温度：{
{it.high}}
</li>
</ul>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
weather:"",
weatherList:[],
city:""
},
methods:{
getW:function(){
var that=this; //城市等于data里面的变量
axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.weather)
.then(function(response){
// console.log(response);
console.log(response.data.data.forecast);
that.weatherList=response.data.data.forecast;
that.city=response.data.data.city;
},function(err){
console.log(err);
})
},
changeCity:function(weather){
this.weather=weather;
this.getW();
}
}
})
</script>3.音乐应用：
<div id="app">
<input type="text" @keyup="getSonger">
<div>{
{songer}}</div>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- https://autumnfish.cn/search -->
<script>
var app=new Vue({
el:"#app",
data:{
songer:"",
musicList:[],
},
methods:{
getSonger:function(){
var that=this;
axios.get("https://autumnfish.cn/search?keywords="+this.songer)
.then(function(response){
console.log(response);
},function(err){
console.log(err);
})
}
}
})
</script>