Vue.js总结 [2017.6.5]

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

<head>

</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使用]

//渲染数据

{{}}

</body>

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>