2020.10.16.叶梦宇

vue 02day

框架和库的区别

框架:是一套完整的解决方案:对目标的侵入性较大 项目如果需要更换框架,则需要重新架构整个项目。

库(插件):提供某一小功能,,对项目的侵入 性较小,如果某个库无法完成某些需求,可以很容易切换到其他库实现需求

node(后端)中的mvc域前端中mvvm之间的区别

后端的mvc
在这里插入图片描述
前端的mvvm的由来
在这里插入图片描述

vue的 内联样式

使用class样式

<div id="app">
            <!-- 第一种使用方式,直接传递一个数组,注意:这里的class需要使用v-bind做数据绑定-->
            <h2 :class="['color','fontsize']">{{message}}</h2>
            <h2 :class="['color','fontsize',{'active':flag}]">{{message}}</h2>
            <!-- 如果flag为true就显示 -->
            
            <!-- 在为class使用v-bind 绑定对象的时候 ,队形的属性是类名,对象的属性可带引号也可以不带,属性的值是一个标识符-->
            <h2 :class="{color:true,fontsize:true,active:false}">{{message}}</h2>
            <!-- 简写一下 -->
            <h2 :class="classobj">{{message}}</h2>
        </div>

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            
            var app = new Vue({
                    el: '#app',
                    data: {
                     message:"不可改变的1234",
                     flag:true,
                     classobj:{color:true,fontsize:true,active:false}
                    },
                });
        </script>

使用style

<div id="app">
            <!-- 对象就是无序建值对的集合,如果有-必须加上引号-->
            <h1 :style="{color:'red','font-weight':200}">{{message}}</h1>
            
            <h1 :style="styleobj">{{message}}</h1>
            <h1 :style="[styleobj,styleobj1]">{{message}}</h1>
        </div>

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            
            var app = new Vue({
                    el: '#app',
                    data: {
                     message:"不可改变的1234",
                     styleobj:{color:'red','font-weight':200},
                     styleobj1:{'fontsize':'italic'}
                    },
                });
        </script>

过滤器

Vue.js允许自定义过滤器,可用作一些常见的文本格式化,过滤器 可以用在两个地方:mustache插值和v-bind表达式,过滤器应该被添加在JavaScript表达式的尾部,由“管道”符所指示

过滤器的基本使用方法

//过滤器的定义语法
// Vue.filter('过滤器的名称',fucntion(){})
//过滤器调用时的格式  {{name | 过滤器的名称}}   |:管道符
//过滤中的function,第一个参数已经被规定死了,永远都是过滤管道符前面传递过来的数据
Vue.filter('过滤器名称',function(data){})

简单用法

<div id="app">
            <p>{{message | mesg}}</p>
            
        </div>

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //定义igevue全局的过滤器,名字叫做 message
            Vue.filter('mesg',function(message){
                //字符串的replace方法,第一个参数,除了可写一个字符串 之外,还可以定义一个正则,g时全局匹配的意思
                return message.replace(/你好/g,'你不好')})
            var app = new Vue({
                el: '#app',
                data: {
                    message:"你好觉得降低哦我讲究的里外的了"
                },
                methods:{
                    add:function(){
                        this.list.push({id:this.id,name:this.name})
                    }
                }
            });
        </script>

第二种

<div id="app">
           //还可以传多个参数
           //<p>{{message | mesg('我超好','123')}}</p>
            <p>{{message | mesg('我超好')}}</p>
            //也可以调用多个过滤器
             //<p>{{message | mesg('我超好','123') | test}}</p>
        </div>

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">

            Vue.filter('mesg',function(message,changemessaeg,changemessage){
        
                //return message.replace(/你好/g,changemessaeg+changmessage2)})       
                return message.replace(/你好/g,changemessaeg)})
vue.filter('test',function(message){
return message +'=========='
})
            var app = new Vue({
                el: '#app',
                data: {
                    message:"你好觉得降低哦我讲究的里外的了"
                },
                methods:{
                    add:function(){
                        this.list.push({id:this.id,name:this.name})
                    }
                }
            });
        </script>

定义格式化时间的全局过滤器
//所有的vue实例都共享的

