首页 > 程序开发 > web前端 > JavaScript >

初识Vue.js

2017-02-28

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

前端的优秀框架有许多,这里我选了一个比较容易入门的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:&#39;#app&#39;,
    data:{
        message:&#39;Hello Vue&#39;
    }
});
 
var app2 = new Vue({
    el: &#39;#app2&#39;,
    data:{
        message:&#39;You loaded this page on &#39;+new Date()
    }
});
 
var app3 = new Vue({
    el:&#39;#app3&#39;,
    data:{
        seen:true
    }
});
 
var app4 = new Vue({
    el:&#39;#app4&#39;,
    data:{
        todos:[
            { text: &#39;Learn JavaScript&#39; },
            { text: &#39;Learn Vue&#39; },
            { text: &#39;Build something awesome&#39; }
        ]
    }
});
 
var app5 = new Vue({
    el:&#39;#app5&#39;,
    data:{
        message:&#39;Hello Vue.js&#39;
    },
    methods:{
        reverseMessage:function(){
            this.message = this.message.split(&#39;&#39;).reverse().join(&#39;&#39;);
        }
    }
});
 
var app6 = new Vue({
    el:"#app6",
    data:{
        message:&#39;Hello Vue&#39;
    }
});
 
Vue.component(&#39;todo-item&#39;,{
    props:[&#39;todo&#39;],
    template:&#39;<li>{{todo.text}}</li>&#39;
});
 
var app7 = new Vue({
    el:&#39;#app7&#39;,
    data:{
        groceryList:[
            { text: &#39;Vegetables&#39; },
            { text: &#39;Cheese&#39; },
            { text: &#39;Whatever else humans are supposed to eat&#39; }
        ]
    }
});

效果如下图:

\

相关文章
最新文章
热点推荐