Vue学习记录（三）

1.指令

1. 以v-前缀开头，用冒号分割开
2. 常用
   v-bind v-on v-if v-show v-else v-else-if v-model v-for

<div id="app">
	<!--使用v-bind绑定html元素属性class-->
	<p v-bind:class="[colorclass,fontclass]"></p>
</div>
<script>
	new Vue({
		//el绑定根元素，也可以使用DOM进行绑定，document.getElementById('#app')
		el:'#app'',
		data:{
			colorclass:'cclass',
			fontclass:'fclass'
		}
	})
</script>

3.修饰符 以 点（.）引用，指出该指令以某种特殊的方式进行绑定
4.指令的简写
v-bind：简写为：
v-on：简写为@

<input v-bind:value="value1" v-on:input="value1=$event.target.value">
//指令简写
<input :value="value" @input="value1=$event.target.value">

2.计算属性-computed

Vue是一个对象，computed作为Vue实例共有的属性
使用：需要运算值显示在DOM中，在computed中进行计算

<div id="app">
        <input v-model="message"></p>
        <!-- 将字符串首字母大写 -->
        <p>{{uppercasemessage}}</p>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                message:'',
            },
            computed:{
            //调用了getter
                uppercasemessage:function(){
                    return this.message.charAt(0).toUpperCase()+this.message.slice(1);
                }
            }
        })

注：
1.计算属性与方法的区别：
根据vue.js文档，计算属性基于响应式依赖进行缓存计算属性在页面中数据没有发生变化的时候，每次调用刷新都调用缓存中的数据；但是方法每次刷新会重新渲染执行函数。

3.监听属性-watch

根据名字可以知道，是需要监听数据变化