<!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>vue</title>

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

</head>

<body>

    <!-- vue中的属性绑定和双向数据绑定

        属性绑定：

        v-bind:title="title" 或 :title="title"

        双向数据绑定：

        v-model

     -->

    <div id="root">

        <div :title="title">hi man</div>

        <input v-model="content" />

        <div>{{content}}</div>

    </div>

    <script>

        new Vue({

            el:"#root",

            data:{

                title: "this is a dog",

                content:"this is a content"

            }

        })

    </script>

</body>

</html>

Vue学习之vue属性绑定和双向数据绑定的更多相关文章

  1. 2-4 Vue中的属性绑定和双向数据绑定

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Vue学习之路第九篇：双向数据绑定 v-model指令

    1.学习准备: ①:双向数据绑定可以简单理解为:后端定义的数据改变,前端页面展示的时候会自动改变,数据通过前端页面修改的时候,后端定义的数据内容也会随之改变. ②:指令中只有v-model可以实现双向 ...

  3. vue学习12-表单属性绑定

    1 <!DOCTYPE html> 2 <html lang='en'> 3 <head> 4 <meta charset='UTF-8'> 5 < ...

  4. vue学习之vue基本功能初探

    vue学习之vue基本功能初探: 采用简洁的模板语法将声明式的将数据渲染进 DOM: <div id="app"> {{ message }} </div> ...

  5. Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习

    一  使用环境: windows 7 64位操作系统 二  IDE:VSCode/PyCharm 三  Vue.js官网: https://cn.vuejs.org/ 四  下载安装引用 方式1:直接 ...

  6. Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发

    ===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...

  7. Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级

    (四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...

  8. vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus

    vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...

  9. Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明-Babel)

    五  Vue学习-vue-cli脚手架学习(创建只选一个选项:Babel) 1. 项目目录说明 node_modules : 包管理文件夹 public : 静态资源 src : 源代码 gitign ...

随机推荐

  1. Hive 系列（七）—— Hive 常用 DML 操作

    一.加载文件数据到表 1.1 语法 LOAD DATA [LOCAL] INPATH 'filepath' [OVERWRITE] INTO TABLE tablename [PARTITION (p ...

  2. （springboot）自定义Starter

    要引入的jar项目,即自定义的Starter项目: pom:(这里不能引入springboot整合否则测试项目注入失败) <?xml version="1.0" encodi ...

  3. H5 API drawImage的参数

    drawImage(this,120,0,180,150,0,0,180,150); //mg图片上的x坐标 img图片上的y坐标 剪切的宽 剪切的高 在canvas上的x坐标 在canvas上的y坐 ...

  4. Flume日志采集框架的使用

    文章作者:foochane  原文链接:https://foochane.cn/article/2019062701.html Flume日志采集框架 安装和部署 Flume运行机制 采集静态文件到h ...

  5. C++微信网页协议实现和应用

    微信推送报警消息实现 目录 1      前言... 2 1.1     背景... 2 1.2     现有技术对比... 2 2      总体流程... 2 3      微信网页接口解析... ...

  6. 「每日五分钟，玩转JVM」：对象从哪来

    面向对象 众所周知,Java是一门面向对象的高级编程语言,那么现在问题来了,对象从哪来呢?有些人会说通过new关键字来创建一个对象,说的很好,本篇我们就来解密在new一个对象的过程中,JVM都给我们做 ...

  7. 洛谷 P2051 [AHOI2009]中国象棋 状态压缩思想DP

    P2051 [AHOI2009]中国象棋 题意: 给定一个n*m的空棋盘,问合法放置任意多个炮有多少种情况.合法放置的意思是棋子炮不会相互打到. 思路: 这道题我们可以发现因为炮是隔一个棋子可以打出去 ...

  8. CH 5101 最长公共上升子序列

    题目传送门 题解:F[i][j] 表示 对于第一个数列枚举到i来说, 第二个数列以j结尾的最大长度是多少. 那么对于更新 F[i] -> F[i+1]来说  如果 a[i+1] == b[j] ...

  9. Django学习笔记(一)：第一个django程序

    1.创建和运行 django-admin startproject xxx python manage.py runserver 2.第一个项目程序 wsgi.py中文名:python服务器网关接口. ...

  10. Erlang模块erl翻译

    命令:     erl 概述:     Erlang模拟器 描述:     erl程序启动一个Erlang运行时系统.准确的信息是依赖于系统的(举例,erl是否是脚本或程序,其它程序调用).     ...