vue笔记（二）

末蓝、 2022-06-02 03:13 213阅读 0赞

生存周期（具体内容看生存周期章节） 1.0版 1、created //实例被创建 2、beforeCompile //编译之前 3、compiled //编译之后 4、ready //准备完毕 （一般刷新页面更新数据放在这个位置） 5、beforeDestroy //销毁之前 6、destroyed //销毁后

防止页面闪烁【v-cloak】  
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 \[v-cloak\] \{ display: none \} 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

[v-cloak] { display: none; //写在style标签中 } <div v-cloak> { { message }} </div>

计算属性computed

computed:{
          b:function(){ //默认调用的是get方法
                    return this.a+1;//b的值取决于return
        }
    }

完整的计算属性：

computed:{
                b:
                    {
                get:function(){ 
                        //默认方法
            }
            set:function(){ }//不能给自身设置值
        }
    }

计算属性里面一般处理一些业务逻辑的代码，最后值要return出去

vue的实例方法  
var vm = new Vue(\{\});  
vm.$mount(“\#box”) //手动挂载元素  
vm.$el -> 得到绑定的元素  
vm.$data -> 得到实例中的data  
vm.$options -> 获取自定义属性  
例：new Vue(\{  
show:function()\{\},  
data\{\}  
\})  
vm.$destroy -> 销毁对象  
vm.$log -> 查看数据现在的状态

--------------------

track-by=“$index”允许向数组中插入重复数据  
例：`<li v-for="val in arr" track-by="$index">`  
可以提高循环的性能

自定义过滤器

Vue.filter('toDouble',function(input){ 
        return input<10?"0"+input:input;
    })

使用 ： \{msg | toDouble\}  
如果带参数如 \{ \{ msg | toDouble 2 3 \}\}  
这些参数会一次传入函数 msg 2 3

双向过滤器

Vue.filter('abc',{
            read:function(input){ return },
            write:function(val){  return val }
    })

过滤html标签的正则  
str.replace(/<\[^<\]+>/g,”)  
自定义指令  
！！指令一定要定义在Vue实例之前  
Vue.directive(‘abc’,function(input)\{  
this.el// 指令放置的元素，原生dom元素  
\})

调用 *v-abc* =”input”

<body> <div id="box"> <input type="number" v-model="nowIndex"> <ul> <li v-for="val in newdata |orderBy parseInt(nowIndex)" v-red="nowIndex">{ { val}}</li> </ul> </div> <script> Vue.directive('red',function(input){ this.el.style.background="red" console.log(this) console.log(input) }) var c =new Vue({ el:"#box", data:{ center:"", msg:"", newdata:['apple','ddd','banana','orange','pear'], nowIndex:-1 } }) </script>

拖拽实例

自定义元素

Vue.elementDirective('abc',{
        bind:function(){ 
            this.el.style.background="red";
        }
    })

使用 `<abc></abc>`  
也可以在style中写入样式  
abc\{display:block\}

自定义键盘信息Vue.directive(‘on’).keyCodes.ctrl=17;  
将17赋值ctrl，正常情况下支持键码事件，如 ： @keydown.17=””  
但是不支持@keydown.ctrl=”” ,可以用这个方法定义

数据监听$watch
    $watch(name,fncallback)  //浅度监视
    //例
    $watch('a',function(){ alert(1)})
    $watch(name,fncallback,{deep:true})//深度监视，能监视对象内的变化

vue动画

实例代码

配合animate.css

<div class="animated" v-show="a" transition="my-zoom"></div>
    new Vue({
        transition:{
            'my-zoom':{
                enterClass:"zoomInLeft",
                leaveClass:"zoomOutRight"
            }
        }
    })

实例

组件 ：一个大的对象  
定义组件  
1、

var comA=Vue.extend({
        template:"<h1>我是模板哦</h1>"
    })
    Vue.component('aa',comA)
    //调用方法
    <aa></aa>
    **组件里的data数据必须是函数形式，并且return出去，其他方法无变化
    //例
    Vue.extend({
        data(){
            return{
                msg:111
            }
        },
        template:"<h1>{ {msg}}</h1>"
    })

实例（全局组件）

局部组件 （某个Vue实例内部的组件）

其他写组件的方式

Vue.component('aa',{
        template:'<h3>全局组件</h3>'
    })
    //或者写在实例的内部
    new Vue({
        components:{
            'aa':{
                template:'<h1>我是局部组件'
            }
        }
    })

下面是三种写组件方法的实例

模板（还是components的用法,只是template用id关联）

new Vue({
        components:{
            'aa':{
                template:'#aaa'
            }
        }
    })
    //方法一：
    <script type="x-template" id="aaa">
        </h1>我是组件的模板一
    </>
    //方法二
    <template id="aaa">
        <h1>这是第二钟写模板的方法
    </>

模板的实例

动态组件