zoukankan      html  css  js  c++  java
  • 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=>{
  • 相关阅读:
    linux下启动和关闭网卡命令及DHCP上网
    python 编码问题
    paddlepaddle
    Convolutional Neural Network Architectures for Matching Natural Language Sentences
    deep learning RNN
    Learning Structured Representation for Text Classification via Reinforcement Learning 学习笔记
    Python IO密集型任务、计算密集型任务,以及多线程、多进程
    EM 算法最好的解释
    tensorflow 调参过程
    tensorflow 学习纪录(持续更新)
  • 原文地址:https://www.cnblogs.com/feixiangdecainiao/p/10828486.html
Copyright © 2011-2022 走看看