Vue学习第二天

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时调用

<div id="app1">

    <input :value="e1" id="i1" v-on:click="c1" />

    <input :value="e2" id="i2" />

    <br />

    {{e3}}

    <br />

    {{e4}}

    <br />

    @*<input type="text" id="i3" v-on:keyup="c2"/>*@

    <input type="text" id="i3" v-on:change="c2" />

</div>

 var vm=new Vue({

                        el: '#app1',

                        data: {

                            e1: 'sddsss',

                            e2: '33dd33',

                            e4:''

                        },

                        computed: {

                            e3: {

                                get: function () {

                                    return this.e1 + '' + this.e2;

                                    //return $("#i1").val()

                                },

                                set: function (newValue) {

                                    var items = newValue.split(' ');

                                    this.e1 = items[0];

                                    this.e2 = items[1];

                                }

                            }

                        },

                        methods: {

                            c2: function () {

                                var item = $("#i3").val();

                                this.e1 = item.split(' ')[0];

                                this.e2 = item.split(' ')[1];

                            },

                            c1: function () {

 

                            }

                        },

                        watch: {

                            e1: function (val) {  //指的就是e1值   或者 newval,oldval

                                alert(val);

                            }

                        }

                    })

   // vm.e3 = "abc def";

 

CLASS 与 STYLE 绑定

 :class="{test1:isactive,test2:isactive2}"

:class="['test1','test2']"

 

 new Vue({

        el: '#app1',

        data: {

            typename: 'style',

            stylevalue: 'background-color:red;',

            isactive: true,

            isactive2: true

        }

})

动态绑定

:[typename]="stylevalue" 

  data: {

            typename: 'style',

            stylevalue: 'background-color:red;',

 

或者

 :style="{height:h1,width:w1}"

 h1:'100px',

 w1:'100px'

直接绑定到一个样式对象通常更好，这会让模板更清晰：

<div v-bind:style="styleObject"></div>

data: {

  styleObject: {

    color: 'red',

    fontSize: '13px'

  }

}

对象的计算属性

<div v-bind:class="classObject"></div>

data: {

  isActive: true,

  error: null

},

computed: {

  classObject: function () {

    return {

      active: this.isActive && !this.error,

      'text-danger': this.error && this.error.type === 'fatal'

    }

  }

}

条件渲染

<div id="app1">

    @*添加渲染*@

    <div v-if="isa">

        a

    </div>

    <div v-else-if="isb">

        b

    </div>

    <div v-else-if="isc">

        c

    </div>

    <div v-else="notall">

        not abc

</div>

<div v-show="isshow">

        show

    </div>

</div>

new Vue({

        el: '#app1',

        data: {

            isa: false,

            isb: false,

            isc: false,

            notall: true,

            isshow: false

        }

})

列表渲染

<select>

        <option v-for="value,key in object" :value="value">

            {{key}}

        </option>

    </select>

 new Vue({

        el: "#app1",

        data:{

            object: {

                name: "zhangsan",

                height: 181.5,

                age:26

            }

        }

    })

 

事件修饰符

.stop

.prevent

.capture

.self

.once

.passive

<!-- 阻止单击事件继续传播 --><a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 --><form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 --><a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 --><form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 --><!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 --><div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 --><!-- 即事件不是从内部元素触发的 --><div v-on:click.self="doThat">...</div>

<form action="" v-on:submit.prevent="test">

        <input type="button" v-on:click="counter+=1" :value="counter"/>

        <select>

            <option v-for="item,key in array" :value="key">

                {{item.text}}

            </option>

        </select>

        <input type="submit" value="提交"/>

    </form>

 new Vue({

        el: '#app1',

        data: {

            counter: 0,

            array: [{text:"zhangsan"}, {text:"lisi"}, {text:"wangwu"}]

        },

        methods: {

            test: function (e) {

                alert(e.type);

            },

            test2: function () {

 

            }

        }

    })

点击事件只会触发一次

<!-- 点击事件将只会触发一次 -->

 <a v-on:click.once="doThis"></a>

 

 

V-model 双向绑定

<div id="app1">

    <form action="" v-on:submit.prevent>

        <input type="button" v-on:click="counter+=1" :value="counter" />

        <select>

            <option v-for="item,key in array" :value="key">

                {{item.text}}

            </option>

        </select>

        <input type="submit" value="提交" />

        <select v-model="selected">

            <option value="" disabled>请选择</option>

            <option v-for="v in vs" :value="v.value">{{v.text}}</option>

        </select>

        <br />

        {{selected}}

        <input v-model.lazy="message" />

        输入框的值是{{message}}

        <br />

        <input v-model.number="message2" type="number"/>

        输入框的值是{{message2}}

        <br />

        <input type="checkbox" v-model="checkvalues" value="jack" />

        <input type="checkbox" v-model="checkvalues" value="jim" />

        <input type="checkbox" v-model="checkvalues" value="crystal" />

        <br />

        {{checkvalues}}

        <br />

        <input type="radio" name="rs" v-model="radionselected" value="1111" />

        <input type="radio" name="rs" v-model="radionselected" value="2222" />

        <br />

        {{radionselected}}

        <br />

        <

    </form>

</div>

 

 

 

<script type="text/javascript">

    new Vue({

        el: '#app1',

        data: {

            counter: 0,

            array: [{ text: "zhangsan" }, { text: "lisi" }, { text: "wangwu" }],

            vs: [{ text: "江苏", value: "南京" }, { text: "浙江", value: "杭州" }, { text: "安徽", value: "合肥" }],

            selected: "南京",

            message: "",

            message2: "",

            checkvalues: ["jack","jim"],

            radionselected:"1111"

 

 

        },

        methods: {

            test: function (e) {

                alert(e.type);

            },

            test2: function () {

 

            }

        }

    

    })

</script>