第一天vue.js开发学习
1、vue.js的 Hello Vue,
2、v-bind:title 数据绑定,
3、v-if判断 和 v-for 数据循环输出,
4、v-on:click 事件监听调用,方法定义在methods:{},
5、v-model='message'双向数据绑定到{{message}},
6、Vue.component自定义组件,props自定义借口,实现解耦;
具体代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第一天vue.js开发学习</title>
<script src="js/vue.js"></script>
</head>
<body>
<!--
作者:1602427923@qq.com
时间:2017-02-20
描述:Hello Vue
-->
<div id="app">
{{message}}
</div>
<!--
作者:1602427923@qq.com
时间:2017-02-20
描述:绑定title数据
-->
<div id="app-2">
<span v-bind:title="message">
ddddddd
</span>
</div>
<!--
作者:1602427923@qq.com
时间:2017-02-20
描述:v-if数据展现隐藏
-->
<div id="app-3">
<p v-if="seen">you see</p>
</div>
<!--
作者:1602427923@qq.com
时间:2017-02-20
描述:v-for数据循环展现
-->
<div id="app-4">
<ul>
<li v-for='x in todos'>
{{x.text}}
</li>
</ul>
</div>
<!--
作者:1602427923@qq.com
时间:2017-02-20
描述:方法调用v-on:click事件定义在methods里面
-->
<div id="app-5">
<p>{{message}}</p>
<button v-on:click="reverMessage">Reverse Message</button>
</div>
<!--
作者:1602427923@qq.com
时间:2017-02-20
描述:双向数据绑定
-->
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
<!--
作者:1602427923@qq.com
时间:2017-02-20
描述:自定义组件的
-->
<div id="app-7">
<ol>
<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
</ol>
</div>
<div id="app-8">
<ol>
<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
</ol>
</div>
</body>
<script>
var app = new Vue({
el : '#app',
data:{
message:'Hello Vue!'
}
})
var app2 = new Vue({
el:'#app-2',
data:{
message:'eeeeeee'+new Date()
}
})
var app3 = new Vue({
el:"#app-3",
data:{
seen:true
}
})
var app4 = new Vue({
el:'#app-4',
data:{
todos:[
{text:'1111'},
{text:'2222'},
{text:'3333'}
]
}
})
var app5 = new Vue({
el:'#app-5',
data:{
message:'hello world!'
},
methods:{
reverMessage:function(){
this.message = this.message.split('').reverse().join('')
}
}
})
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ text: 'Vegetables' },
{ text: 'Cheese' },
{ text: 'Whatever else humans are supposed to eat' }
]
}
})
var app8 = new Vue({
el: '#app-8',
data: {
groceryList: [
{ text: 'a1' },
{ text: 'a2' },
{ text: 'a3' }
]
}
})
</script>
</html>