Vue常用属性和组件
总结：
常用的属性
- v-if
- v-else-if
- v-else
- v-for
- v-on 绑定事件，简写 @
- v-model 数据双向绑定
- v-bind 给组件绑定参数，简写 ：
组件化
- 组合组件 slot 插槽
- 组件内部绑定事件需要使用到 this.$emit("事件名"，参数)
- 计算属性的特色，缓存计算数据
v-bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<span v-bind:title="message">
鼠标悬停几秒查看此处动态绑定的提示信息！
</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
message:"hello"
}
})
</script>
</body>
</html>
v-if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1 v-if="ok">yes</h1>
<h1 v-else>no</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
ok:true
}
})
</script>
</body>
</html>
v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<li v-for="item in items">
{{item.message}}
</li>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
items:[
{message:"a"},
{message:"b"},
]
}
})
</script>
</body>
</html>
v-on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button v-on:click="hello">click me</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{},
methods:{
hello:function (event) {
alert("hello!!");
}
}
})
</script>
</body>
</html>
v-model 双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
请输入：<input type="text" v-model="message">{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
message:"hello"
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
选择性别：
<input type="radio" name="sex" value="男" v-model="message">男
<input type="radio" name="sex" value="女" v-model="message">女
<p>选中了谁：{{message}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
message:''
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
下拉框：
<select v-model="message">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
选择的是：<p>{{message}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
message:''
}
})
</script>
</body>
</html>
组件
Vue.component(): 注册组件
template: 组件的模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<zujian v-for="item in items" v-bind:wen="item"></zujian>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
//定义一个vue组件component
Vue.component("zujian",{
props:['wen'],
template:'<h1>{{wen}}</h1>'
})
var vm = new Vue({
el:"#app",
data:{
items:["a","b","c"]
}
})
</script>
</body>
</html>
浙公网安备 33010602011771号