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