<!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动态分区与静态分区

    测试目的:1.分区表的动态分区与静态分区2.每层数据,数据流向,数据是否在每层都保留一份测试结果:1.动态分区/静态分区略2.每层表的数据都会保留,因此在生产上odm层的数据是可以删除的(不管是内表还 ...

  2. Java 从入门到进阶之路（二）

    之前的文章我们介绍了一下用 IDEA 编辑器创建一个 Java 项目并输出 HelloWorld,本章我们来看一下 Java 中的变量和基本数据类型. 在这之前我们先来看一下 Java 中的关键字,这 ...

  3. HTML基础介绍

    前言: H5是目前行业里非常热门的一种语言,学习难度较低,可以快速入门.我个人也在学习H5,采用写博客的方式来梳理我学到的知识点,也分享给更多想学习的人一起来学习. Tip:个人学习过程中梳理的知识点 ...

  4. Python获取系统交互式shell，跨平台

    本文地址:https://www.cnblogs.com/M4K0/p/9044237.html 昨天搞了半天,终于把这两个环节打通了.后续可以进一步调用adb命令执行一些操作,细节说明已在代码中添加 ...

  5. SPI 机制-插件化扩展功能

    SPI(Service Provider Interfaces),中文直译服务提供者接口,一种服务发现机制.可能很多人都不太熟悉这个机制,但是平常或多或少都用到了这个机制,比如我们使用 JDBC 连接 ...

  6. HTML5 storage事件监听

    引用<h5移动web开发指南>上的话: “当同源页面的某个页面修改了localStorage,其余的同源页面只要注册了storage事件,就会触发” 所以,localStorage  st ...

  7. Java多线程之线程的启动

    Java多线程之线程的启动 一.前言 启动线程的方法有如下两种. 利用Thread 类的子类的实例启动线程 利用Runnable 接口的实现类的实例启动线程 最后再介绍下java.util.concu ...

  8. Java集合框架之List接口浅析

    Java集合框架之List接口浅析 一.List综述: 毫无疑问List接口位于java.util包下,继承自 Collection接口 存储元素的特点: 有序可重复(有序:即存进去是什么顺序,取出来 ...

  9. mysql 实战

    建表语句: CREATE TABLE employee ( id int(11) NOT NULL AUTO_INCREMENT, name varchar(150) NOT NULL DEFAULT ...

  10. HDU 5984 题解 数学推导 期望

    Let’s talking about something of eating a pocky. Here is a Decorer Pocky, with colorful decorative s ...