第二节: Vuejs常用特性1

一. 常用特性

1. 表单元素

　　通过 v-model指令绑定输入框、单选/多选框、下拉框、文本框

2. 表单域修饰符

(1) .number:转换成数值，如果输入的是非数字字符串时，无法进行转换

(2) .trim:自动过滤输入的收尾字符串，不能去除中间的空格

(3) .lazy:将输入input（即输入）事件切换成change事件，在失去焦点或按下回车键才更新内容值，输入的过程中不响应式更新。

3. 自定义指令

(1).全局自定义：Vue.directive 注册全局指令，里面除了第一个参数el默认传入外，还可以传递别的参数

(2).实例内自定义：在实例的directives定义局部指令

注意：这里自定义指令的时候，不要驼峰命名，如myFocus！，要这样命名：myfoucs。如果myFocus来命名，只能这样 v-my-focus，不推荐。

PS 钩子函数

　　自定义指令的时候要用到钩子函数，这里仅介绍两个最常用的。

　　A. bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

　　B. inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

钩子函数中的固定参数：

　　A. el：指令所绑定的元素，可以用来直接操作 DOM 。

　　B. binding：一个对象，包含以下属性：

　　　　a. name：指令名，不包括 v- 前缀。

　　　　b. value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。

　　　　c. oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。

　　　　d. expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。

　　　　C. arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。

　　　　D. modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。

4. 计算属性 Computed

　　模板中放入太多的逻辑会让模板过重且难以维护使用计算属性可以让模板更加的简洁，computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化。

PS: 计算属性和方法的区别？

　　计算属性是有缓存的，同种情况下仅调用一次，方法则调用多次。如下案例:计算属性中的console.log仅打印一次，方法则打印了多次哦。

详细代码如下：

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>03-常用特性title>
        <style type="text/css">
            p {
                color: #0000FF;
                font-size: 18px;
            }

            div {
                margin-bottom: 10px;
            }
        style>
    head>
    <body>
        <div id="myApp">
            <p>1.表单元素p>
            <div>
                <div><input type="text" v-model="myName">div>
                <div>
                    <input type="radio" id="male" value="1" v-model='gender'>
                    <label for="male">男label>
                    <input type="radio" id="female" value="2" v-model='gender'>
                    <label for="female">女label>
                div>
                <div>
                    <span>爱好：span>
                    <input type="checkbox" id="ball" value="1" v-model='hobby'>
                    <label for="ball">篮球label>
                    <input type="checkbox" id="sing" value="2" v-model='hobby'>
                    <label for="sing">唱歌label>
                    <input type="checkbox" id="code" value="3" v-model='hobby'>
                    <label for="code">写代码label>
                div>
                <div>
                    <span>职业：span>
                    <select v-model='occupation1'>
                        <option value="0">请选择职业...option>
                        <option value="1">教师option>
                        <option value="2">软件工程师option>
                        <option value="3">律师option>
                    select>
                div>
                <div>
                    <span>职业：span>
                    <select v-model='occupation2' multiple>
                        <option value="0">请选择职业...option>
                        <option value="1">教师option>
                        <option value="2">软件工程师option>
                        <option value="3">律师option>
                    select>
                div>
            div>
            <p>2.表单修饰符p>
            <div>
                <input type="text" v-model.number="msg" placeholder=".number用法">
                <input type="text" v-model.trim="msg" placeholder=".trim用法">
                <input type="text" v-model.lazy="msg" placeholder=".lazy用法">
                <div v-text="msg">div>
                <button type="button" @click="handle">测试button>
            div>
            <p>3.自定义指令p>
            <div>
                <input type="text" v-myfocus>
                <div v-mycolor="colornName">带参数的自定义指令div>
            div>
            <p>4.计算属性p>
            <div>
                <span>下面是计算属性调用span>
                <div>{{myCalculate}}div>
                <div>{{myCalculate}}div>
                <span>下面是方法调用span>
                <div>{{myHandle()}}div>
                <div>{{myHandle()}}div>
            div>
        div>            
        <script src="./js/vue.min.js" type="text/javascript" charset="utf-8">script>
        <script type="text/javascript">
            //全局自定义指令
            Vue.directive('myfocus', {
                //inserted钩子函数：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
                //el表示指令所绑定的元素，可进行dom操作，el名称是固定的
                inserted: function(el) {
                    el.focus(); //聚焦
                }
            });
            Vue.directive('mycolor', {
                //bind钩子函数：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
                //binding，固定名，bingding.value 表示绑定的值
                bind: function(el, binding) {
                    el.style.color = binding.value;
                }
            });
            var vm = new Vue({
                el: '#myApp',
                data: {
                    myName: 'ypf01',
                    gender: '2',
                    hobby: ['1', '3'],
                    occupation1: '2',
                    occupation2: ['0', '2', '3'],
                    msg: '',
                    colornName: 'green',
                    num: 100
                },
                methods: {
                    handle: function() {
                        alert("长度为：" + this.msg.length);
                    },
                    myHandle: function() {
                        console.log('我是方法调用哦');
                        var total = 0;
                        for (var i = 0; i < this.num; i++) {
                            total = total + i;
                        }
                        return total;
                    }
                },
                //局部指令
                directives: {
                    // myfocus: {
                    //     inserted: function(el) {
                    //         el.focus(); //聚焦
                    //     }
                    // },
                    // mycolor: {
                    //     bind: function(el, binding) {
                    //         el.style.color = binding.value;
                    //     }
                    // }
                },
                //计算属性
                computed: {
                    myCalculate: function() {
                        console.log('我是计算属性哦');
                        var total = 0;
                        for (var i = 0; i < this.num; i++) {
                            total = total + i;
                        }
                        return total;
                    },
                }
            });
        script>
    body>
html>

运行结果：

作者 : Yaopengfei(姚鹏飞)
博客地址 : http://www.cnblogs.com/yaopengfei/
声明1 : 如有错误，欢迎讨论，请勿谩骂^_^。
声明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。

09-Vue全家桶

第二节: Vuejs常用特性1

相关

标签