Vue入门1

欢迎转载，转载请注明出处。前言　　学习本系列Vue知识，需要结合本系列的一些demo。你可以查看我的Github或者直接下载ZIP包。　　建议学习本系列之前已经会一个其他的前端框架，了解计算属性，数据绑定，模板语言等。零基础的话，看本教程可能不太适合。一、第一个demo，Hello Word<!DOCTYPE html><html&...

weixin_34037173

54人浏览 · 2016-12-15 14:46:00

weixin_34037173 · 2016-12-15 14:46:00 发布

欢迎转载，转载请注明出处。

前言

　　学习本系列Vue知识，需要结合本系列的一些demo。你可以查看我的 Github 或者直接下载 ZIP包。

　　建议学习本系列之前已经会一个其他的前端框架，了解计算属性，数据绑定，模板语言等。零基础的话，看本教程可能不太适合。

一、第一个demo，Hello Word

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>vue-demos</title>
        <script src="../vue.js"></script>
    </head>
    <body>
        <!-- 通过双大括号进行数据绑定 -->
        <div id="app">
            {{ message }}
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    message: 'Hello Vue'
                }
            });
        </script>
    </body>
</html>

　　很简单，el指定Vue实例挂载的元素节点。data里面指定要显示的message的初值。当然，运行是依赖vue.js的，所以要加载script脚本。

二、v-bind指令

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>vue-demos</title>
        <script src="../vue.js"></script>
    </head>
    <body>
        <!-- 
            v-bind: 将元素的属性跟Vue实例的属性绑定在一起。
            将这个元素节点的 title 属性和 Vue 实例的 message 属性绑定到一起。
        -->
        <div id="app">
            <!-- 当然也可以缩写成<span :title="message">  -->
            <span v-bind:title="message"> 
                Hover your mouse over me for a few seconds to see my dynamically bound title! 
            </span>
        </div>
        <script>
            var app = new Vue({
                el : '#app',
                data : {
                    message : 'You loaded this page on ' + new Date()
                }
            });
        </script>
    </body>
</html>

　　v-bind: 将元素的属性跟Vue实例的属性绑定在一起。

三、v-if v-else指令

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>vue-demos</title>
        <script src="../vue.js"></script>
    </head>
    <body>
        <!-- 
            v-if: 控制元素是否显示。
            v-else 元素必须紧跟在 v-if 或 v-show 元素的后面——否则它不能被识别。
        -->
        <div id="app">
            <p v-if="seen">Now you see me</p>
            <p v-else>seen is false</p>
        </div>
        <script>
            var app = new Vue({
                el : '#app',
                data : {
                    seen : false
                }
            });
        </script>
    </body>
</html>

四、v-for指令

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>vue-demos</title>
        <script src="../vue.js"></script>
    </head>
    <body>
        <!-- 
            v-for: 循环Vue实例的某些数据。用 in 
        -->
        <div id="app">
            <ol>
                <li v-for="todo in todos">{{todo.text}}</li>
            </ol>
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    todos: [
                        { text: 'Learn JavaScript' },
                        { text: 'Learn Vue' }
                    ]
                }
            });
        </script>
    </body>
</html>

五、v-on指令

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>vue-demos</title>
        <script src="../vue.js"></script>
    </head>
    <body>
        <!-- 
            v-on: 绑定一个监听事件，用于调用我们 Vue 实例中定义的方法
            方法定义在methods属性里面.
            在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。
            尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
            为了解决这个问题， Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。
            .stop
            .prevent
            .capture
            .self
        -->
        <div id="app">
            <p>{{message}}</p>
            <!-- 当然也可以缩写成<button @click="changeMessage">  -->
            <button v-on:click="changeMessage">Change Message</button>
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    message: 'Hello Vue.js !'
                },
                methods: {
                    changeMessage: function(){
                        this.message = 'message be changed !'
                    }
                }
            });
        </script>
    </body>
</html>

六、v-model指令

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>vue-demos</title>
        <script src="../vue.js"></script>
    </head>
    <body>
        <!-- 
            v-model: 可以直接将表单输入的某个值跟Vue实例的属性绑定
        -->
        <div id="app">
            <p>{{message}}</p>
            <input v-model="message"></input>
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    message: 'Hello Vue.js !'
                }
            });
        </script>
    </body>
</html>