vue的常用特性

1.计算属性   computed

  (1)为什么要计算属性:表达式的计算逻辑可能会比较复杂,我们使用计算属性可以使模板内容更加简洁

示例:    <div id="xxoo">
        <div>{{msg}}</div>                       //result:question
        <!-- <div>{{msg.split("").reverse().join("")}}</div>   -->
            <!-- 计算逻辑看起来比较复杂 -->
            <!-- 计算属性放在data中 -->  
        <div>{{reverString}}</div>               //result: noitseuq   
    </div>

    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var pp = new Vue({
            el:"#xxoo",
            data:{          
                msg:"question"
            },
            methods:{      //放vue实例方法
   
            },
            computed:{      //放计算属性
                reverString:function(){   
                  return  this.msg.split("").reverse().join("")   //翻转字符串
                }
            }
        })
    </script>

   (2)计算属性与方法的区别

       ~计算属性是基于它们的依赖进行缓存的  (依赖就是data中的数据 如:this.msg)

　　   ~方法不存在缓存

       <div>{{reverString}}</div>
        <div>{{reverString}}</div>
        <!-- 
            方法没有缓存     计算属性有缓存
            所以打印的结果  methods有两次  computed只有一次  
        -->
        <div>{{reverSt()}}</div>                   //注意:方法要用()
        <div>{{reverSt()}}</div>

2.侦听器  watch

   数据一旦发生变化就通知侦听器所绑定的方法,运用于数据变化时执行异步或开销较大的操作

示例:    <div id="xxoo">
        <div>
            <span>名:</span>
            <input type="text" value="" v-model="name">
        </div>
        <div>
            <span>姓:</span>
            <input type="text" value="" v-model="xing">
        </div>
        <div>{{fullNmae}}</div>
    </div>

   <script src="../node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var pp = new Vue({
            el: "#xxoo",
            data: {
                name: "Jim",
                xing: "Green",
                fullNmae: "Jim Green"
            },
            methods: {
            },
            computed: {
            },
            watch: {
                name: function (val) {
                    this.fullNmae = val + " " + this.xing;             //监听器的名字要和data属性名相同
                },
                xing: function (val) {
                    this.fullNmae = this.name + ' ' + val;　　　　　　　　//监听事件:数据发生变化就触发事件
                },
            },
        })
    </script>

3.过滤器  watch

　　(1)过滤器的作用: 格式化数据,比如将字符串格式化为首字母大写,将日期格式化为指定的格式等

　　(2)自定义过滤器(全局)

示例:  <div id="xxoo">
        <input type="text" v-model="msg">
        <div>
            {{msg | tention}}        //调用过滤器
        </div>
    </div>

    <script type="text/javascript" src="../第一天/node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
    Vue.filter("tention",function(val){                          //全局过滤器
        // return val.charAt(0).toUpperCase() + val.slice(1)    //首字母大写
        return val.charAt(0).toLowerCase() + val.slice(1)  //首字母小写        
        // cahrAt(0)  取出索引为0的数值    slice(1)  从一开始

    })
    var pp = new Vue({
        el:"#xxoo",
        data:{
            msg:"hello",
        },
        methods:{
        },
    })
    </script>

　　(3)局部过滤器

filters:{
    capitalize:function(){}
}

　　(4)带参数的过滤器

    <div id="xxoo">
        <div>{{msg | timeClass("yyyy-MM-dd")}}</div>        
        <!-- 带参数的过滤器 -->
    </div>

    <script type="text/javascript" src="../第一天/node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">

    Vue.filter( "timeClass", function(val,arg1){  // val就是msg   arg1是过滤器内的参数
        var yet = "";
        yet = val.getFullYear() + "-" + val.getMonth() + "-" +val.getDate()
        // 年月日拼接
        return yet;       //过滤器返回结果
    })
        var pp = new Vue({
            el:"#xxoo",
            data:{
                msg:new Date(),
            },
        })
    </script>