Vue.js
前言：Vue.js的官方学习网站是：https://cn.vuejs.org/v2/guide/#组件化应用构建
这里面讲述了Vuejs的指令，例如v-bind,v-if,v-on,v-model等等。
----------------------------------------------------------------------------------------------------------------------------------
1.基本指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!--this is a view-->
{{ message }}
</div>
<div id="app-2">
<!--this is a instruction-->
<span v-bind:title="message">
here is surprise
</span>
</div>
<div id="app-3">
<span v-if="seen">
<!--this is a structure that blind data to DOM-->
you can see me
</span>
</div>
<div id="app-4">
<ol>
<!--this is an array used in table-->
<li v-for="fruit in fruitshop">
{{fruit.text}}
</li>
</ol>
</div>
<div id="app-5">
<p>{{message}}</p>
<!--this is an function blinding to an button-->
<button v-on:click="reversemessage">reversemessage</button>
</div>
<div id="app-6">
<p>
{{update}}
</p>
<!--showing data changes by the changing data in updata-->
<input v-model="update">
</div>
<div id="app-7">
<ol>
<todo-item v-for="item in itemlist"
v-bind:todo="item"
v-bind:key="item.id"></todo-item>
</ol>
</div>
</body>
<script>
Vue.component('todo-item', {
//design a property by yourself using props
//this name of property is todo
props:['todo'],
template: '<li>{{todo.text}}</li>'
})
var app7=new Vue({
el:"#app-7",
data:{
itemlist:[{id:0,text:'homework'},
{id:1,text:'housework'},
{id:2,text:'drink'}]
}
})
var app6=new Vue({
el:"#app-6",
data:{
update:'today is '+new Date().toDateString()
}
})
var app5=new Vue({
el:"#app-5",
data:{
message:'you are a boy'
},
methods: {
reversemessage: function () {
//"j'oin" put the element to an array
this.message = this.message.split(' ').reverse().join(' ')
}
}
})
var app4=new Vue({
el:"#app-4",
data:{
fruitshop:[
{text:'apple'},
{text:'pineapple'},
{text:'banana'}
]
}
})
var app3=new Vue({
el:"#app-3",
data:{
seen:true
}
})
var app2=new Vue({
el:"#app-2",
data:{
message:'localtime: ' + new Date().toLocaleString()
}
})
var app =new Vue ({
//this is a viewmodel
el:"#app",
data: {
//this is a model
message: 'Hello world !'
}
})
</script>
</html>按照上面一个一个来，再对应官方文档的对应解释，很容易就上手了。
2.组件化应用构建
学会了基本指令和组件化应用，就能做出一个小demo了。
我的vue-member-record小demo源代码地址为：https://github.com/drunkprogrammer/vue-member-record
效果图如下所示
进入正题,这里只说我踩过的坑：
1.学习了基本指令和组建化应用构建的基础知识后，就开始写DEMO代码。觉得还是太急躁的，最好再返过头看一遍。
v-model不仅可以将dom的数据绑定到应用上，而且可以在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来
更新元素。
v-for指令在组件化应用创建时，需要和v-bind连用，v-bind:key是序号。
2.在table标签自定义tr-item组件，发现模板元素是块级元素，原本tr应该是内联元素，这就会导致每一次新增的成员的位置跑到表头的上方。对此原因，官方给出解释：
就是浏览器看到tr-item组件时，认为是无效的，Vue只有在浏览器解析和标准化HTML后才能获得模板内容。
3.组件化构建Vue.component中的预定义选项template里的内容必须是由一对标签开始和结束，你可以在这对标签中插入其他标签，但是如果是一个标签接着一个标签，它就会认为是多个模板。例如：'<td></td><td></td>'它就会只认为'<td></td>'是这个模板。
'<tr><td></td><td></td></tr>'它就会认为'<tr><td></td><td></td></tr>'是这个模板了。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
