初识Vue.js

来源：互联网发布：java while循环编辑：程序博客网时间：2024/06/07 03:19

前端的优秀框架有许多，这里我选了一个比较容易入门的Vue.js来玩一下，第一次接触的话，发现这个框架非常的简单实用，使用起来非常的方便。

这里我们只要上官网上下载一个Vue.js就可以直接利用 <script src="./vue-dev/dist/vue.min.js"></script>来引用了。

<html>    <head>    </head>    <body>        <!--这里直接可以使用模板-->        <div id="app">            {{message}}        </div>        <!--这里直接可以使用v-bind绑定title元素        而且是响应式的-->        <div id="app2">            <span v-bind:title="message">            ni hao!            </span>        </div>        <!--这里直接可以通过js代码来控制是否显示这个        p标签-->        <div id="app3">            <p v-if="seen">Now you see me</p>        </div>        <!--这里直接可以通过js里面定义一个数组数据，直接就可以        在这里使用模板提取-->        <div id="app4">            <ol>                <li v-for="todo in todos">                    {{todo.text}}                </li>            </ol>        </div>        <!--这里直接绑定click事件-->        <div id="app5">            <p>{{message}}</p>            <button v-on:click="reverseMessage">Reverse Message</button>        </div>        <!--这里直接绑定message变量来达到数据的双向流动-->        <div id="app6">            <p>{{message}}</p>            <input v-model="message">        </div>                    <!--这里直接可以根据循环和绑定来达到动态的显示一组数据-->        <div id="app7">        <ol>            <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>        </ol>        </div>    </body>    <script src="./vue-dev/dist/vue.min.js"></script>    <script src="./index.js"></script></html>

var app = new Vue({    el:'#app',    data:{        message:'Hello Vue'    }});var app2 = new Vue({    el: '#app2',    data:{        message:'You loaded this page on '+new Date()    }});var app3 = new Vue({    el:'#app3',    data:{        seen:true    }});var app4 = new Vue({    el:'#app4',    data:{        todos:[            { text: 'Learn JavaScript' },            { text: 'Learn Vue' },            { text: 'Build something awesome' }        ]    }});var app5 = new Vue({    el:'#app5',    data:{        message:'Hello Vue.js'    },    methods:{        reverseMessage:function(){            this.message = this.message.split('').reverse().join('');        }    }});var app6 = new Vue({    el:"#app6",    data:{        message:'Hello Vue'    }});Vue.component('todo-item',{    props:['todo'],    template:'<li>{{todo.text}}</li>'});var app7 = new Vue({    el:'#app7',    data:{        groceryList:[            { text: 'Vegetables' },            { text: 'Cheese' },            { text: 'Whatever else humans are supposed to eat' }        ]    }});

效果如下图：

0 0