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 “参数”}}