vue.js 操作(二)

 一 vue.js 操作表单

window.onload = function () {
                //全局过滤器 能够让所有的vue都能够调用
            Vue.filter('RMB',function (value) {
                return value+'元'
            })
            var vm = new Vue({
                el: '#app',
                data: {
                    //
                    txt: '',
                    tara: '',
                    //定义多个复选框，有多个值，需要用数组的格式
                    check: [],
                    checkone: '',
                    //定义单选框，因为只能有一个值，所以用字符串去保存
                    sex: 'lady',
                    //下拉框，最后也是一个值绑定，字符串板寸即可。
                    sel: 'big',

                }
            })
        }

1),在标签里面设置我们的绑定的数据值。一般一个值，字符串即可。
     <input type="text" v-model="txt">
     <textarea v-model="tara"></textarea>

2),如果是多选框，那么就要使用数组的方式，进行绑定，并且设置 value 值
     <input type="checkbox" value="0" v-model="check">唱歌
     <input type="checkbox" value="1" v-model="check">吃饭
     <input type="checkbox" value="2" v-model="check">跳舞

3),下拉框，以为最终是一个数据，只需txt 保存即可
   <select v-model="sel">
   　　<option value="big">大班</option>
   　　<option value="middle">中班</option>
   　　<option value="small">小班</option>
　　</select>

二，全局过滤器:是指对数据进行修饰，例如:数据1000 改为数据 1000元 
    //前面的是自定义属性，后面的是过滤器名字
    {{ money | RMB } 将属性money进行RNB函数操作！

三，实例生命周期:我们可以使用这些函数,在实例的不同阶段加上我们需要的代码，实现特定的功能。

var vm =new Vue({
        el:'#app',
        data:{
            num:0
        },
        created:function () {
            console.log('函数创建执行！')
        },
        beforeCreate:function () {
            console.log('函数创建前执行！')
        },
        beforeUpdate:function () {
            console.log('函数更新之后执行！')
        },
        mounted:function () {    
            console.log('页面加载完成之后执行！')
        }
    })

四，vue.js 操作    ajaxvue.js没有集成ajax功能，要使用ajax功能，可以使用vue官方推荐的axios.js库来做ajax的交互

var vm = new Vue({
                el: '#app',
                data: {
                    /*通过这里一页面交互！*/
                    txt: null,

                },
                /* 加载完成文档执行此方法！*/
                mounted: function () {
                    axios({
                        url: 'list.json',
                        method: 'get'
                    })
                    /*成功之后执行此函数*/
                    .then(function (data) {
                        /*不能使用this this指的是then方法*/
                        vm.txt = data.data.list
                    })
                    /*请求失败执行函数*/
                    .catch(function () {
                        alert('请求服务器超时！')
                    })
                }
            })

 五，箭头函数

　　/*两个参数函数语法
            var fnAlert = (a,b)=>{
                alert(a+b)
            }
            fnAlert(10,10)

    一个参数的函数语法
            var fnAlert = a =>{
                alert(a)
            }
            fnAlert(10)
            
    没有参数的函数语法
    var fnAlert = () =>{
        alert('haha')
    }
    */