Vue.js总结 [2017.6.5]
<head>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
//所有 v- 都为指令，表示它们是Vue的特殊属性
<span v-bind:title="xxx"></span> v-bind 【控制属性】
<span :class="{red：isRed}"></span> 简写 【判断class是否为isRed】
<span :class="[classA,classB]"></span> 【数组，两个class,可赋值】
<span :class="[classA,{classB：isB，classC：isC}]"></span> 【数组，第一个为字符串可赋值，第二个判断class是否展现不可赋值】
<span v-if="seen"></span> v-if 条件与循环【如果seen为true则显示】
<span v-show="seen"></span> 【如果seen为true则显示】
<span v-for="todo in todos">{{todo.text}}</span> v-for【绑定数组的数据来渲染一个项目列表】
<span v-on:click="reverseMessage"></span> v-on【绑定一个事件监听器】[在methods使用]
<span @click="reverseMessage"></span> [在methods使用]
//渲染数据
<p v-text="a"></p>
<p v-html="a"></p>
{{}}
</body>
<script>
var vm = new Vue(){} //创建Vue
//v-bind:tltle="message"
var vm = new Vue(){
el:'标签名/id/className [例如：#id]'，
data:{
message：'页面加载中'
}
}
//v-if="seen"
var vm = new Vue(){
el:'标签名/id/className [例如：#id]'，
data:{
seen:true
}
}
//v-for="todo in todos"
var vm = new Vue(){
el:'标签名/id/className [例如：#id]'，
data:{
todos:[
{text:"HTML"},
{text:"css"},
{text:"java"}
]
}
}
vm.todos.push({text:'新项目'}）
//v-on:click="reverseMessage"
//vue.js组件的重要选项
data vue对象里用到的所有数据 model
methods用于页面绑定的方法
watch数据监听，数据改变时可用
components:{}注册组件
item 数组
//如果想控制class的显示隐藏的话
<div id="app">
<li v-bind:class="｛show:item.isFinished｝">
{{item.label}}
</li>
</div>
<script>
var i = new Vue({
el:'#app',
data:function(){
return{
items:[
{
label:'coding',
isFinished:false
},
{
label:'walking',
isFinished:true
}
]
}
}
})
</script>
//如果想添加多个class，并给其赋值
<div id="app">
<li v-bind:class="[class1,class2]">
{{item.label}}
</li>
</div>
<script>
var i = new Vue({
el:'#app',
data:function(){
return{
class1:'nihao',
class2:"lalala"
}
}
})
</script>
//如果想添加一个class
<div id="app">
<li v-bind:class="[class12]">
{{item.label}}
</li>
</div>
<script>
var i = new Vue({
el:'#app',
data:function(){
return{
class12:'nihao'
}
}
})
</script>
//class的切换
<div id="app">
<ul class="ul">
<li v-for="item in items" v-bind:class="{finished:item.isFinished}" v-on:click="toggleFinish(item)">
{{item.label}}
</li>
</ul>
</div>
<script>
var i = new Vue({
el:'#app',
data:function(){
return{
items:[
{
label:'coding',
isFinished:false
},
{
label:'walking',
isFinished:true
}
]
}
},
methods:{
toggleFinish:function(item){
item.isFinished = !item.isFinished
}
}
})
</script>
//input select ,textarea 输入字符将其与其他标签绑定
<body>
<div id="app">
<input v-model='newModel' v-on:keyup.enter='addNew'/>
</div>
</body>
<script>
var i = new Vue({
el:'#app',
data:function(){
return{
newModel:''
}
},
methods:{
addNew:function(){
console.log(this.newModel)
this.newModel=''
}
}
})
</script>
//在input中输入字符添加到li中
<body>
<div id="app">
<input v-model='newItem' v-on:keyup.enter="addNew" />
<ul class="ul">
<li v-for="item in items" v-bind:class="{finished:item.isFinished}" v-on:click="toggleFinish(item)">
{{item.label}}
</li>
</ul>
</div>
</body>
<script>
var i = new Vue({
el:'#app',
data:function(){
return{
items:[
{
label:'coding',
isFinished:true
},
{
label:'walking',
isFinished:true
}
],
newItem:''
}
},
methods:{
addNew:function(){
this.items.push({
label:this.newItem,
isFinished:false
})
this.newItem = ''
}
}
})
</script>
自定义事件
vue实例实现了一个自定义事件接口，用于在组件树中通信，在这个事件系统独立于原生Dom事件，用法也不同。
每个Vue实例都是一个事件触发器：
1.使用$on()监听事件；
2.使用$emit()在它上面触发事件
3.使用$dispatch（）派发事件，事件沿着父链冒泡；
4.使用$boradcast（）广播事件，事件向下传导给所有的后代
</script>
