模板渲染{{}}直接可以读出data中的数据,若data中是属性值,用v-bind渲染到页面,简写:例如:有一个title的属性,要用data中的数据,则<div :title="message ">或者<div v-bind:title="message ">
<div id ="app" >
{{ message }}
</div >
var app =
new Vue({
el :
'#app' ,
data : {
message :
'Hello Vue!'
}
})
条件和循环
<div id ="app-3" >
<p v-if ="seen" > 现在你看到我了
</p >
</div >
var app3 =
new Vue({
el :
'#app-3' ,
data : {
seen :
true
}
})
<div id ="app-4" >
<ol >
<li v-for ="todo in todos" >
{{ todo.text }}
</li >
</ol >
</div >
var app4 =
new Vue({
el :
'#app-4' ,
data : {
todos : [
{
text :
'学习 JavaScript' },
{
text :
'学习 Vue' },
{
text :
'整个牛项目' }
]
}
})
调用实例中的方法 v-on:可以简写为@clcik
<div id ="app-5" >
<p > {{ message }}
</p >
<button v-on:click ="reverseMessage" > 逆转消息
</button >
</div >
var app5 =
new Vue({
el :
'#app-5' ,
data : {
message :
'Hello Vue.js!'
},
methods : {
reverseMessage :
function ( ) {
this .message =
this .message.split(
'' ).reverse().join(
'' )
}
}
})
数据双向绑定v-model
<div id ="app-6" >
<p > {{ message }}
</p >
<input v-model ="message" >
</div >
var app6 =
new Vue({
el :
'#app-6' ,
data : {
message :
'Hello Vue!'
}
})
组件注册组件注册组件时,第一是组件模板的名字,也就是标签的名字,第二个是组件的内容,template:后面是组件内的标签内容
Vue.component(
'todo-item' , {
template :
'<li>这是个待办项</li>'
})
构建组件模板
<ol >
<todo-item >
</todo-item >
</ol >
从父元素中获取data传入组件
props:这个属性可以获取父元素传过来的值
在注册组件的时候这样写
Vue.component(
'todo-item' , {
props: [
'todo' ],
template :
'<li>{{ todo.text }}</li>'
})
在组件中用v-bind将这个todo的值传过来,可以简写:
<div id ="app-7" >
<ol >
现在我们为每个 todo-item 提供待办项对象
待办项对象是变量,即其内容可以是动态的。
我们也需要为每个组件提供一个“key”,晚些时候我们会做个解释。
-->
<todo-item
v-for =
"item in groceryList"
v-bind:todo =
"item"
v-bind:key =
"item.id" >
</todo-item >
</ol >
</div >
组件初始化-构建函数
var app7 =
new Vue({
el :
'#app-7' ,
data : {
groceryList : [
{
id :
0 ,
text :
'蔬菜' },
{
id :
1 ,
text :
'奶酪' },
{
id :
2 ,
text :
'随便其他什么人吃的东西' }
]
}
})