Vue.js 基础实例

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue.js 基础实例相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
</head>
<body>

<hr/>声明式渲染1:<br/><br/>

<div id="app">
    {{message}}
</div>

<hr/>声明式渲染2:<br/><br/>

<div id="app2">
    <span v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定的提示信息!
    </span>
</div>

<hr/>条件与循环1:<br/>

<div id="app3">
    <p v-if="seen">现在你看到我了!</p>
</div>

<hr/>条件与循环2:<br/>

<div id="app4">
    <ol>
        <li v-for="todo in todos">
            {{todo.text}}
        </li>
    </ol>
</div>

<hr/>处理用户输入1:<br/>

<div id="app5">
    <p>{{message}}</p>
    <button v-on:click="reverseMessage">逆转消息</button>
</div>

<hr/>处理用户输入2:<br/>

<div id="app6">
    <p>{{message}}</p>
    <input v-model="message">
</div>

<hr/>组件化应用构建:<br/>

<div id="app7">
    <ol>
        <todo-item
            v-for="item in language"
            v-bind:todo="item"
            v-key:id="item.id"
        ></todo-item>
    </ol>
</div>

</body>

<script src="https://unpkg.com/vue"></script>

<script type="application/javascript">

    Vue.component(todo-item,{
        props:[todo],
        template:<li>{{todo.text}}</li>
    });

    var app7 = new Vue({
        el:#app7,
        data:{
            language:[
                {
                    id:0,
                    text:.NET
                },
                {
                    id:1,
                    text:php
                },
                {
                    id:2,
                    text:JAVA
                }
            ]
        }
    });

    var app6 = new Vue({
        el:#app6,
        data:{
            message:"Hello World !"
        }
    });

    var app5 = new Vue({
        el:#app5,
        data:{
            message:Hello World !
        },
        methods:{
            reverseMessage:function () {
                this.message = this.message.split(‘‘).reverse().join(‘‘);
            }
        }
    });

    var app4 = new Vue({
        el:#app4,
        data:{
            todos:[
                {text:Hello},
                {text:World},
                {text:!}
            ]
        }
    });

    var app3 = new Vue({
        el:#app3,
        data:{
            seen:true
        }
    });

    var app2 = new Vue({
        el:#app2,
        data:{
            message:页面加载于 + new Date().toLocaleString()
        }
    });

    var app  = new Vue({
        el:#app,
        data:{
            message:Hello World !
        }
    });

</script>

</html>

 

以上是关于Vue.js 基础实例的主要内容,如果未能解决你的问题,请参考以下文章

vue.js基础知识篇:过渡Method和Vue实例方法

Vue.js—组件快速入门以及Vue路由实例应用

使用带有渲染功能的 Vue.js 3 片段

Vue.js 基础实例

Vue 基础篇二

vue.js基础