vue.js的基础学习

<script src="vue.js"></script> // 引入vue.js
<script>
new Vue({
el : ".box", //选择器
data : {
msg : "hello vue",
msg1 : 18,
msg2 : true,
msg3 : [1,2,3,4],
msg4 : {
name : "tom",
age : 18
}
},
methods:{
add:function(){
alert(1)
},
show:function(ev){
ev.cancelBubble=true; // 阻止事件冒泡
ev.preventDefault();
}
}
})
</script>

//html 部分
<div class="box">
{{msg}}  // view层数据的直接输出
----------------------------------
<input type="text" v-model="msg">
<input type="text" v-model="msg">
{{msg}} // model 实现数据的双向绑定
----------------------------------
{{msg1}} //number类型输出
{{msg2}} //boolean类型输出
{{msg3}} //array 数组类型输出
{{msg4}} //json 数据输出
---------------------------------
// 指令: v-for
<ul>
<li v-for="value in msg3">
{{$index}} // 数组索引
{{value}} // 数组值
{{msg3[$index]}} // 数组值
</li>
</ul>

<ul>
<li v-for="value in msg4">
{{$index}} // 索引
{{$key}}  // 键
{{value}} // 值
</li>
<li v-for="(key,value) in msg4">
{{key}} {{value}}
</li>
</ul>

</div>

//model 

常用输入框input

{{msg}} 数据更新，模板变化，双向绑定 

{{*msg}} 只绑定一次 

{{{msg}}} 可以转译html代码

// 事件 

如何:v-on:click=”“; 简写:@click=”” 

v-on:click/mouseout/mouseover/dblclick/mousedown…..

<button v-on:click="add"></button>
<button @click="add"></button>

<button v-show="true/false"></button>

//true显示，false隐藏

//事件对象 

@click=”show($event)”

阻止事件冒泡: @click.stop=”show” 

阻止默认事件如右键菜单: @contextmeau.prevent

//键盘事件 

常用:enter @keyup.13 或者 @key.enter 

@keyup/@keydown.left; 

@keyup/@keydown.right; 

@keyup/@keydown.up; 

@keyup/@keydown.down;

// 属性 

v-bink:src=”“; width/height/title… 

简写 :src=”“; 
 

:class=”[样式名称]” 

:class=”{color:a,backgroundColor:false}” a是数据 

:class=”json” 

json = { 

data:{ 

a:red 

} 

}

//过滤器

{{msg|filterA}} 

{{msg|filterA|filterB|filterC}} 

常用: uppercase 大写 lowercase 小写 capitalize 首字母大写 

currency 钱 

或者自定义参数 {{msg|filter “参数”}}