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; // 布尔值取反
        }
    }
});

相关阅读:
软件工程第八周
 e课表项目第二次冲刺周期第十天
 蓝桥杯java历年真题及答案整理41~56
蓝桥杯java历年真题及答案整理21~40
蓝桥杯java历年真题及答案整理1~20.md
异序二分查找二分查找方程根二分查找重复元素最后一个
 软件说明
 遗传算法--句子匹配
 Matlab学习笔记
 使用TenforFlow 搭建BP神经网络拟合二次函数
原文地址：https://www.cnblogs.com/lqcdsns/p/5745618.html