1、v-bind:可以将数据绑定到html标签属性的vue指令。默认数据只绑定到标签内容区,如果想绑定到属性即用v-bind指令(见示例),v-bind有简写方式:即将v-bind:title可简写为在属性前直接加冒号为:title。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息!
</span>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
});
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date()
}
})
</script>
2、v-on指令,绑定事件指令。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<button v-on:click="update">
reverse message
</button>
</div>
</body>
</html>
<script>
var app=new Vue({
el:"#app",
data:{
message:"hello vue"
},
methods:{
update:function(){
this.message=this.message
.split("").reverse().join("");
}
}
});
</script>
3、v-if指令,可将文本,结构绑定到DOM结构中。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<p id="vIf" v-if="seen">
v-if指令为true
<a href=""> 点我也没用!哈哈哈</a>
</p>
</body>
</html>
<script>
var app2 = new Vue({
el: '#vIf',
data: {
seen: false
}
})
</script>
4、v-for指令
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div>
<ul id="vFor">
<li v-for="person in persons">
Person: 姓名:{{person.name}},性别:{{person.sex}}
<div> <span>Name:</span> <input type="text" :value="person.name"></div>
<div> <span>Sex:</span> <input type="text" :value="person.sex"></div>
</li>
</ul>
</div>
</body>
<style>
*{
font-size: 28px;
}
li{
list-style: none;
margin:2rem;
}
div{
margin:1rem;
}
span{
display:inline-block;
width: 80px;
}
input{
text-align: center;
width:200px;
}
</style>
</html>
<script>
var app = new Vue({
el: '#vFor',
data: {
persons: [
{name:"helen",
sex:"female"
},
{name:"David",
sex:"male"
},
]
}
})
</script>
控制台输入:app.persons.push({name:"Mary",sex:"female"});执行后界面多了一列。通过控制台可改变数据。
5、v-model指令:针对与用户交互的组件双向绑定。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div>
<ul id="vFor">
<li v-for="person in persons">
Person: 姓名:<span>{{person.name}}</span> 性别:<span>{{person.sex}}</span>
<div> <span>Name:</span> <input v-model="person.name"></div>
<div> <span>Sex:</span> <input v-model="person.sex"></div>
</li>
</ul>
</div>
</body>
<style>
*{
font-size: 28px;
}
li{
list-style: none;
margin:2rem;
}
div{
margin:1rem;
}
span{
display:inline-block;
width: 80px;
}
input{
text-align: center;
width:200px;
}
</style>
</html>
<script>
var app = new Vue({
el: '#vFor',
data: {
persons: [
{name:"helen",
sex:"female"
},
{name:"David",
sex:"male"
},
]
}
})
</script>
6、template注册使用(看官网教程写得简单了,没运行出来。原来在Vue里,一个组件就是预定义的一个Vue实例,即要在Vue实例中使用)。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<ul id="app">
<!-- Create an instance of the todo-item component -->
<todo-item> dd</todo-item>
</ul>
</body>
</html>
<script>
Vue.component('todo-item',
{ template: '<li>This is a todo</li>'})
var vue=new Vue({
el:"#app"
});
</script>
7、template可修改文本。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://unpkg.com/vue"></script>
</head>
<body>
<ul id="app">
<mydiv v-for="child in children" v-bind:item="child"></mydiv>
</ul>
</body>
</html>
<script>
Vue.component('mydiv',{
props:['item'],
template:'<p> {{item.name}} </p>'});
var vue=new Vue({
el: "#app",
data:{
children:[
{name:"helen"},
{name:"David"},
{name:"HanMeimei"}
]}});
</script>
与自定义元素的关系
你可能已经注意到 Vue.js 组件非常类似于自定义元素——它是 Web 组件规范的一部分。实际上 Vue.js 的组件语法参考了该规范。例如 Vue 组件实现了 Slot API 与 is
特性。但是,有几个关键的不同:
-
-
Web 组件规范仍然远未完成,并且没有浏览器实现。相比之下,Vue.js 组件不需要任何补丁,并且在所有支持的浏览器(IE9 及更高版本)之下表现一致。必要时,Vue.js 组件也可以放在原生自定义元素之内。
-
Vue.js 组件提供了原生自定义元素所不具备的一些重要功能,比如组件间的数据流,自定义事件系统,以及动态的、带特效的组件替换。
-