学习vuejs

一、绑定元素特性， v-bind:title

    <div id="app2">
        <span v-bind:title="msg"> 
            此处查看信息！
        </span>
    </div>
    <script type="text/javascript">
        var app2 = new Vue({
            el:"#app2",
            data:{
                msg:"你好呀！"+new Date()
            }
        });
    </script>

v-bind被称为指令，title为该元素节点的特性，该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 msg属性保持一致”。

鼠标悬停几秒钟查看此处动态绑定的提示信息。

二、条件与循环  

v-if   控制或者切换元素的指令。

    <div id="app3">
        <p v-if="seen">你现在看到我啦~</p>
    </div>
    <script type="text/javascript">
        var app3 = new Vue({
            el:"#app3",
            data:{
                seen:true
            }
        });
        setTimeout(function(){
            app3.seen = false;
        },2000);
    </script>

v-for  绑定数组的数据来渲染一个项目列表

在控制台里，输入 app4.ts.push({text:"新增内容4"})，你会发现列表最后添加了一个新项目。

<div id="app4">
        <ol>
            <li v-for="t in ts">
                {{t.text}}
            </li>
        </ol>
    </div>
    <script type="text/javascript">
        var app4 = new Vue({
            el:"#app4",
            data:{
                ts:[
                 {text:"内容1"},
                 {text:"内容2"},
                 {text:"内容3"}
                ]
            }
        });
        app4.ts.push({text:"新增内容4"});
    </script>

 

 三、处理用户输入

v-on:click="reverseMsg"   点击逆转文字

<div id="app5">
        <p>{{msg}}</p>
        <button v-on:click="reverseMsg">点击逆转文字</button>
    </div>
    <script type="text/javascript">
        var app5 = new Vue({
            el:"#app5",
            data:{
                msg:"hello you !"
            },
            methods:{
                reverseMsg:function(){
                this.msg = this.msg.split('').reverse().join('');
                }
            }
        });
    </script>

 v-model 指令，轻松实现表单输入和应用状态之间的双向绑定

    <div id="app6">
        <p>{{message}}</p>
        <input v-model="message">
    </div>
    <script type="text/javascript">
        var app6 = new Vue({
            el:"#app6",
            data:{
                message:"你好"
            }
        });
    </script>

四、组件化构建

 定义一个新组件，并动态渲染每一个子组件

    <div id="app7">
        <ol>
            <todo-item  v-for="item in items" v-bind:todo="item" v-bind:key="item.id">                
            </todo-item>
        </ol>
    </div>
    <script type="text/javascript">
        Vue.component("todo-item",{
            props:["todo"],
            template:"<li>{{todo.text}}</li>"
        });
        var app7 = new Vue({
            el:"#app7",
            data:{
                items:[
                    {id:0,text:"蔬菜"},
                    {id:1,text:"水果"},
                    {id:2,text:"肉类"}
                ]
            }
        });
        app7.items[2].text="大米";
    </script>