Into the second day of Vue

<! DOCTYPE HTML > 
< HTML lang = "EN" > 
< head > 
    < Meta charset = "UTF-. 8" > 
    < Meta name = "the viewport" 
          Content = "width = width-Device, User-Scalable = NO, initial- = 1.0 Scale, maximum-Scale = 1.0, 1.0 Minimum-Scale = " > 
    < Meta HTTP-equiv =" X--the UA-Compatible " Content =" IE = Edge " > 
    < title > attribute binding and two-way data binding, and the listener properties calculation </ title > 
    <script src="vue.js"></Script > 
</ head > 
< body > 
    <-! 
        binding property with v-bind: attribute name = "data values vue instance" (which v-bind: :) may be abbreviated as 
        two-way binding used a v-model 
        method used was listening watch, can be achieved by self-page 
    -> 
    < div the above mentioned id = "root" > 
        < div : title = "title" > the Hello Word </ div > 
        < the INPUT of the type = "text" Model-V = "title" > 
        < div V-text = "title" > </ div >
    </div>


    <div id="foo">
        姓:<input type="text" v-model="firstName">
        名:<input type="text" v-model="lastName">
        <p>您输入的是:{{fullName}}</p>
        <p>{{count}}</p>
    </div>

    <script>
        new Vue({
            el:"#root",
            data:{
                title : "可变性的title"
            }
        });

        new Vue({
            el:"#foo",
            data:{
                firstName:"",
                lastName:"",
                count:0
            },
            computed:{
                fullName:function () {
                    return this.firstName + this.lastName;
                }
            },
            watch:{
                firstName:function () {
                    this.count++;
                },
                lastName:function () {
                    this.count++;
                }
            }
        });
    </script>

</body>
</html>

 

Guess you like

Origin www.cnblogs.com/jiangshiguo/p/11140168.html