• Vue入门实例及思想(二)


    样式绑定

    class绑定:v-bind:class="expression";

    style绑定:v-bind:style="expression"; expression允许接收的类型:字符串、数组、对象。

         <p :class="clas">但是他不可能一直都是Vue的菜鸟。</p>
         <p :class="claess">这里是数组的两个类选择器的样式</p>
         <div :style="syt">Vue用对象方式绑定style样式</div>
         <div :style="{color:cname,fontSize: fsize}">Vue的直接对象方式绑定style样式</div>

    修饰符(Vue通过.指令后缀来调用修饰符实现不同的功能)

    (1).lazy:默认情况下, v-model在input事件中同步输入框的值与数据,但你可以添加一个修饰符lazy,从而转变为在change事件中同步。

      (2).number:将用户的输入值转为 Number 类型。

      (3)  .trim:自动过滤用户输入的首尾空格。

                <input type="text" v-model="content" placeholder="请输入" /><button @click="doMsg">发送</button><br />
                <!-- 实例2:实现一次性按钮once -->
                <input type="text" v-model="content" placeholder="请输入" /><button @click.once="doMsg">只可发送一次</button><br />            
                <!-- 实例3:阻止表单提交prevent -->
                <form action="dsafaf.html" method="post" @submit.prevent="doSubmit" >
                        <label for="bname">书本名称:</label><input type="text" name="bname" v-model="bname" /><br />
                        <label for="price">书本价格:</label><input type="text" name="price" v-model="price" /><br />
                        <input type="submit" value="新增" /><br />
                </form>
                <!-- 修饰符可以串联,多个修饰符 -->
                <a href="" @click.stop.prevent="doMsg">修饰符可以串联</a>
                <!-- 阻止事件冒泡 -->
                <a href="" @click.stop="doMsg()">阻止单击事件冒泡</a>
                <!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
                <div v-on:click.self="doMsg" :class="claess">只在此区域发生的事件监听有效</div>
                <!-- 实例4:回车发送消息 -->
                <p>
                    <input type="text" v-model="mesg" placeholder="请输入" @keyup.enter="sendMsg" />
                </p>

    表单(Vue中表单操作)

                    <label for="username">账号:</label><input type="text" name="username" v-model="uname" /><br />
                    <label for="password">密码:</label><input type="password" name="password" v-model="pwd" /><br />
                    <label for="sex">性别:</label>
                        <input type="radio" v-model="sex" value="男" /><input type="radio" v-model="sex" value="女" /><br />
                    <label for="city">城市:</label><select v-model="city" style=" 165px;">
                        <option value="">--请选择--</option>
                        <option v-for="ct in cites" :value="ct.value">{{ct.name}}</option>
                    </select><br />
                    <label>爱好:</label><span v-for="h in hobbies"><input type="checkbox" v-model="hobby" :value='h.id'/>{{h.name}}</span><br />
                    <label for="text">备注:</label><textarea v-model="textara"></textarea><br />
                    <input type="checkbox" title="勾选代表你已同意相关协议" v-model="flag"  /><a href="#">我已阅读并同意相关协议</a><br />
                    <button @click="doRegister" :disabled="!flag">注册</button>

    自定义指令(除了Vue自带的指令,Vue也允许注册自定义指令。根据作用范围分为全局指令和局部指令。)

    Vue.directive("focus",{});//全局指令

    new Vue({
    el:"#d1",
    directives:{//局部指令
    focus:{}
    }
    });

                <!-- 局部 -->
                <div v-clog:abs.a.b="ts">
                    此元素带有自定义的局部指令。
                </div>
                <div ref='direct'>
                    此元素带有自定义的全局指令。
                </div>

    自定义指令的钩子函数:

    bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作
    inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。
    update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。
    componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
    unbind: 只调用一次, 指令与元素解绑时调用。

     vue组件

    组件(Component)是Vue最强大的功能之一;组件可以扩展HTML元素,封装可重用的代码;组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树。

    全局组件:Vue.component(tagName, options),tagName为组件名,options为配置选项。
    局部组件: new Vue({el:'#d1',components:{...}})

    局部组件定义:

                    components:{//局部组件
                    'custom-button':{//自定义组件必须使用‘-’命名法。
                        template:"<button @click='doClick'>[局部组件]已点击{{count}}次</button>",//模板
                        data(){//为组件定义data属性必须使用函数方式返回属性,因为组件是多例模式。
                            return {
                                count:0
                            }
                        },
                        methods:{
                            doClick(){
                                ++this.count;
                                console.log(this.textName);
                            }
                        },
                        props:{
                            textName:{//参数名
                                type:[String,Number,Object,Boolean],//可选参数
                                required:true//必选
                            },
                            
                        },//传递参数必须使用驼峰命名法,并且此属性可以接受动态值。
                        
                    }
                    
                }

    全局组件:

            /* 全局组件 */
            Vue.component('kfc-button',{
                template:"<button @click='doThreeClick'>[全局组件]已点击{{count}}次</button>",//模板
                data(){//为组件定义data属性必须使用函数方式返回属性,因为组件是多例模式。
                    return {
                        count:0
                    }
                },
                methods:{
                    doThreeClick(){
                        ++this.count;
                        if(this.count%3===0){
                            console.log('子组件点击次数是3的倍数:次数为:',this.count);
                            //利用$emit将子组件中的参数传递到父组件
                            this.$emit('three-click',this.count);//注意组件中定义的事件名称要与标签体中的事件名对应,调用的方法用参数接受传递的值,必须使用短横线分隔命名法
                        }
                    }
                }
            });

    HTML语言:

                <p>
                    <!-- 推荐使用短横线 -->
                    <custom-button text-name="王五"></custom-button>
                </p>
                <h3>5.2 全局组件</h3>
                <p>
                    <!-- 推荐使用短横线 -->
                    <kfc-button  ></kfc-button>
                </p>

    传参数的问题,因为我们总有那种需要在组件之间传递数据的需求:

    props是父组件用来传递数据的一个自定义属性。

                <h3>5.3 传参问题</h3>
                <p>
                    <!-- 父组件 -> 子组件通过props定义参数的方式 -->
                    <!-- 只能使用短横线分隔命名法,因为HTML语言的元素属性(attribute)是不敏感大小写的,在浏览器编译时会自动将大写的属性转换为小写。 -->
                    <custom-button :text-name="stu.name"></custom-button><!-- 这个stu为对象,可以调用方法或使用表达式 -->
                </p>
                <p>
                    <!-- 子组件 -> 父组件通过$emit自定义事件传递参数的方式 -->
                    <kfc-button @three-click="doComponentParent"></kfc-button>
                </p>

    附上所有实例代码(可直接运行):

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>Vue实例</title>
            <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js" type="text/javascript" charset="utf-8"></script>
            <style type="text/css">
                .cla{
                    color: crimson;
                    font-size: 25px;
                }
                .cl1{
                    color: blueviolet;
                    font-weight: bold;
                }
                .cl2{
                    background-color: darkorange;
                }
                
            </style>
        </head>
        <body>
            <div id="app"><!-- 挂载区域 -->
                <h2>{{ts}}</h2>
                <h2>1.样式绑定(表达式可以接收对象,数组,字符串)</h2>
                <h3>1.1 class绑定</h3>
                <!-- 传统方式 -->
                <p class="cla">这是一个Vue的菜鸟初学者。</p>
                <!-- Vue方式 -->
                <p :class="clas">但是他不可能一直都是Vue的菜鸟。</p>
                <p :class="claess">这里是数组的两个类选择器的样式</p>
                <h3>1.2 style绑定</h3>
                <!-- 传统方式 -->
                <div style="color: aqua;font-size: 25px;">传统方式的内联style样式</div>
                <!-- Vue方式 -->
                <div :style="syt">Vue用对象方式绑定style样式</div>
                <div :style="{color:cname,fontSize: fsize}">Vue的直接对象方式绑定style样式</div>
                <div :style="syt">Vue方式绑定style样式</div>
                <h2>2.修饰符(Vue通过.指令后缀来调用修饰符实现不同的功能)</h2>
                <h3>2.1 事件修饰符和按键修饰符</h3>
                <!-- 实例1:按钮点击事件 -->
                <p>{{msg}}</p>
                <input type="text" v-model="content" placeholder="请输入" /><button @click="doMsg">发送</button><br />
                <!-- 实例2:实现一次性按钮once -->
                <input type="text" v-model="content" placeholder="请输入" /><button @click.once="doMsg">只可发送一次</button><br />            
                <!-- 实例3:阻止表单提交prevent -->
                <form action="dsafaf.html" method="post" @submit.prevent="doSubmit" >
                        <label for="bname">书本名称:</label><input type="text" name="bname" v-model="bname" /><br />
                        <label for="price">书本价格:</label><input type="text" name="price" v-model="price" /><br />
                        <input type="submit" value="新增" /><br />
                </form>
                <!-- 修饰符可以串联,多个修饰符 -->
                <a href="" @click.stop.prevent="doMsg">修饰符可以串联</a>
                <!-- 阻止事件冒泡 -->
                <a href="" @click.stop="doMsg()">阻止单击事件冒泡</a>
                <!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
                <div v-on:click.self="doMsg" :class="claess">只在此区域发生的事件监听有效</div>
                <!-- 实例4:回车发送消息 -->
                <p>
                    <input type="text" v-model="mesg" placeholder="请输入" @keyup.enter="sendMsg" />
                </p>
                <h2>3.表单</h2>
                
                    <label for="username">账号:</label><input type="text" name="username" v-model="uname" /><br />
                    <label for="password">密码:</label><input type="password" name="password" v-model="pwd" /><br />
                    <label for="sex">性别:</label>
                        <input type="radio" v-model="sex" value="男" />男
                        <input type="radio" v-model="sex" value="女" />女<br />
                    <label for="city">城市:</label><select v-model="city" style=" 165px;">
                        <option value="">--请选择--</option>
                        <option v-for="ct in cites" :value="ct.value">{{ct.name}}</option>
                    </select><br />
                    <label>爱好:</label><span v-for="h in hobbies"><input type="checkbox" v-model="hobby" :value='h.id'/>{{h.name}}</span><br />
                    <label for="text">备注:</label><textarea v-model="textara"></textarea><br />
                    <input type="checkbox" title="勾选代表你已同意相关协议" v-model="flag"  /><a href="#">我已阅读并同意相关协议</a><br />
                    <button @click="doRegister" :disabled="!flag">注册</button>
                    
                <h2>4.自定义指令(除了Vue自带的指令,Vue也允许注册自定义指令。根据作用范围分为全局指令和局部指令。)</h2>    
                <!-- 局部 -->
                <div v-clog:abs.a.b="ts">
                    此元素带有自定义的局部指令。
                </div>
                <div ref='direct'>
                    此元素带有自定义的全局指令。
                </div>
                <h2>5.Vue组件(组件是Vue最强大的功能之一,可以扩展HTML元素,封装可重用的代码,分为全局组件和局部组件。)</h2>
                <h3>5.1 局部组件</h3>
                <p>
                    <!-- 推荐使用短横线 -->
                    <custom-button text-name="王五"></custom-button>
                </p>
                <h3>5.2 全局组件</h3>
                <p>
                    <!-- 推荐使用短横线 -->
                    <kfc-button  ></kfc-button>
                </p>
                <h3>5.3 传参问题</h3>
                <p>
                    <!-- 父组件 -> 子组件通过props定义参数的方式 -->
                    <!-- 只能使用短横线分隔命名法,因为HTML语言的元素属性(attribute)是不敏感大小写的,在浏览器编译时会自动将大写的属性转换为小写。 -->
                    <custom-button :text-name="stu.name"></custom-button><!-- 这个stu为对象,可以调用方法或使用表达式 -->
                </p>
                <p>
                    <!-- 子组件 -> 父组件通过$emit自定义事件传递参数的方式 -->
                    <kfc-button @three-click="doComponentParent"></kfc-button>
                </p>
            </div>
        </body>
        <script type="text/javascript">
            /* 全局组件 */
            Vue.component('kfc-button',{
                template:"<button @click='doThreeClick'>[全局组件]已点击{{count}}次</button>",//模板
                data(){//为组件定义data属性必须使用函数方式返回属性,因为组件是多例模式。
                    return {
                        count:0
                    }
                },
                methods:{
                    doThreeClick(){
                        ++this.count;
                        if(this.count%3===0){
                            console.log('子组件点击次数是3的倍数:次数为:',this.count);
                            //利用$emit将子组件中的参数传递到父组件
                            this.$emit('three-click',this.count);//注意组件中定义的事件名称要与标签体中的事件名对应,调用的方法用参数接受传递的值,必须使用短横线分隔命名法
                        }
                    }
                }
            });
            var vm = new Vue({
                el:'#app',
                data:{
                    ts:new Date().getTime(),
                    clas:'cla',//类选择器
                    syt:{//样式对象
                        color:'green',
                        fontSize:'25px'
                    },
                    cname:'red',
                    fsize:'25px',
                    claess:['cl1','cl2'],//一组类样式
                    msg:'',
                    content: '',
                    bname:'',
                    price:'',
                    mesg:'',
                    cites:[//数组绑定下拉框
                        {name:'长沙',value:1},
                        {name:'岳阳',value:2},
                        {name:'株洲',value:3},
                        {name:'永州',value:4}
                    ],
                    uname:'',
                    pwd:'',
                    city:'',
                    hobbies:[//绑定爱好复选框
                        {id:1,name:'游泳'},
                        {id:2,name:'健身'},
                        {id:3,name:'游戏'},
                        {id:4,name:'动漫'}
                    ],
                    hobby:[],//接收爱好数据
                    sex:'男',
                    textara:'',
                    flag:false,//定义阅读协议变量
                    stu:{id:1,name:'这里是参数哦'}
                },
                methods:{
                    doMsg(){
                        this.msg = this.content;
                    },
                    doSubmit(){
                        console.log(this.bname,this.price);
                    },
                    sendMsg(){
                        this.msg = this.mesg;
                    },
                    doRegister(){
                        let params = {
                            username : this.uname,
                            password : this.pwd,
                            sex : this.sex,
                            city:this.city,
                            hobbies : this.hobby,
                            textara : this.textara
                        };
                        console.log(params);
                    },
                    doComponentParent(value){
                        //子组件传的参数
                        console.log('【父组件接受参数:】'+value);
                    }        
                },
                computed:{//计算
                    ok(){
                        return !this.flag;
                    }
                },
                directives:{//自定义局部指令
                    clog:{//注册指令
                        bind(el, binding, vnode) {//el:此节点,bingding:指令存储信息的对象,vnode:Vue编译生成的虚拟节点
                            let s = JSON.stringify;
                            el.innerHTML =
                              'name: '       + s(binding.name) + '(指令名,不包括v-前缀)<br>' +
                              'value: '      + s(binding.value) + '(指令绑定的值)<br>' +
                              'expression: ' + s(binding.expression) + '(字符串形式的指令表达式)<br>' +
                              'argument: '   + s(binding.arg) + '(传给指令的参数,可选)<br>' +
                              'modifiers: '  + s(binding.modifiers) + '(包含所有修饰符的对象)<br>' +
                              'vnode keys(Vue 编译生成的虚拟节点信息。): ' + Object.keys(vnode).join(', ');
                        },    
                        inserted(){
                            console.log('这个元素被插入父节点!');
                        },
                        update(){
                            console.log('这个元素被更新了!');
                        },
                        componentUpdated(){
                            console.log('这个VNode 及其子 VNode 全部更新后调用。!');
                        },
                        unbind(){
                            console.log('元素已解绑!');
                        }
                    }
                },
                components:{//局部组件
                    'custom-button':{//自定义组件必须使用‘-’命名法。
                        template:"<button @click='doClick'>[局部组件]已点击{{count}}次</button>",//模板
                        data(){//为组件定义data属性必须使用函数方式返回属性,因为组件是多例模式。
                            return {
                                count:0
                            }
                        },
                        methods:{
                            doClick(){
                                ++this.count;
                                console.log(this.textName);
                            }
                        },
                        props:{
                            textName:{//参数名
                                type:[String,Number,Object,Boolean],//可选参数
                                required:true//必选
                            },
                            
                        },//传递参数必须使用驼峰命名法,并且此属性可以接受动态值。
                        
                    }
                    
                }
            });
            
            /* 全局指令 */
            Vue.directive('direct',{
                inserted(){
                    console.log('自定义全局指令的元素被插入父节点!');
                },
            });
        </script>
    </html>
    View Code
  • 相关阅读:
    Opencv保存摄像头视频&&各种编码器下视频文件占用空间对比
    生活的 tricks
    生活的 tricks
    词汇的积累 —— 反义词、同义词
    词汇的积累 —— 反义词、同义词
    目标跟踪系列十一:Exploiting the Circulant Structure of Tracking-by-detection with Kernels代码思路
    Java中Integer类的方法
    php中 重载(二)
    协方差的意义
    malloc函数具体解释
  • 原文地址:https://www.cnblogs.com/StarChen20/p/13690155.html
Copyright © 2020-2023  润新知