<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div id="app">

        <!-- 双向绑定实例：将模型msg绑定到输入框，输入框的文本值的改变会影响msg进而改变p标签的内容-->

        <input type="text" v-model="msg"/>

        <p> {{ msg }} </p>

        <!-- 单向数据绑定，自定义属性-->

        <h3 v-bind:qwe='data'></h3>

    </div>

    <script type="text/javascript" src="../node_modules/vue/dist/vue.js"></script>

    <script typt="text/javascript">

        // Vue中的数据绑定有2种方式：分为单向数据绑定和双向数据绑定

        // 1、单向数据绑定：就是正常的数据渲染，从model到View，使用v-bind可以将自定义属性与model相关联

        // 2、双向数据绑定：与单向数据绑定不同，

        // 它可以从model到view，然后view再到model、model再影响view,使用双向数据绑定需要使用指令v-model

        // 使用双向数据绑定需要用到表单控件

        new Vue({

            el: "#app",

            data: function(){

                return {

                    msg: "啦啦啦啦，快来修改我吧～",

                    data: 'data-k1'

                }

            }

        })

    </script>

</body>

</html>

Vue之数据绑定的更多相关文章

  1. vue 双向数据绑定的实现学习（二）- 监听器的实现

    废话:上一篇https://www.cnblogs.com/adouwt/p/9928278.html 提到了vue实现的基本实现原理:Object.defineProperty() -数据劫持 和  ...

  2. vue 双向数据绑定的实现学习（一）

    前言:本系列学习笔记从以下几个点展开 什么是双向数据绑定 双向数据绑定的好处 怎么实现双向数据绑定 实现双向数据数据绑定需要哪些知识点 数据劫持 发布订阅模式 先看看我们要实现的目标是什么,如下动图: ...

  3. vue双向数据绑定的简单实现

    vue双向数据绑定的简单实现 参考教程:链接 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  4. Vue双向数据绑定原理分析（转）

    add by zhj: 目前组里使用的是前端技术是jQuery + Bootstrap,后端使用的Django,Flask等,模板是在后端渲染的.前后端没有分离,这种做法有几个缺点 1. 模板一般是由 ...

  5. angular和vue双向数据绑定

    angular和vue双向数据绑定的原理(重点是vue的双向绑定) 我在整理javascript高级程序设计的笔记的时候看到面向对象设计那章,讲到对象属性分为数据属性和访问器属性,我们平时用的js对象 ...

  6. vue.js数据绑定

      语法         插值             双大括号:{{text}} {{*text}}之渲染第一次 {{{html}}}        表达式(各种数值,变量,运算符的综合体)     ...

  7. Vue.js 数据绑定语法详解

    Vue.js 数据绑定语法详解 一.总结 一句话总结:Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue ...

  8. vue双向数据绑定最最最最最简单直观的例子

    vue双向数据绑定最最最最最简单直观的例子 一.总结 一句话总结:双向绑定既不仅model可以影响view的数据,view也可以影响model的数据 view model 数据 1.vue双向数据绑定 ...

  9. React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定

    1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...

  10. 详解 vue 双向数据绑定的原理，并实现一组双向数据绑定

    1:vue 双向数据绑定的原理: Object.defineProperty是ES5新增的一个API,其作用是给对象的属性增加更多的控制Object.defineProperty(obj, prop, ...

随机推荐

  1. 2019年5月22日 AY 程序员调侃语录

    我是AY,杨洋,做wpf开发的,最近得了一种病,程序员患得患失综合征.同事说,我年纪在变大,技术跟不上.业余之间,我原创了写了一些语录,给大家中午休息,累疲惫的时候,开心放松下. 1.活着的每一天都无 ...

  2. （水题）洛谷 - P1308 - 统计单词数

    https://www.luogu.org/problemnew/show/P1308 简单哈希一下判断,练练手. 注意fgets()的用法,第一个参数传存储位置,第二个参数传内存上限,第三个传std ...

  3. hdoj2159【二位费用背包】

    题意: 略: 推荐看一下那个背包九讲,第五讲非常清晰啊. 原文: 算法 费用加了一维,只需状态也加一维即可.设f[i][v][u]表示前i件物品付出两种代价分别为v和u时可获得的最大价值.状态转移方程 ...

  4. poj 2891 Strange Way to Express Integers【扩展中国剩余定理】

    扩展中国剩余定理板子 #include<iostream> #include<cstdio> using namespace std; const int N=100005; ...

  5. P1211 街道赛跑

    又是一下午的杠题,累啊~~~ 这道题第一问很简单,只需去掉一个点,判断能不能到达终点就行了: 第二问其实仔细想想也不难,就是判断去掉一个点后是否形成两个图:首先要知道是建立在第一问的基础上的:在加边的 ...

  6. MySql | 常用操作总结

    创建数据库: CREATE DATABASE 数据库名; 删除数据库名: drop database <数据库名>; 选择数据库: use 数据库名; 创建数据表: CREATE TABL ...

  7. C++ typedef typename 作用

    C++ typedef typename 作用 C++的一些语法让人看着费解,其中就有: typedef typename std::vector<T>::size_type size_t ...

  8. 双端队列 HDOJ 3530 Subsequence

    题目传送门 题意:问最长子序列,满足区间最大值 - 最小值在[m, k]之间 分析:用双端队列维护最大值和最小值,保存的是位置.当满足条件时,更新最大值. /********************* ...

  9. Kruskal && Prim模板

    1. Kruskal(并查集模板): /* Kruskal:并查集实现,记录两点和距离,按距离升序排序,O (ElogE) */ struct Edge { int u, v, w; bool ope ...

  10. 520 Detect Capital 检测大写字母

    给定一个单词,你需要判断单词的大写使用是否正确.我们定义,在以下情况时,单词的大写用法是正确的:    全部字母都是大写,比如"USA".    单词中所有字母都不是大写,比如&q ...