vuejs

过滤器的使用

通过管道符，只能所用在插值表达式和v-bind

    <div id="app">
        <p>{{ msg | msgFormat('疯狂')|test }}</p>
    </div>

    <script>

        // vue中注意filter的定义顺序,必Vue实例实例化之前
        Vue.filter('msgFormat', function (msg,arg) {
            return msg.replace(/单纯/g, arg)
        })
        Vue.filter('test',function(msg){
            return msg+'--------------'
        })

        var vm = new Vue({
            el: '#app',
            data: {
                msg: '曾经，我也是个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人'
            },
            methods: {

            },
        })
    </script>

私有过滤器的使用

        var vm = new Vue({
            el: '#app2',
            date: {

            },
            methods: {

            },
            filters: {
                dateFormat: function (datestr, pattern='') {
                    var dt = new Date(datestr)

                    var y = dt.getFullYear()
                    var m = (dt.getMonth() + 1).toString().padStart(2,'0')
                    var d = dt.getDate().toString().padStart(2,'0')

                    // return y+'-'+m+'-'+d


                    if (pattern && pattern.toLowerCase() === 'yyyy-mm-dd') {
                        return `${y}-${m}-${d}`
                    } else {
                        var hh = dt.getHours().toString().padStart(2,'0')
                        var mm = dt.getMinutes().toString().padStart(2,'0')
                        var ss = dt.getSeconds().toString().padStart(2,'0')
                        return `${y}-${m}-${d} ${hh}:${mm}:${ss}---`
                    }
                },
            }
        })

注意：全局过滤器和私有过滤器名字重复的时候，采用就近原则：私有过滤器优先

---

按键修饰符

<input type="text" class="form-control" v-model="id" @keyup.enter="add">

给文本框添加的按键修饰符，在使用enter键的时候就会自己调用add函数添加

除此之外还提供下面的按键修饰符：

.enter

.tab

.delete

.esc

.space

.up

.down

.left

.right

可以自己定义，查找文档，js中的键盘码的值

<input type="text" class="form-control" v-model="id" @keyup.f2="add">

自定义一个全局的键盘过滤器

Vue.config.keyCodes.f2=113

其中113是js中F2的键盘码

---

自定义指令获得全局的焦点

        // 1.使用Vue.directive()定义自定义的指令
        // 2.第一个参数是指令的名称，不需要加上V-但是在使用的时候必须加上
        // 3.参数2，是一个对象，有一些指令的函数，在相关的阶段执行相关的操
注意函数中第一个元素必须是el，踏实一个js对象
        Vue.directive('focus',{
            
            bind: function(el){  //绑定的时候只是加载到内存中，所以这时候调用focus方法不会再页面显示
                el.focus()
            },

            inserted: function(el){//这是从内存中插入到页面所以这种可以看到页面上获得焦点
                el.focus()
            }
        })

调用

<input type="text" class="form-control" v-model="keywords" v-focus>

设置搜索文字的颜色

        Vue.directive('color',{//注意这种情况，样式在加载进内存大的时候就会存在，所以插入到页面中就会显示
            bind: function(el){
                el.style.color='red'
            },
            
        })

<input type="text" class="form-control" v-model="keywords" v-focus v-color>

和行为相关的使用inserted，防止js行为失效，和样式相关的一般可以在bind执行

其中含有的函数

bind：指令只会在第一次绑定的时候调用

inserted：被绑定元素插入父节点的时候调用

update：所在组件的VNode更新的时候发生调用，可能发生在孩子之前

componentUpdated：所在组件的VNode及其孩子的VNode全部更新的时候调用

unbind：解绑的时候只调用一次

或者使用钩子函数

钩子函数

        Vue.directive('color',{//注意这种情况，样式在加载进内存大的时候就会存在，所以插入到页面中就会显示
            bind: function(el,binding){
                el.style.color=binding.value  //第二个参数binding中含有很多钩子方法，使用钩子方法获得相关的参数
            },
            
        })

<input type="text" class="form-control" v-model="keywords" v-focus v-color="'blue'">

私有的自定义的指令，两种形式，其中第二种的简写形式就相当于在bind和inserted中写

            directives: {
                'fontweight':{
                    bind: function(el,binding){
                        el.style.fontWeight=binding.value
                    }
                },
                
                'fontsize': function(el,binding){
                    el.style.fontSize=parseInt(binding.value)+'px'
                }
            }

<h3 v-fontweight="900" v-fontsize="60">{{new Date()|dateFormat}}</h3>

---

vue-resource发送get，post，jsonp

手动发起的post没有表单格式，有的服务器处理不了，需要加上下面的黄色部分

            methods: {
                getInfo() {
                    this.$http.get('http://localhost:8080/code/05.html').then(function (result) {
                        console.log(result)
                        console.log(result.body)
                    })
                },

                postInfo() {
                    this.$http.post('http://vue.studyit.io/api/post', {}, {
                        emulateJSON: true
                    }).then(function (result) {
                        console.log(result.body)
                    })
                },
                jsonpInfo(){
                    this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result=>{
                        console.log(result.body)
                    })
                }
            },

jsonp原理

script中请求服务器，URL中带上本地方法，服务器返回函数的调用，但是这时候会加上从服务器传回来的参数

vue中设置每次ajax请求的根路径

Vue.http.options.root='http://vue.studyit.io/'

使用的时候后面的路径写相对路径，不能有斜线，否则不会启用根路径作为拼接

this.$http.get('api/delproduct/'+id).then(result=>{

vue中设置post的全局配置参数

Vue.http.options.emulateJSON=true

使用post的ajax请求的时候

this.$http.post('api/addproduct',{name:this.name}).then(result=>{