<div id="app">
            <table v-for="item in list">
                <tr>
                    <th>{{item.ctime | dateformat('')}}</th>
                </tr>
                
            </table>

        </div>

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            Vue.filter('dateformat',function(dateStr,patten){
                var dt =new Date(dateStr)
                var y=dt.getFullYear()
                var m=dt.getMonth()+1
                var d=dt.getDate()
                
                
                
                if(patten.toLowerCase()==='yyyy-mm-dd'){
                    return `${y}-${m}-${d}`
                }else{
                    var hh=dt.getHours()
                    var mm=dt.getMinutes()
                    var ss=dt.getSeconds()
                    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
                }
            })
            var app = new Vue({
                el: '#app',
                data: {
                list:[
                    {ctime:new Date()},
                    {ctime:new Date()},
                    {ctime:new Date()}
                ]
                },

            });
        </script>

定义私有过滤器
过滤器的调用也遵守就近原则,先调用私有的

<div id="app">
            <table v-for="item in list">
                <tr>
                    <th>{{item.ctime | dateorfmat('')}}</th>
                </tr>

            </table>

        </div>

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            
            var app = new Vue({
                el: '#app',
                data: {
                    list: [{
                            ctime: new Date()
                        },
                        {
                            ctime: new Date()
                        },
                        {
                            ctime: new Date()
                        }
                    ]
                },
                filters: { //定义私有过滤器
                    dateorfmat: function(dateStr, patten='') {
                        var dt = new Date(dateStr)
                        var y = dt.getFullYear()
                        var m = dt.getMonth() + 1
                        var d = dt.getDate()



                        if (patten.toLowerCase() === 'yyyy-mm-dd') {
                            return `${y}-${m}-${d}`
                        } else {
                            var hh = dt.getHours()
                            var mm = dt.getMinutes()
                            var ss = dt.getSeconds()
                            return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
                        }
                    }
                }

            });
        </script>

es6中的字符串新方法
maxlength填充完之后的最大长度,fillstring用什么填充
String.prototype.padStart(maxLength.fillString='')或String.prototype.padEnd(maxLength.fillString='')来填充字符
注意:因为这是字符串方法所以要先转成字符串。

