一、创建第一个Vue实例
<!DOCTYPE html>
< html>
< head>
< meta charset = " utf-8" />
< title> vue入门</ title>
< script src = " vue/vue.js" > </ script>
</ head>
< body>
< div id = " root" > {{msg}}</ div>
< script>
new Vue ( {
el: "#root" ,
data: {
msg: "hello world"
}
} )
</ script>
</ body>
</ html>
二、挂载点和模板
<!DOCTYPE html>
< html>
< head>
< meta charset = " utf-8" />
< title> 挂载点 模板</ title>
< script src = " vue/vue.js" > </ script>
</ head>
< body>
< div id = " root" >
< h1> hello {{msg}}</ h1>
</ div>
< div id = " root" >
</ div>
< script>
new Vue ( {
el: "#root" ,
template: '<h1>hello {{msg}}</h1>' ,
data: {
msg: "hello world"
}
} )
</ script>
</ body>
</ html>
三、实例中的数据,事件和方法
<!DOCTYPE html>
< html>
< head>
< meta charset = " utf-8" />
< title> 数据 事件 方法</ title>
< script src = " vue/vue.js" > </ script>
</ head>
< body>
< div id = " root" >
< h1> {{number}}</ h1>
</ div>
< div id = " root" >
< h1 v-text = " number" > </ h1>
</ div>
< div id = " root" >
< h1 v-html = " number" > </ h1>
</ div>
< div id = " event" >
< div @click = " handleClick" > {{number}}</ div>
</ div>
< script>
new Vue ( {
el: "#root" ,
data: {
msg: "hello world" ,
number: 123
}
} )
new Vue ( {
el: "#event" ,
data: {
number: 123
} ,
methods: {
handleClick: function ( ) {
this . number= "321"
}
}
} )
</ script>
</ body>
</ html>
四、Vue中的属性绑定和双向数据绑定
<!DOCTYPE html>
< html>
< head>
< meta charset = " UTF-8" >
< title> 属性绑定 双向数据绑定</ title>
< script src = " vue/vue.js" > </ script>
</ head>
< body>
< div id = " event" >
< div :title = " ' dell lee ' +title" > hello world</ div>
< input v-model = " content" />
< div> {{content}}</ div>
</ div>
< script>
new Vue ( {
el: "#event" ,
data: {
title: "this is hello World" ,
content: "this is content"
}
} )
</ script>
</ body>
</ html>
五、Vue中的计算属性和侦听器
<!DOCTYPE html>
< html>
< head>
< meta charset = " UTF-8" >
< title> 计算属性与侦听器</ title>
< script src = " vue/vue.js" > </ script>
</ head>
< body>
< div id = " event" >
姓< input v-model = " firstName" />
名< input v-model = " lastName" />
< div> {{fullName}}</ div>
< div v-text = " count" > </ div>
< div v-text = " fullcount" > </ div>
</ div>
< script>
new Vue ( {
el: '#event' ,
data: {
firstName: '' ,
lastName: '' ,
count: 0 ,
fullcount: 0
} ,
computed: {
fullName: function ( ) {
return this . firstName + ' ' + this . lastName
}
} ,
watch: {
firstName: function ( ) {
this . count++
} ,
lastName: function ( ) {
this . count++
} ,
fullName: function ( ) {
this . fullcount++
}
}
} )
</ script>
</ body>
</ html>
六、v-if v-show v-for指令
<!DOCTYPE html>
< html>
< head>
< meta charset = " UTF-8" >
< title> v-if v-show v-for指令</ title>
< script src = " vue/vue.js" > </ script>
</ head>
< body>
< div id = " root" >
< div v-if = " show" > hello world</ div>
< button @click = " handleClick" > toggle</ button>
< ul>
< li v-for = " item of list" :key = " item" > {{item}}</ li>
</ ul>
</ div>
< script>
new Vue ( {
el: "#root" ,
data: {
show: true ,
list: [ 1 , 2 , 3 ]
} ,
methods: {
handleClick: function ( ) {
this . show= ! this . show
}
}
} )
</ script>
</ body>
</ html>
欢迎访问我的个人博客