Vue介绍

vue官网介绍里面的练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="./js/vue.min.js"></script>
    </head>
    <body>
        <div id="app">
                {{message}}
        </div>
        
        <div id="app-2" v-bind:title="message">
                鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </div>
        
        <!-- 条件 -->
        <div id="app-3">
            <div v-if="seen">现在你看到我了</div>
            <div>123</div>
        </div>
        
        <!-- 循环 -->
        <div id="app-4">
            <ol>
                <li v-for="todo in todos">
                    {{todo.text}}
                </li>
            </ol>
        </div>
        
        
        <div id="app-5">
            <p>{{message}}</p>
            <button v-on:click="reverseMessage">反转消息</button>
        </div>
        
        <!-- 处理用户输入 -->
        <div id="app-6">
            <p>{{message}}</p>
            <input type="text" v-model="message"/>
        </div>
        
        
        <!-- 模板 每个待办项渲染同样的文本-->
        <div id="app-7">
            <todo-item></todo-item>
            <todo-item></todo-item>
            <todo-item></todo-item>
        </div>
        
        
        <!-- 父作用域将数据传到子组件 -->
        <div id="app-8">
            <todo-item1
            v-for="item in groceryList"
            v-bind:todo="item"
            v-bind:key="item.id"
            ></todo-item1>
        </div>
        
    </body>
    
    <script type="text/javascript">
    
    
        var app =new Vue({
            el:"#app",
            data:{
                message:'Hello Vue'
            }
        })
        
        var app2 = new Vue({
            el:'#app-2',
            data:{
                message:'页面加载于'+ new Date().toLocaleString()
            }
        })
        
        var app3 = new Vue({
                    el:'#app-3',
                    data:{
                        seen:false
                    }
                })
                
                
        
        var app4 = new Vue({
            el:"#app-4",
            data:{
                todos:[
                    {text:'学习JavaScript'},
                    {text:'学习Vue'},
                    {text:'嘘唏'}
                ]
            }
        })
        
        
        var app5=new Vue({
            el:"#app-5",
            data:{
                message:"Hello Vue.js"
            },
            methods:{
                reverseMessage:function(){
                    this.message=this.message.split('').reverse().join('')
                }
            }
        })
        
        
        var app6 = new Vue({
            el:"#app-6",
            data:{
                message:"hello vue"
            }
        })
        
        
        
        Vue.component('todo-item',{
            template:'<li>这是个代办项</li>'
        })
        
        var app7 = new Vue({
            el:'#app-7'
        })
        
        
        
        Vue.component('todo-item1',{
            props:['todo'],
            template:'<li>{{todo.text}}</li>'
        })
        var app8 = new Vue({
            el:"#app-8",
            data:{
                groceryList:[
                    {id:0,text:'蔬菜'},
                    {id:1,text:'奶酪'},
                    {id:2,text:'随便什么'}
                ]
            }
        })
        
        
    </script>
</html>