Vue总结（三）

Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。

 var App = new Vue({

       el: "#root",

       data: {

            message: "asdasdasd"

       }

)};

App.$weach("message",function(newVal,oldVal) {

    console.log(newVal);

    console.log(oldVal);

});

//es6中的箭头函数中的this并不是实例，要使用是用实例，可使用实例的对象App.message = "assassin";

模板语法

{{}}差值表达式

v-text="message" <=> {{}}

message: "<h1>asjkfjaklsfj</h1>"

<div v-html="message"></div>

javascript表达式

在差值里面可以书写JavaScript表达式

{{message.split('').reverse().join('')}}

//不能执行语句，都只能是单个的表达式。

修饰符

.prevent: 阻止默认事件

.stop：组织时间冒泡

过滤器

var app = new Vue({

    el: "#root",

    template: `<div>{{message | upperCase | lowerCase}}</div>`,//message 后面 | 过滤函数，相应的过滤函数在filter对象中定义

    data: {

        message: "assassin"

    },

    filters: {

        upperCase: function(value) {

            return value.toUpperCase();

        },

        lowerCase: function(value) {

            return value.toLowerCase();

        }

    }

});

计算属性

把我们的数据在的处理在输出

var app = new Vue({

    el: "#root",

    template: `<div>{{reverseMsg}}</div>`,

    data: {

        message: "assassin"

    },//这这里不能使用methods

    computed: {//把我们的数据在的处理在输出

        reverseMsg: function(value) {

            return this.message.split("").reverse().join("");

        }

    }

});

两者之间的区别：

methods:每次dom重新渲染。

computed:dom渲染时有缓存。依据是实例内部的变量等，发生变化时，才会重新渲染。

var app = new Vue({

    el: "#root",

    template: `<div>

        <input v-model="firstName">

        <input v-model="firstName">

        <div>{{fullName}}</div>

    </div>`,

    data: {

        firstName: "",

        lastName: ""

    },

    computed: {

        lastName: function() {//挡firstName,lastName这两个内部依赖变化时，就开始重新计算，依赖不变，使用缓存。

            return this.firstName + " " +this.lastName;

        }

    }

});

watch侦听属性

var app = new Vue({

    el: "#root",

    template: `<div>

        <input v-model="firstName">

        <input v-model="firstName">

        <div>{{fullName}}</div>

    </div>`,

    data: {

        firstName: "",

        lastName: "",

        fullName: ""

    },

    watch: {

        firstName: function() {

            return this.fullName = this.firstName + " " +this.lastName;

        },

        lastName: function() {

            return this.fullName = this.first

        }

    }

});

相比较computed,computed的比较简洁。

computed的set属性和get属性

var app = new Vue({

    el: "#root",

    template: `<div>

        <input v-model="firstName">

        <input v-model="firstName">

        <div>{{fullName}}</div>

    </div>`,

    data: {

        firstName: "",

        lastName: ""

    },

    computed: {

        fullName: {

            get: function() {

                return this.firstName+" "+this.lastName;

            },

            set: function(value) {

                var arr = value.split("");

                this.firstName = arr[0];

                this.lastName = arr[1];

            }

        }

    }

});

demo:

var app = new vue({

    el: "#root",

    templete: `

    <div id="watch-example">

        <p>

            Ask a yes/no question:

            <input v-model="question">

        </p>

        <p>{{answer}}</p>

    </div>

    `,

    data: {

        question: " ",

        answer: "I cannot give you an answer uniter you ask a question!"

    },

    watch: {

        question: function() {

            this.answer = "Wating for you to stop typing...";

            this.getAnster();

        }

    },

    methods: {

        getAnster: function() {

            if(this.question.indexOf("?") === -1) {

                this.answer = "Questions usually contain a question mark.";

                return ;

            }

            this.answer = "Thinking...";

            var _this = this;

/*

            axios.get("https://yesno.wtf/api").then(function(response) {

                _this.answer = response.data.answer;

            }).catch(function(error) {

                _this.answer = "Error! Could not reach the API."+error;

            });

*/

            if(app.timer) {

                clearTimer(app.timer);

            }

            app.timer = setTimeout(function() {

                axios.get("https://yesno.wtf/api").then(function(response) {

                    _this.answer = response.data.answer;

                }).catch(function(error) {

                    _this.answer = "Error! Could not reach the API."+error;

                });

            },200);//利用定时器进行优化

        }

    }

})

class和style

<div v-bind:class="{active: isActive}"></div>

//active 类名， isActive: 布尔值

<div v-bind:class="{active: isActive,'text-danager': hasError}"></div>

//text-danager,中间有线，所以要加单引号。

...

data: {

    isActive: true

}

computed: {

    hasError: function() {

        return false;

    }

}

//同样可以写在methods中实现，但不能重复实现过程。

上面可等价：类的对象形式

var app = new Vue({

    el: "#root",

    template: `<div v-bind:class="classObj">{{message}}</div>`,

    data: {

        message: "heelo world",

        isActive: true,

        hasError: false,

        classObj: {

            active: true,

            'text-danager': false

        }

    },

    computed: {//classObj也可以在computed中实现

        classObj: function() {

            return {

                active: this.isActive,

                'text-danger': this.hasError

            }

        }

    }

});//case:tab

类的数组形式

var app = new Vue({

    el: "#root",

    template: `<div v-bind:class="[a,b]">{{message}}</div>`,

    data: {

        a: "active",

        b: "text-danger"

    },

    computed: {//classObj也可以在computed中实现

        classObj: function() {

            return {

                active: this.isActive,

                'text-danger': this.hasError

            }

        }

    }

});

