Vue.js双向数据绑定模板渲染

准备知识

1. 前端开发基础 html、css、js
2. 前端模块化基础
3. 对ES6有初步的了解

vuejs官网：cn.vuejs.org

 

 

 

HTML：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Vuejs</title>
    <style>
        .finished {
            text-decoration: underline;
        }
    </style>
</head>
<body>

<div id="demo">
    <h1 v-text="title"></h1>
    <ul>
        <li v-for="item in items" :class="{finished: item.isFinished}">
            {{item.label}}
        </li>
    </ul>
</div>

<script src="vue.js"></script>
<script src="demo01.js"></script>

</body>
</html>

 

 

Js：

var demo = new Vue({
    el: '#demo',
    data: function () {
        return {
　　　　　　　a: 1,
            title: 'this is a todo list',
            items: [
                {
                    label: 'coding',
                    isFinished: false
                },
                {
                    label: 'walking',
                    isFinished: true
                }
            ],
            liClass: 'thisIsLiClass'
        };
    },
    methods: {
        doSomething: function () {
            console.log(this.a);
        }
    }
});

 

实例2：

html：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Vuejs</title>
    <style>
        .finished {
            text-decoration: underline;
        }
    </style>
</head>
<body>

<div id="demo">
    <h1 v-text="title"></h1>
    <!-- v-model随表单控件的不同而不同 -->
    <input type="text" v-model="newItem"/>
    <ul>
        <li v-for="item in items" :class="{finished: item.isFinished}"
                @click="toggleFinish(item)">
            {{item.label}}
        </li>
    </ul>
</div>

<script src="jquery-3.1.0.min.js"></script>
<script src="vue.js"></script>
<script src="demo01.js"></script>

</body>
</html>

 

js：

var demo = new Vue({
    el: '#demo',
    data: function () {
        return {
            title: 'this is a todo list',
            items: [
                {
                    label: 'coding',
                    isFinished: false
                },
                {
                    label: 'walking',
                    isFinished: true
                }
            ],
            newItem: '',
            liClass: 'thisIsLiClass'
        };
    },
    methods: {
        doSomething: function () {
            console.log(this.a);
        },
        toggleFinish: function (item) {
            item.isFinished = !item.isFinished; // 布尔值取反
        }
    }
});

 

posted on 2016-08-07 10:14  Asina  阅读(1407)  评论(0)  编辑  收藏  举报