<!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. （四）Lock，ReentrantLock，ReentrantReadWriteLock类的使用以及相关api---synchronized进阶

    这篇博客记录了Lock,ReentrantLock,ReentrantReadWriteLock类的使用以及其一些api: 码字不易~~另外<java多线程编程核心技术>这本书读着很爽 前 ...

  2. 逻辑回归(Logistic Regression)详解,公式推导及代码实现

    逻辑回归(Logistic Regression) 什么是逻辑回归: 逻辑回归(Logistic Regression)是一种基于概率的模式识别算法,虽然名字中带"回归",但实际上 ...

  3. Redux概览

    简介 Redux 是一个有用的架构 Redux 的适用场景:多交互.多数据源 工作流程图 action 用户请求 //发出一个action import { createStore } from 'r ...

  4. iOS 视图渲染数据转CVPixelBuffer

    近两年一直从事视频行业的开发, 加班也比较严重, 好久没有写文章了, 最近稍微有些时间, 前来写点文章, 记录一些开发中遇到的问题, 和解决方法! 做视频会议项目, 当然是离不开音视频啦, 也常常和W ...

  5. HTML连载33-背景定位

    一.背景定位 同一个标签可以同时设置背景颜色和背景图片,如果颜色和图片同时存在,那么图片会覆盖颜色 1.在CSS中有一个叫做background-position:属性,就是专门用来控制背景图片的位置 ...

  6. Leetcode之深度优先搜索（DFS）专题-547. 朋友圈（Friend Circles）

    Leetcode之深度优先搜索(DFS)专题-547. 朋友圈(Friend Circles) 深度优先搜索的解题详细介绍,点击 班上有 N 名学生.其中有些人是朋友,有些则不是.他们的友谊具有是传递 ...

  7. PHP识别简单的图片上面的数字（可扩展）

    1.场景 最近在学习图片处理,就是特意把数字生成一个图片,然后再用程序去识别图片的数字.这就有了一下的学习过程. 2.原理分析 2.1 首先是将图片像素化,二值化,然后和字模去对比(需要相对于配置字模 ...

  8. JVM宏观认知&&内存结构

    JVM宏观认知 1.什么是虚拟机? 虚拟机是一种软件. 可分为系统虚拟机(仿真物理机)和程序虚拟机(执行单个计算机程序,比如JVM). 2.什么是Java虚拟机(JVM)? JVM是一种将字节码转化为 ...

  9. k近邻法的实现

    k近邻法 模型 使用的模型实际上对应于特征空间的划分.模型的三个基本要素:1.距离度量 2. k值的选择 3. 分类决策规则决定. k值的选择:k值的选择,k如果选择的过小会导致过拟合,模型会变得复杂 ...

  10. 骑士精神（IDA*）

    题目描述 输入格式 第一行有一个正整数T(T<=10),表示一共有N组数据.接下来有T个5×5的矩阵,0表示白色骑士,1表示黑色骑士,*表示空位.两组数据之间没有空行. 输出格式 对于每组数据都 ...