4.2 学前端vue

1.vue 读view

一个mvvm框架
上官网：http://cn.vuejs.org/
手册：http://cn.vuejs.org/api/
简单、易学
指令以v-XXX
一片html代码配合上json，在new出来vue实例
个人项目
适合移动项目

2.开始一个vue 1.X

//引用vue
<script src="vue.js"></script>
//先写一个html代码
<div id="box">
    {{msg}}
</div>
//准备一个vue实例
var c=new Vue({
    el:'#box',//el element缩写 选择器
    data:[  //放数据
        msg:'welcome vue'   //可以放各种数据类型
    ],
    methods:{  //放方法
        show:function(){
            alert(1);
        }
    }
})

3.常用的指令

v-model //一般用在表单元素上
    <div id="box">
        {{msg}}
        <input type="text" v-model="msg"> //双向绑定数据 msg是一个变量
    </div>
v-for //循环 2变成 v-for

    new Vue({
        el:'#box',
        data:[
            arr:['apple','banana','orange','pear']
        ]
    })

    <div id="box">
        <ul>
            <li v-for="value in arr"> //2用 (name,key,index) in XXX
                {{value}} {{$value}} //前者元素 （后者索引 2版本不使用 ）
            </li>
        </ul>
    </div>
v-on //事件

<div id="box">
    <input type="button" value="按钮" v-on:click="add()">
</div>
var c=new Vue({
    el:'#box',//el element缩写 选择器
    data:[
        arr:['apple','banana','orange','pear']   //可以放各种数据类型
    ],
    methods:{  
        add:function(){
            this.arr.push('tomato');
        }
    }
})
v-show="true/false" //显示隐藏