Empecé a aprender Vue.js hoy. Al principio, parece realmente difícil, pero después de un período de "cambio", descubrí que era así, no tan difícil como se imaginaba.
Aquí está el código registrado hoy:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h1 v-text="number"></h1>
<h1 v-html="number"></h1>
<div v-html="info"></div>
<div v-text="info"></div>
</div>
<div id="app-2">
</div>
<div id="root">
<h1 v-on:click="handleClick">{{content}}</h1>
<h1 @click="handleClick">{{content}}</h1>
</div>
<!-- 双向绑定 -->
<div id="root1">
<!-- <div v-bind:title="'dell me '+title">hello word</div> -->
<div :title="'dell me '+title">hello word</div>
<input v-model="content" />
<div >
{{content}}
</div>
</div>
<!-- 计算属性 -->
<div id="root3">
姓：<input v-model="fistName" />
<br/>
名：<input v-model="lastName" />
<div>{{fullName}}</div>
<!-- 侦听器,监听某一个数据的变化 -->
<div>{{count}}</div>
</div>
<!-- v-if,v-show,v-for指令的用法 -->
<div id="root4">
<div v-if="show"> hello word</div>
<!-- <div v-show="show"> hello word</div> -->
<button @click="headClick">toggle</button>
<ul>
<!-- <li v-for="item in list":keys="item">{{item}}</li> -->
<li v-for="(item,index) in list":keys="index">{{item}}</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
number:123,
info:'<h1 style="color:red">这是信息</h1>'
}
});
var vm2 = new Vue({
el:'#app-2',
template:'<h1>{{msg}}</h1>',
data:
{
msg:'这是template的用法'
}
})
var vm3 = new Vue({
el:'#root',
data:
{
content:'你好啊'
},
methods:{
handleClick:function(){
this.content = 'word'
}
}
})
var vm4 = new Vue({
el:'#root1',
data:
{
title:"this is hello word",
content:"this is content"
}
})
var vm5 = new Vue({
el:'#root3',
data:
{
fistName:'',
lastName:'',
count:0
},
/* 计算属性 */
computed :{
fullName:function(){
return this.fistName+'-'+this.lastName;
}
},
/* 侦听器 */
watch:{
fistName:function(){
this.count++;
},
lastName:function(){
this.count++;
}
}
})
var vm6 = new Vue({
el:'#root4',
data:
{
show:true,
list:[1,2,3,4,5]
},
methods:{
headClick:function(){
this.show =!this.show;
}
}
})
</script>
</body>
</html>