内联样式：

var app = new Vue({

    el: "#root",

    template: `<div v-bind:style="{fontSize: fontSize + 'px'}">{{message}}</div>`,

    data: {

        fontSize: 30

    }

});

内联样式的对象形式：

var app = new Vue({

    el: "#root",

    template: `<div v-bind:style="styleObj">{{message}}</div>`,

    data: {

        styleObj: {

            color: "red",

            fonSize: "30px",

            display: ['-webkit-box', '-ms-flexbox', 'flex']//经过js处理在浏览器端会出现相应的属性

        }

    }

});

条件渲染

多条件组选择：

<template v-if="isTrue">

    <div>1</div>

    <div>2</div>

    <div>3</div>

</template>

<template v-else="isFalse">

    <div>1</div>

    <div>2</div>

    <div>3</div>

</template>

//在浏览器DOM中是不渲染的。

v-if="条件表达式"

<template v-if="number == 1">

    <div>1</div>

    <div>2</div>

    <div>3</div>

</template>

<template v-else-if="number == 2">

    <div>1</div>

    <div>2</div>

    <div>3</div>

</template>

<template v-else>

    <div>1</div>

    <div>2</div>

    <div>3</div>

</template>

var app = new Vue({

    el: "#root",

    data: {

        number: 1

    }

})

key值管理服用的元素

<div id="root">

<template v-if="loginType === 'username'">

    <label>UserName<label>

    <input placeholder="Enter your name" v-model="usename">

</template>

<template v-else>

    <label>Email<label>

    <input placeholder="Enter your email" v-model="email">

</template>

<button v-on:click="handleClick">toggle login style</button>

</div>

var app = new Vue({

    el: "#root",

    data: {

        loginType: "usename",

        username: "",//防止输入框中的数据清除

        email: ""

    },

    methods: {

        handleClick: function() {

            if(this.loginType === "username") {

                this.loginType = "email";

            }else{

                this.loginType = "username";

            }

        }

    }

});

//这样使得切换的input输入的值不会发生变化，vue.js中处于对渲染的优化，解决办法在不同的input中添加key值，即可区分开来。这样有个小问题，切换之后输入框中的值不存在，分别绑定model值，即可解决。

列表的渲染

v-for="(item,key) in items"

v-for="(item,key) of items"

两者用法完全相同，

<div v-for="(item, key, index) in object" v-bind:key="item.id">

{{index}}{{key}}{{value}}

</div>

在遍历对象时，是按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。

这几种循环要谨慎使用，键值因不同的浏览器恶如输出不同的结果。循环的时候一般都要绑定key

数组的方法：

vue不会像新增内容上增加getter,setter，也就是双向绑定失效。所以对数组的操作要有新的语法。

变异方法：也就是对原有数组的方法进行了改变。

push();

pop();

shift();

unshift();

splice();

sort();

reverse();

不能直接修改等,this.items[indexOfItem] = newValue。如下：

this.items.push({ message: 'Baz' });

事件

<div id="root">

       <div id="counter-event-example">

        <p>{{total}}</p>

        <button-counter v-on:increment="incrementTotal"></button-counter>

        <button-counter v-on:increment="incrementTotal"></button-counter>

       </div>

   </div> 

   <script>

//定义局部子组件

    var button = {

        template: `<button v-on:click="increment">{{counter}}</button>`,

        data: function() {

            return {

                counter: 0

            }

        },

        methods: {

            increment: function() {

                this.counter += 1;

                this.$emit("increment");//自己点击时触发increment事件，父组件v-on:监听并执行此事件，incrementTotal事件

            }

        }

    };

   var App = new Vue({

       el: "#root",

       data: {

           total: 0

       },

       components: {//定义的子组件赋予新模板标记

           "button-counter": button

       },

       methods: {

           incrementTotal: function() {

               this.total += 1;

           }

       }

   });

   </script>

自定义一个简单的双向绑定

   <div id="root">

       <input v-bind:value="something" v-on:input="something = $event.target.value">

       <div>{{something}}</div>

   </div>

//v-bind 绑定一个值，v-on检测触发值的变化

   <script>

//定义局部子组件

   var App = new Vue({

       el: "#root",

       data: {

           something: ""

       },

   });

   </script>

子组件与父组件的数据双向绑定

   <div id="root">

    <custom-input v-model="something"></custom-input>

    {{something}}

   </div>

//v-bind 绑定一个值，v-on检测触发值的变化

   <script>

//定义局部子组件

    var custom = {

    template: `<input type="text" v-bind:value="value" v-on:input="handleInput">`,

        props: ["value"],//1.子组件接受一个value值就等于v-model绑定的值

        methods: {

            handleInput: function(e) {

                this.$emit("input",e.target.value);

            }

        }

    }

   var App = new Vue({

       el: "#root",

       data: {

           something: "1212"

       },

       components: {

            "custom-input": custom

       }

   });

   </script>

   <div id="root">

    <custom-input v-model="something"></custom-input>

    {{something}}

   </div>

//v-bind 绑定一个值，v-on检测触发值的变化

   <script>

//定义局部子组件

    var custon = {

    template: `<input type="text" v-bind:check="value" v-on:input="handleInput"`>,

        props: ["value"],//1.子组件接受一个value值就等于v-model绑定的值

        methods: {

            handleInput: function(e) {

                this.$emit("input",e.target.value);

            }

        }

    }

   var App = new Vue({

       el: "#root",

       data: {

           something: ture

       },

       components: {

            "custom-input": custom

       }

   });

   </script>

巴特西