<div id="app">
            <table v-for="item in list">
                <tr>
                    <th>{{item.ctime | dateorfmat('')}}</th>
                </tr>

            </table>

        </div>

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            
            var app = new Vue({
                el: '#app',
                data: {
                    list: [{
                            ctime: new Date()
                        },
                        {
                            ctime: new Date()
                        },
                        {
                            ctime: new Date()
                        }
                    ]
                },
                filters: { //定义私有过滤器
                    dateorfmat: function(dateStr, patten='') {
                        var dt = new Date(dateStr)
                        var y = dt.getFullYear()
                        var m = dt.getMonth() + 1
                        var d = dt.getDate()



                        if (patten.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}`
                        }
                    }
                }

            });
        </script>

自定义按键修饰符

使用@keyup,@keydown,@keypess 来使用键盘按键
vue定义了可以直接使用的键盘

name: <input type="text" v-model="name" @keyup.enter="add">
别名
.delete
.tab
.enter
.esc
.space
.left
.up
.right
.down
.ctrl

还可以组合写,当两个按钮一起按时才可以触发

@keyup.alt.67=”function” Alt+c

如果Vue中没有别名可以直接使用 键盘码来添加事件
在这里插入图片描述
@keyup.113="add"
自定义全局的按键修饰符

Vue.config.keyCodes.c=67

自定义全局指令

注意:在vue中所有指令都要加v-
使用钩子函数

<div id="app">
        <input type="text" v-focus />
    </div>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //使用vue.directive()定义全局指令
        //参数一是指令的名称,定义时不加v-,但是调用 时要加v-
        //参数是一个对象,这个对象身上,有一些相关的指令函数,这些函数可以在特定阶段,执行相关 操作
        Vue.directive('focus',{
            bind:function(el){
                //每当指令绑到元素上的时候,会立即执行这个bind函数,只执行一次
                //注意:在每个函数中,第一个参数永远时el,表示绑定了指令的那个元素,这个el参数,是一个原生的 js对象
            },
            inserted:function(el){
                //inserted 表示元素插入到DOM中的时候。会执行inserted函数【触发一次】
                el.focus()
            },
            updated:function(el){
                //当VNode更新的时候,会执行 updated,可能触发多次
                el.focus()
            }
        })
    
        var app=new Vue({
            el:"#app"
        })

注意一定要要讲究顺序,任何全局的东西都要放在vue实例化之前
还有其他两个选项函数
componentUpdated:被绑定的元素所在模板 完成一次更新周期时调用。
unbind:只调用一次,指令与元素解绑时调用。

在这里插入图片描述

钩子函数

在这里插入图片描述

<div id="app">
            <input type="text"  value="哈哈哈哈" />
            <!-- 加单引号是因为是一个字符串,不加单引号就是一个变量 -->
            <input type="text" v-color="'blue'" value="哈哈哈哈" />
            <input type="text"  v-color="'red'" value="哈哈哈哈"  />
        </div>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            Vue.directive('color', {
                bind: function(el, binding) {
                    //样式只要通过指令绑定给了元素,,不管这个元素有没有被插入到页面中去,这个元素肯定都有了一个内联样式
                    //将来元素坑定会显示到页面中去,这时候,浏览器渲染引擎必然会解析样式,应用给这个元素
                    
                        // el.style.color='red'
                        el.style.color=binding.value
                    
                        console.log(binding.value)
                    //和样式相关的操作,一般都可以在bind中执行
                },
                inserted: function(el) {
                    //和js行为有关的操作 ,最好在inserted中去执行,放置
                    el.focus()
                },
                updated: function(el) {

                    el.focus()
                }
            })

            var app = new Vue({
                el: "#app"
            })
        </script>

自定义私有指令

var app = new Vue({
                el: "#app",
                data:{
                    
                },
                directives:{
                    //自定义私有指令
                    'color':{
                        bind:function(el.binding){
                            el.style.color=binding.value
                            
                        }
                    },
                    'fontsize':function(el,binding){
                    //注意:这个function 等同于把代码写到了bind和update中
                    el.style.fontSize=parseInt(binding.value)+'px'
                    }
                }
            })

vue实例的生命周期

在这里插入图片描述
在这里插入图片描述

<div id="app">
            
            <p id="a">{{msg}}</p>
            <button type="button"@click="msg='no'">修改msg的值</button>
        </div>

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var app = new Vue({
                el:"#app",
                data:{
                    msg:"ok"
                },
                methods:{
                    show(){
                        console.log('执行了')
                    }
                },
                beforeCreate(){//这是我们遇到的第一个生命周期函数,表示实例完全被创建 出来之前会执行他
                console.log(this.msg) //=>undefined
                this.show()//也报错
                //注意:data和methods中的数据还没有被初始化
                    
                },
                created(){//设施遇到的第二个生命周期函数
                console.log(this.msg)
                this.show()
                //都能被打印出来
                //在created中,data和methods都已经被初始化好了
                //如果要调用methods中的方法,或者操作data中的数据,最早,只能在created中操作
                    
                },
                beforeMount(){//这是遇到的第三个生命周期函数,表示模板已经在内存中编辑完成了,但是尚未把模板渲染到页面中
                
                console.log(document.getElementById('a').innerText)  //=>{{msg}}
                //在beforeMount执行的时候,页面中的元素,还没有真正替换过来,只是之前写的一些模板字符串
                },
                mounted(){//这是遇到的第四个生命周期函数,北边是,内存中的模板,已经真实的挂载到了页面中,用户已经可以看到渲染好的页面了
                    console.log(document.getElementById('a').innerText) 
                    //注意mounted是实例创建期间的最后一个生命周期函数,当执行完mounted就表示,实例已经被完全创建好了,此时,如果没有其他操作的话,这个实例,就静静的让躺在我们的内存中,一动不动
                },
                
                
                //接下来的是运行中的两个事件
                beforeUpdate(){//这时候表示我们的页面还没有被更新【数据被更新了吗?数据肯定被更新了】
                console.log('界面上元素的内容'+document.getElementById('a').innerText) //=>ok
                console.log('data中的msg数据是:'+this.msg)//=>no
                //得出结论:当执行beforeUpdate的时候,页面中显示的数据还是旧的,此时data数据是最新的 ,页面尚未和最新数据保持同步
                },
                updated(){
                    console.log('界面上元素的内容'+document.getElementById('a').innerText) //=>no
                    console.log('data中的msg数据是:'+this.msg)//=>no
                //updated事件执行的时候,页面和data数据已经保持同步了
                    
                }
                
                })
            
        </script>

最重要的是created和mounted

学习心得

最近的中心都在Vue身上了,偶尔也刷刷面试题。

标签

评论