Vue------比JQuary用起来更加精简的前端框架

监听事件 v-on

v-on:click			单机事件，可缩写为 @click
@click.stop			阻止事件冒泡到父元素
@click.capture		优先触发
@click.self			只有自己可以触发
@click.once			只触发一次
@click.prevent		阻止页面刷新但是不影响函数

条件语句 v-if

v-if		 	必须给出判断条件。如：v-if="number>80"
v-else			不用条件
v-else-if		必须给出判断条件。如：v-else-if="number>50"

循环语句 v-for

遍历数据及index

<tr v-for="her,index in hero">
    <td>{{index+1}}</td>
    <td>{{her.name}}</td>
    <td>{{her.hp}}</td>
</tr>

遍历数字

<tr v-for="i in 10">
      <td>{{i}}</td>
</tr>

属性绑定 v-bind

v-bind 绑定视图与Vue对象，将Vue的数据放到视图上
如下：v-bind:href 可简写为:href

<a :href="page">百度一下</a>
new Vue({
            el:'#div1',
            data:{
                page:'http://www.baidu.com'
            }
        })		
例如：v-bind:href		链接，可简写为:href

双向绑定 v-model

将Vue的数据放到视图上，然后还可以把视图上我i们输入的数据传到Vue对象

<div id="div1">
      输入英雄名称 <input v-model="name">
        <button @click="doClick">选择你的英雄</button>
    </div>
    <script>
        new Vue({
            el:'#div1',
            data:{
                name:"阿伦"
            },
            methods:{
                doClick:function () {
                    alert(this.name)
                }
            }
        })
    </script>

扩展

v-model.lazy      	加上.lazy之后，相当于监听change操作，只有在失去焦点的时候，才会进行数据绑定了
v-model.number  	v-model默认是string类型，所以就可以通过.number方式确保获取到的是数字类型了。
v-model.trim		去掉前后的空白

计算属性 computed

        new Vue({
            el:'#div1',
            data:{
                exchange:6.1,
                rmb:100
            },
            computed:{
                doller:function () {
                    return this.rmb/ this.exchange
                }
            }
        })
        
       //methods 方法
		methods:{
                doller:function () {
                    return this.rmb/ this.exchange
                }
            }

注意：

computed 和 methods 的区别，computed
是有缓存的，只要输入框没发生变化就会直接返回以前计算出来的值，而不会再次计算。
这样如果是复杂计算，就会节约不少时间。而methods每次都会调用

计算属性 watch

watch vue可以通过watch来监听属性值的变化

		watch:{
                rmb:function (val) {
                    this.rmb=val;
                    this.doller=this.rmb / this.exchange
                },
                doller:function (val) {
                    this.doller=val;
                    this.rmb=this.doller * this.exchange
                }
            }

过滤器 filter

如下，data为输入框绑定传递到Vue的数据，下面的td中用竖杠将数据和过滤方法分割

 <tr>
             <td align="center">
                    <input  v-model="data">
                </td>
             <td align="center">
                 {{data|capitalize|capitalizelast}}
             </td>
         </tr>

直接定义全局过滤方法

Vue.filter('capitalize',function (value) {
            if(!value) return ''
            value = value.toString()
            return value.charAt(1).toUpperCase()+value.substring(1)
        })

组件 components

定义组件，获取tempalateDiv的内容，props:[‘product’]获取参数，然后全部注到div中

var tempalateDiv = document.getElementById("tempalate").innerHTML;
        var tempalateObject = {
            props:['product'],
            template:tempalateDiv,
            methods: {
                increaseSale:function () {
                    this.product.sale = parseInt(this.product.sale);
                    this.product.sale++
                    this.$emit('increment')
                }
            }
        }

        Vue.component('product',tempalateObject);
        new Vue({
            el:'#div1',
            data:{
                products:[
                    {"name":"男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮1","sale":"1","price":"17","review":"3"},
                    {"name":"男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮2","sale":"2","price":"19","review":"13"},
                    {"name":"男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮3","sale":"3","price":"15","review":"23"}
                ]
            }
        })

自动赋值

    <div id="tempalate" style="display:none">
        <div class="product" v-on:click="increaseSale">
            <div class="price">
                ￥{{product.price}}
            </div>
            <div class="productName">
                {{product.name}}
            </div>
            <div class="sale">月成交{{product.sale}}笔</div>
            <div class="review">评价{{product.review}}</div>
        </div>
    </div>
    <div id="div1">
        <product v-for="item in products" v-bind:product="item"></product>
    </div>

自定义指令 Vue.directive

第一个参数xart就是指令名称，el就是html dom对象，binding是指令参数。

        Vue.directive('xart',function (el,binding) {
            el.innerHTML = el.innerHTML+'('+binding.value.text+')'
            el.style.color=binding.value.color
        })
		<div id="div1">
        	<div v-xart="{color:'red',text:'我是最棒的'}"> good good study dayday up</div>
   	    </div>

路由（局部刷新） VueRouter

模板( html 片段 )

	var user = { template: '<p>用户管理页面的内容</p>' };
    var second = { template: '<p>产品管理页面的内容</p>' };
    var order = { template: '<p>订单管理页面的内容</p>' };

定义路由

 var routes=[
            {path:'/',redirect:'/user'},
            {path:'/user',component : user},
            {path:'/product',component : product},
            {path:'/order',component : order}
        ];

创建VueRouter实例

       var router = new VueRouter({
            routes:routes
        })

给vue对象绑定路由

 new Vue({
        el:"#app",
        router
    })

展示数据

    <div id="app">
        <div class="menu">
            <router-link to="/user">用户管理</router-link>
            <router-link to="/product">产品管理</router-link>
            <router-link to="/order">订单管理</router-link>
        </div>
        <div class="workingRoom">
            <router-view></router-view>
        </div>
    </div>

Ajax(Fetch,axios)

和JQuary不同的是vue主流使用Fetch和Axios这两个ajax框架，使用方法差球不多

  var url="https://static.how2j.cn/study/json.txt";
    fetch(url).then(function (response) {
        response.json().then(function (jsonObject) {
            var jsonString = JSON.stringify(jsonObject)
            alert(jsonString)
            document.getElementById('div1').innerHTML="通过ajax获取到的数据为--"+jsonString;
        })
    }).catch(function (err) {
        console.log("Fetch错误："+err)
    })

var url = "http://how2j.cn/study/json.txt"
    axios.get(url).then(function(response) {
        var jsonObject = response.data;
        var jsonString = JSON.stringify(jsonObject)
        document.getElementById("hero").innerHTML = "通过 axios 获取到的json数据："+ jsonString;
    })

git源码地址
https://github.com/MikeChengege/vue/tree/master/src/com/study