vue.js学习第一章起步

双向绑定

html 代码片段

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>数据绑定</title>
        <script src="https://cdn.bootcss.com/vue/1.0.17/vue.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" charset="utf-8">
            window.onload=function(){
                new Vue({
                    el:"#app",
                    data:{
                        news:"今天第一条新闻"
                     }
                })
            }
        </script>
    </head>
    <body>
        <div id="app">
            <p>{{news}}</p>
            <input type="text" v-model="news"/>
        </div>
    </body>
</html>

渲染列表

html 代码片段

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>渲染列表</title>
        <script src="https://cdn.bootcss.com/vue/1.0.17/vue.min.js" type="text/javascript" charset="utf-8"></script>
        <script>
            window.onload=function(){
                new Vue({
                    el:"#app",
                    data:{
                       oli:[
                    {val:"第一条信息"},
                    {val:"第二条信息"},
                    {val:"第三条信息"}
                        ]
                    }
                })
            }
        </script>
    </head>
    <body>
<div  id="app">
        <ul>
            <li v-for="li in oli">
                {{li.val}}
            </li>
        </ul>
</div>
    </body>
</html>

处理用户输入

html 代码片段

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>处理用户输入</title>
        <script src="https://cdn.bootcss.com/vue/1.0.17/vue.min.js" type="text/javascript" charset="utf-8"></script>
       <script type="text/javascript" charset="utf-8">
            window.onload=function(){
               new Vue({
                el:"#app",
                data:{
                    news:"我输入了一些信息"
                },
                methods:{
                    linknews:function(){
                        this.news=this.news.split("").reverse().join("")
                    }
                }
               })
            }
        </script>
    </head>
    <body>
        <div id="app">
            <p>{{news}}</p>
            <button v-on:click="linknews" type="button">linknews</button>
        </div>
    </body>
</html>

综合例子

html 代码片段

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>综合例子</title>
        <script src="https://cdn.bootcss.com/vue/1.0.17/vue.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" charset="utf-8">
         window.onload=function(){
            new Vue({
                el:"#app",
                data:{
                    doc:
                        [
                        {val:"第一条信息"},
                        {val:"第二条信息"}
                        ]
                    ,
                    newlist:""
                  },
                methods:{

                    addlist:function(){
                        var litext=this.newlist.trim()
                        if(litext){
                            this.doc.push({val:litext});
                            this.newlist="";
                        }
                    },
                    removelist:function(index){
                        this.doc.splice(index,1);
                    }

                  }  

            })
}
        </script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="newlist" v-on:keyup.enter="addlist"/>
            <ul>
                <li v-for="list in doc">
                    {{list.val}}
                    <button type="button" v-on:click="removelist($index)">X</button>
                </li>
            </ul>
        </div>
    </body>
</html>

vue.js学习第一章 起步

双向绑定

渲染列表

处理用户输入

综合例子