10.14 结束Vue.js

最新推荐文章于 2023-01-07 16:25:22 发布

吃土豆炖豆角文艺吗

最新推荐文章于 2023-01-07 16:25:22 发布

阅读量196

点赞数

分类专栏： Vue.js

本文链接：https://blog.csdn.net/qq_40710524/article/details/102544065

版权

Vue.js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

prop单项数据流

重写v-model实现 1 绑定值 2 绑定事件

<div id="app">
        {{msg}}
        <component1 :msg="msg"  @inputfn = "inputFn"></component1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component("component1",{
            props:['msg'],
            template:` <input type="text" :value="msg" @change='$emit("inputfn",$event)'>
            `
        })
        var vm = new Vue({
            el:"#app",
            data:{
                msg:"120"
            },
            methods:{
                inputFn(e){
                    this.msg = e.target.value;
                }
            }
       
        })
    </script>

插槽具名插槽插槽作用域

 <div id="app">
        <component1>  
            <template v-slot:one>one 替换</template>
            <template v-slot:two>two 替换 </template>



        </component1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component("component1",{
            template:`<div> 
                    <slot>插槽内容默认</slot>
                    <slot name='one'>插槽内容1</slot>
                    <slot name='two'>插槽内容2</slot>
            </div>`
        })
        var vm = new Vue({
            el:"#app",
            
        })

缓存

动画过渡

进来和出去的是一样的状态 v-enter和 v-leave-to

过渡：v-enter-active 是指从v-enter到v-leave-to v-leave-active 是指v-leave到v-leave-to

transition里加mode属性如 mode="out-in" 出去的先做动画，离开然后新元素做动画进来

in-out就相反

混入 Vue

 <script>
            var mixins={
                data:{
                    a:1,

                }
            };
            var vm =new Vue({
                mixins:[mixins],
                el:"#app",
                data:{ 
                },
                created(){
                    console.log(this.a)
                },
            })
        </script>

mixins 然后根实例里面的data如果需要会覆盖前面的同样的data 然后方法或者周期函数不会覆盖而是合并

vue 自定义指令

   Vue.directive("myhtml",{
                inserted(dom,options){
                    dom.innerHTML = options.value;
                   console.log(arguments);
                },
                update(dom,options){
                   dom.innerHTML = options.value;
                }
            })
            var vm =new Vue({
                // mixins:[mixins],
                el:"#app",
                data:{
                    msg:'hello',
                }
                
            })

主要是inserted update那两个函数传的参数打印出来发现第一个是div （带有指令的dom）第二个是很多其中他的Value是根实例的数据所以就写俩形参

函数渲染和jsx

版本如果是完整的Vue.js （包含编译版和运行版）可以在根实例添加template 也可以render（createElement）

如果是只在运行时版本 Vue.runtime.js 只能用render（createElement）

 var vm =new Vue({
                el:"#app",
                render(createElement){
                    console.log(arguments);
                   return createElement('h1','你好，吗')

                }
               
                
            })

createElement返回的是一个虚拟的节点通过一定的手段（ast 抽象语法树手段）将虚拟节点转换为dom元素

过滤器 filter 只能用在胡子插值格式和V-bind里

Vue.filter('fliterNumber',function(){
                console.log(arguments)
            })

上面是全局的过滤器定义局部的

var vm =new Vue({
                el:"#app",
                data:{
                    list:[1,2,3,4],
                    num:2,
                },
                fliters:{
                    fliterNumber(){

                    }

                }
               
            })

还有过滤器串联和定义多个过滤器等

todolist 感觉写的有bug的然后通过hash来实现的没看是todolist下篇

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .active{
            background: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="text" v-model="val">
        <button @click="add">添加</button>
        <ul>
            <li v-for="(item,index) in newList">
                <span :class="{active:!item.isChecked}"  @click="choose(index)"> {{item.title}}</span>
                <button @click="del(index)">删除</button>
            </li>
        </ul>
        <button @click="show(0)">显示全部</button>
        <button @click="show(1)">显示有效的</button>
        <button @click="show(2)">显示无效的</button>
        <button @click="delAll">删除有效的</button>
    </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var vm =new Vue({
                el:"#app",
                mounted(){
                    this.newList=this.list;
                },
                data:{
                    list:[],
                    newList:[],
                    val:''
                },
                methods:{
                    add(){
                        this.list.push({
                            title:this.val,
                            isChecked:true
                            });
                        this.val='';
                    },
                    del(myIndex)
                    {
                        this.list = this.list.filter((item,index)=>{
                           return  myIndex !=index
                            
                        })
                    },
                    choose(myIndex){
                        // console.log(myItem)
                     this.list.map((item,index)=>{
                            // console.log(item);
                            if(index == myIndex)
                            {
                                item.isChecked=item.isChecked?false:true;
                            } 
                            // return item;
                        });                       
                    },
                    show(index)
                    {
                        switch(index){
                            case 0: this.newList = this.list;break;
                            case 1: this.newList=this.list.filter(item=>item.isChecked==true);break;
                            case 2: this.newList=this.list.filter(item=>item.isChecked==false);break;
                            default:break;
                        }
                    },
                    delAll(){
                        this.list=this.list.filter(item=>item.isChecked==false)
                    }
                    
                }
               
                
            })
        </script>
</body>
</html>

吃土豆炖豆角文艺吗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
10.14 结束Vue.js

prop单项数据流重写v-model实现 1 绑定值 2 绑定事件<div id="app"> {{msg}} <component1 :msg="msg" @inputfn = "inputFn"></component1> </div> <script src="https:/...
复制链接

扫一扫

专栏目录