引入vue
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!--引入vue -->1. el和data
el用来获取选择的元素，可以作用到选择的元素及其内部的后代元素
vue中用到的数据存放在data属性中?
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>vue学习</title>
</head>
<body>
{{message}}
<div id="content">
{{message}}
<p> {{message}} </p>
<p> {{message + "!!!"}} </p>
<p> 姓名：{{user.name}}， 年龄：{{user.age}} </p>
<ul>
<li> {{hobby[0]}} </li>
<li> {{hobby[1]}} </li>
<li> {{hobby[2]}} </li>
</ul>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!--引入vue -->
<script type="text/javascript">
var app = new Vue({
el:"#content",
data:{
message:"hello",
user:{
name:"Tom",
age:"20"
},
hobby:["Java", "C++", "Python"]
}
})
</script>
</body>
</html>
2. v-text：设置标签的文本内容
简化的形式是{{ }}
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>vue学习</title>
</head>
<body>
<div id="content">
<p v-text="message"> </p>
<p v-text="user.name"> </p>
<p v-text="hobby[0]"> </p>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!--引入vue -->
<script type="text/javascript">
var app = new Vue({
el:"#content",
data:{
message:"hello",
user:{
name:"Tom",
age:"20"
},
hobby:["Java", "C++", "Python"]
}
})
</script>
</body>
</html>
3. v-html：设置标签的html内容
设置标签的内容为html格式
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>vue学习</title>
</head>
<body>
<div id="content">
<p v-text="message"> </p>
<p v-html="message"> </p>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!--引入vue -->
<script type="text/javascript">
var app = new Vue({
el:"#content",
data:{
message:"<a href='http://www.baidu.com'>百度</a>"
}
})
</script>
</body>
</html>
4. v-on：为元素绑定事件
可以简写为@
methods属性是编写函数，可以通过this关键字可以获取到data中的数据?
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>vue学习</title>
</head>
<body>
<div id="btn">
<input type="button" value="v-on单击事件" v-on:click="doIt">
<input type="button" value="v-on简写形式" @click="doIt">
<input type="button" value="双击事件" v-on:dblclick="doIt">
<p v-on:click="changeName">{{name}}</p>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!--引入vue -->
<script type="text/javascript">
var app = new Vue({
el:"#btn",
data:{
name:"Tom"
},
methods:{
doIt:function(){
alert("执行单击事件");
},
changeName:function(){
this.name = "Mike" //点击Tom之后，会变成Mike
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>vue学习</title>
</head>
<body>
<div id="test">
<input type="button" value="获取输入的属性值" @click="getClick('Tom', 22)">
<input type="text" value="回车输入" @keyup.enter="keyClick('Mike')">
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!--引入vue -->
<script type="text/javascript">
var app = new Vue({
el:"#test",
methods:{
getClick:function(attr1, attr2){
alert(attr1);
alert(attr2);
},
keyClick:function(attr1){
alert(attr1);
}
}
})
</script>
</body>
</html>5. v-show：是否显示内容
根据ture或者false切换元素的显示状态，true是显示，false不显示
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>vue学习</title>
</head>
<body>
<div id="show">
<input type="button" value="切换显示状态" @click="changeIsShow">
<p v-show="isShow"> 显示的内容 </p>
<input type="button" value="增加年龄" @click="addAge">
<p v-show="age >= 18"> 成年可显示 </p>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!--引入vue -->
<script type="text/javascript">
var app = new Vue({
el:"#show",
data:{
isShow:false,
age:17
},
methods:{
changeIsShow:function(){
this.isShow = !this.isShow;
},
addAge:function(){
this.age++;
}
}
})
</script>
</body>
</html>
6. v-if：是否显示内容
根据表达式的真假，切换元素的显示和隐藏
与v-show效果相同，v-show操作的是样式，v-if操作的是dom对象
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>vue学习</title>
</head>
<body>
<div id="show">
<input type="button" value="切换显示状态" @click="changeIsShow">
<span v-if="isShow"> 显示的内容 </span> </br>
<input type="button" value="增加年龄" @click="addAge">
<span v-if="age >= 18"> 成年可显示 </span>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!--引入vue -->
<script type="text/javascript">
var app = new Vue({
el:"#show",
data:{
isShow:false,
age:17
},
methods:{
changeIsShow:function(){
this.isShow = !this.isShow;
},
addAge:function(){
this.age++;
}
}
})
</script>
</body>
</html>7. v-bind：设置元素的属性
设置元素的属性，可以省略v-bind
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>vue学习</title>
</head>
<body>
<div id="show">
<a v-bind:href="linkHref" v-bind:title="linkTitle">百度</a> </br>
<a :href="linkHref" :title="linkTitle">百度</a> </br>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!--引入vue -->
<script type="text/javascript">
var app = new Vue({
el:"#show",
data:{
linkHref:"http://www.baidu.com",
linkTitle:"百度一下",
isActive:false
}
})
</script>
</body>
</html>
8. v-for：循环
根据数据生成列表结构
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>vue学习</title>
</head>
<body>
<div id="test">
<ul>
<li v-for="item in arr"> {{item}} </li>
<li v-for="(item, index) in arr"> {{index}}, {{item}} </li>
</ul>
<p v-for="item in user"> 姓名：{{item.name}}，年龄：{{item.age}} </p>
<input type="button" value="添加用户" @click="add">
<input type="button" value="删除用户" @click="remove">
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!--引入vue -->
<script type="text/javascript">
var app = new Vue({
el:"#test",
data:{
arr:["Tom", "Jack", "Mike"],
user:[{name:"张三", age:22}, {name:"李四", age:23}]
},
methods:{
add:function(){
this.user.push({name:"李红", age:22});
},
remove:function(){
this.user.shift();
}
}
})
</script>
</body>
</html>
9. v-model：获取和设置表单元素的值
获取和设置表单元素的值，绑定的数据会和表单元素的值相关联
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>vue学习</title>
</head>
<body>
<div id="test">
<input type="text" v-model="name" @keyup.enter="getName">
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!--引入vue -->
<script type="text/javascript">
var app = new Vue({
el:"#test",
data:{
name:"输入姓名"
},
methods:{
getName:function(){
alert(this.name);
}
}
})
</script>
</body>
</html>
