vue基础学习（3）DOM

DOM

我们在JQ中经常进行DOM操作，但在VUE中其实DOM操作很少，下面进行一些简单的总结

1. 在DOM元素中利用表达式进行三目运算操作；事件修饰符，方法等。来个栗子

		<div id="app">
            <!-- 函数的参数传递，可以将事件$event作为参数传递到函数中 -->
            <button type="button" name="button" v-on:click="increase(2,$event)">Click me</button>
            <!-- 可以直接在click事件中设置变量值 -->
            <button type="button" name="button" v-on:click="counter++">counter++</button>
            <p>
                {{ counter }} -> {{ counter * 2 }} -> {{ counter * 2 > 10 ? "大于10了" : "小于10呢" }}
            </p>
            <p v-on:mousemove="updateCoordinates">
                Coordinates: {{ x }} / {{ y }}
                - <span v-on:mousemove="dummy">停止鼠标事件</span>
                <!-- 也可以利用.stop来进行操作，则不需要函数支持 -->
                <span v-on:mousemove.stop="">停止鼠标事件</span>
            </p>
            <input type="text" name="name" v-on:keyup="alertMe">
            <br/>
            <!-- 可以限制函数在什么事件下才触发，当前限制的是在enter和space键操作keyup的时候触发alertMe函数 -->
            <input type="text" name="name" v-on:keyup.enter.space="alertMe">
        </div>
		<script type="text/javascript" src="../node_modules/vue/dist/vue.min.js"></script>
        <script type="text/javascript">
            new Vue({
                el: '#app',
                data: {
                    counter:0,
                    x:0,
                    y:0
                },
                methods: {
                    increase: function( step, event ) {
                        this.counter += step;
                    },
                    updateCoordinates:function(event){
                        this.x = event.clientX;
                        this.y = event.clientY;
                    },
                    dummy:function(event){
                        //stopPropagation方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行
                        event.stopPropagation();
                    },
                    alertMe:function(){
                        alert('Alert');
                    }
                }
            });
        </script>

当然也新增了两种办法，通过计算属性，区别方法与计算属性之间的差异computed
以及watch监听 别说话看栗子

<div id="app">
            <!-- 通过计算属性，区别方法与计算属性之间的差异，操作counter的时候
            Computed和Method都执行了，而secondCounter的时候却只执行了Computed函数，而且
            Computed的输出模式直接输出属性值即可，不需要函数表现方式。 -->
            <button type="button" name="button" v-on:click="counter++">Increase</button>
            <button type="button" name="button" v-on:click="counter--">Descrease</button>
            <button type="button" name="button" v-on:click="secondCounter--">Increase Second</button>

            <p>
                counter: {{ counter }} | {{ secondCounter }}
            </p>
            <p>
                //第二种方法：
                result:
                {{ result() }} | {{ output }}
            </p>
        </div>
		<script type="text/javascript" src="../node_modules/vue/dist/vue.min.js"></script>
        <script type="text/javascript">
            new Vue({
                el: '#app',
                data: {
                    counter:0,
                    secondCounter:0
                },
                computed:{
                    output:function(){
                        console.log('Computed');
                        return this.counter > 5 ? '大于5了' : '小于5呢';
                    }
                },
				// 利用watch可以对对象内容进行监控操作，但需要注意this对象的不同
				watch:{
					counter:function(value){
                        console.log(value);
						var vm = this;
						setTimeout(function(){
							vm.counter = 0;
						},5000);
					}
				},
                methods: {
                    result(){
                        console.log('Method');
                        return this.counter > 5 ? '大于5了' : '小于5呢';
                    }
                }
            });
        </script>