<!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. javascript导出csv文件（excel）

    这里贴出JavaScript导出csv文件(excel)的代码. /** * 导出excel * @param {Object} title 标题列key-val * @param {Object} ...

  2. 如何配置sigar在Linux和Windows下使用java语言获得各种系统信息

    转自:https://blog.csdn.net/qq_27093465/article/details/70227619

  3. 关于事务，事务的特性，spring事务的传播特性

    1.什么是事务: 事务是程序中一系列严密的操作,所有操作执行必须成功完成,否则在每个操作所做的更改将会被撤销,这也是事务的原子性(要么成功,要么失败). 2.事务特性: 事务特性分为四个:原子性(At ...

  4. CSS 锚点 :target属性 制作选项卡

    .pic img:first-of-type{display: block;} .pic img:target{display: block;}

  5. Spring Cloud Zuul的动态路由怎样做？集成Nacos实现很简单

    一.说明 网关的核心概念就是路由配置和路由规则,而作为所有请求流量的入口,在实际生产环境中为了保证高可靠和高可用,是尽量要避免重启的,所以实现动态路由是非常有必要的:本文主要介绍实现的思路,并且以Na ...

  6. tf.control_dependencies

    tf.control_dependencies()是用来控制计算流图的,给图中的某些节点指定计算的顺序. 原型: tf.control_dependencies(self, control_input ...

  7. unity之单例模式

    Unity中常见的四种单例 点击进入

  8. Java集合框架之HashSet浅析

    Java集合框架之HashSet浅析 一.HashSet综述: 1.1HashSet简介 位于java.util包下的HashSet是Java集合框架的重要成员,它在jdk1.8中定义如下: publ ...

  9. Oracle 优化器_访问数据的方法_单表

    Oracle 在选择执行计划的时候,优化器要决定用什么方法去访问存储在数据文件中的数据.我们从数据文件中查询到相关记录,有两种方法可以实现:1.直接访问表记录所在位置.2.访问索引,拿到索引中对应的r ...

  10. Java8新特性_lambda表达式和函数式接口最详细的介绍

    Lambda表达式 在说Lambda表达式之前我们了解一下函数式编程思想,在数学中,函数就是有输入量.输出量的一套计算方案,也就是“拿什么东西做什么事情”. 相对而言,面向对象过分强调“必须通过对象的 ...