基本结构helloworld
el来匹配元素，#依据id匹配，.依据class匹配
data设置数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HelloWorld</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello World!'
}
})
</script>
{{}}插值表达式
替换指定内容，如上面的HelloWorld
v-text
设置标签的内容（textContent）；
会替换全部内容；
内部支持表达式；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HelloWorld</title>
</head>
<body>
<div id="app">
<h2 v-text="message+'!'">HelloWorld!</h2>
<h2>{{ message + "!"}}HelloWorld!</h2>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"HelloWorld"
}
})
</script>
v-html
v-html指令的作用是，设置元素的innerHTML；
其中的HTML语法结构会被解析为标签解析为HTML的样式；
与v-text的区别：v-text无论什么内容是什么，都是解析为纯文本；
解析文本时，使用v-text，解析HTML结构时，用v-html；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HelloWorld</title>
</head>
<body>
<div id="app">
<p v-html="content"></p>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
content: "<a href='http://www.baidu.com'>去百度</a>"
}
})
</script>
v-on
v-on:事件名="方法名"
为元素绑定事件；
可简写为@；
绑定的方法定义在methods属性中；
方法内部通过this关键字可以访问定义在data中的数据；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HelloWorld</title>
</head>
<body>
<div id="app">
<input type="button" value="点击事件v-on:click" v-on:click="doShow"><br>
<input type="button" value="点击事件简写@click" @click="doShow"><br>
<input type="button" value="双击事件v-on:dblclick" v-on:dblclick="doShow"><br>
<input type="button" value="双击事件简写@dblclick" @dblclick="doShow"><br>
<input type="button" value="取数据，且数据++" @click="doAdd"><br>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
num: 0
},
methods:{
doShow:function(){
// 弹窗
alert("当前num为" + this.num);
},
doAdd:function(){
alert(this.num + "++");
this.num++;
}
}
})
</script>
事件绑定的方法可以传参；
事件后使用.修饰符可以对事件限制；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HelloWorld</title>
</head>
<body>
<div id="app">
<input type="button" value="点击" @click="doClick('玛七朵', ++num) " @keyup.enter="doClick('玛七朵', ++num)">
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
num: 0,
},
methods:{
doClick:function(name, num){
alert(name + "点击第" + num + "次");
}
}
})
</script>
v-show
根据表达式的真假，切换元素的显示与隐藏；
其原理是修改元素的display，实现显示与隐藏；
v-show指令后的内容会被解析为布尔值；
值为true显示，为false隐藏；
数据改变时，对应的元素的显示状态也会同步更新；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HelloWorld</title>
</head>
<body>
<div id="app">
<span v-show="isShow">能看见吗?</span><br>
<input type="button" value="切换" @click="changeIsShow"></input>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
isShow: false
},
methods:{
changeIsShow:function(){
this.isShow = !this.isShow;
}
}
})
</script>
v-if
根据吧表达式的真假，切换元素的显示与隐藏（其原理操作dom元素）；
表达式的值为true时，元素存在于dom树中，false会从dom树中移除；
频繁切换元素的显示状态用v-show，反之用v-if，v-show的切换消耗性能更小；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HelloWorld</title>
</head>
<body>
<div id="app">
<span v-if="isShow">能看见吗?</span><br>
<input type="button" value="切换" @click="changeIsShow"></input>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
isShow: false
},
methods:{
changeIsShow:function(){
this.isShow = !this.isShow;
}
}
})
</script>
v-bind
设置元素的属性（比如：src、class等）；
完整写法：v-bind:属性名；
简写：:属性名；
当需要动态的增删class时，建议使用对象的方式；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HelloWorld</title>
<style>
.active{
border: 2px solid pink;
}
</style>
</head>
<body>
<div id="app">
<h1>百度还是哔哩哔哩</h1>
<img v-bind:src="url" :class="{active:isActive}"><br>
<input type="button" value="切换" @click="changeUrl">
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
baiduUrl: "https://www.baidu.com/favicon.ico",
bilibiliUrl: "https://www.bilibili.com/favicon.ico?v=1",
url: "https://www.baidu.com/favicon.ico",
isActie: false
},
methods:{
changeUrl:function(){
this.isActive = !this.isActive;
this.url = this.url == this.baiduUrl ? this.bilibiliUrl : this.baiduUrl;
}
}
})
</script>
v-for
根据数据生成列表结构；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HelloWorld</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item, index) in array">
数组下标{{index}}元素：{{item}}
</li>
</ul>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
array: ["!!!", "@@@", "###", "$$$"]
}
})
</script>
v-model
获取和设置表单元素的值（双向数据绑定）；
绑定的数据会和表单元素值相关联，绑定元素随着表单元素而改变；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HelloWorld</title>
</head>
<body>
<div id="app">
<input type="text" v-model="msg" @keyup.enter="getMsg">
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
msg: ""
},
methods:{
getMsg(){
alert(this.msg);
}
}
})
</script>
Vue之外：axios配合Vue的使用
axios回调函数中的this已经发生改变，无法访问到data中的数据；
需要把this保存起来（var that = this），回调函数中再使用保存了的this；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HelloWorld</title>
</head>
<body>
<div id="app">
<div class = "app">
<input type="button" value="获取笑话" @click="getJoke">
<p>{{joke}}</p>
</div>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<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){
console.log(response);
that.joke = response.data;
})
}
}
})
</script>
