准备知识

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

        }

    }

});

Vue.js双向数据绑定模板渲染的更多相关文章

  1. Vue.js双向绑定的实现原理和模板引擎实现原理（##########################################）

    Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...

  2. Vue基础01vue的基本示例，vue的双向数据绑定，vue中常见的几种用法，vue相关常见指令

    自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...

  3. 浅析Vue.js 中的条件渲染指令

    1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...

  4. 面试题：你能写一个Vue的双向数据绑定吗？

    在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧.结合注释,希望 ...

  5. Vue.js 2.x render 渲染函数 & JSX

    Vue.js 2.x render 渲染函数 & JSX Vue绝大多数情况下使用template创建 HTML.但是比如一些重复性比较高的场景,需要运用 JavaScript 的完全编程能力 ...

  6. vue实现双向数据绑定的原理

    vue实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的. 在MDN上对该方法的说明是:O ...

  7. 浅析vue的双向数据绑定

    vue 的双向数据绑定是基于es5的 object对象的defineProperty属性,重写data的set和get函数来实现的.1.defineProperty 数据展示 Object.defin ...

  8. vue的双向数据绑定实现原理

    在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧.结合注释,希望 ...

  9. Vue原理--双向数据绑定

    MVVM MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态 ...

随机推荐

  1. HTML5应用——生日快乐动画之星星

    在讲述绘制星星动画之前,先介绍一点javascript知识. 面向对象: javascript本质上不是面向对象语言,而是脚本语言,一般只适合简单.代码量少的程序,因为脚本过于复杂会直接导致浏览器出现 ...

  2. c++编码规范（摘录）

    在同一项目组应明确规定对接口函数参数的合法性检查应由函数的调用者负责还是由接口函数本身负责,缺省是由函数调用者负责. 函数的规模尽量限制在200行以内.说明:不包括注释和空格行. 一个函数仅完成一件功 ...

  3. 贪心+DP【洛谷P4823】 [TJOI2013]拯救小矮人

    P4823 [TJOI2013]拯救小矮人 题目描述 一群小矮人掉进了一个很深的陷阱里,由于太矮爬不上来,于是他们决定搭一个人梯.即:一个小矮人站在另一小矮人的 肩膀上,知道最顶端的小矮人伸直胳膊可以 ...

  4. 10.19 qbxt国庆day3

    最近的题都莫名简单 经常AK 炼金术 [问题描述] 即使是最伟大的ACM选手也是需要足够的金钱来把妹的的.于是ZYB发明了一台炼金机器. 这台机器一共有三个功能: 1.能把a位沙子变成b位石油. 2. ...

  5. 移动app整合个推进行消息推送

    首先前端代码写好之后进行发行打包: 然后再进行发行打包: 然后登录个推官网: 测试: 点击推送,在手机端就可以获取到信息了. java代码测试: package com.cxy.bean; impor ...

  6. php 多语言(UTF-8编码)导出Excel、CSV乱码解决办法之导出UTF-8编码的Excel、CSV

    新项目,大概情况是这样的:可能存在多国.不同语种使用者,比喻有中文.繁体中文,韩文.日本等等,开发时选择了UTF-8编码,开发顺利,没有问题.昨天做了一个csv导出功能,导出的东西完全乱了: 设置mb ...

  7. poj1094 拓扑排序（出度入度简单使用）

    Sorting It All Out Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 37764   Accepted: 13 ...

  8. json转译的问题

    今天遇到一个之前没遇到的情况 这边调用接口的时候,一串json数据我直接解析成php的时候,太长导致我在使用 $json = json_encode($list);转译成的时候,里面有一个数据是时间戳 ...

  9. SQL Server外部链接时报错：Error locating serverInstance specified

    SQL Server外部链接时报错:Error locating server/Instance specified 连接时报错信息: 08001 sql server network interfa ...

  10. GM TECH2 Scanner Clone

    Professional Diagnostic Tools gm tech 2 scanner china with multi-languages, TIS2000 Programming CD, ...