vue的双向绑定,使用v-model,v-model只能使用在input  textare    select中

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

</head>

<body>

<div id="app">

    <label for="username">用户名：</label>

    <input type="text" v-model="msg" id="username">

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

    <textarea placeholder="add multiple lines" v-model='msg'></textarea>

    <input type="checkbox" id="checkbox" v-model="checked">

    <label for="checkbox">{{ checked }}</label>

    <br>

    <!--多个复选框 使用列表保存-->

    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">

    <label for="jack">Jack</label>

    <input type="checkbox" id="john" value="John" v-model="checkedNames">

    <label for="john">John</label>

    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">

    <label for="mike">Mike</label>

    <br>

    <span>Checked names: {{ checkedNames }}</span>

    <br>

    <select v-model="selected">

        <option disabled value="">请选择</option>

        <option>A</option>

        <option>B</option>

        <option>C</option>

    </select>

    <span>Selected: {{ selected }}</span>

    <!--懒监听-->

    <input v-model.lazy="msg" >

    <!--数字显示-->

    <input v-model.number="age" type="number">

    <!--清除前后空格-->

    <input v-model.trim="msg">

</div>

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

<script>

    new Vue({

        el: '#app',

        data() {

            return {

                msg: 'alex',

                checked: false,

                checkedNames: [],

                selected:'',

                age:0

            }

        }

    })

</script>

</body>

</html>

v-model的用法

局部组件是使用:组件是可复用的 Vue 实例，且带有一个名字

组件的组织

通常一个应用会以一棵嵌套的组件树的形式来组织：

例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。至此，我们的组件都只是通过 Vue.component 全局注册的：Vue.component('my-component-name', {

  // ... options ...
})
全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。

如果是实例化的vue对象,既有el,又有template,如果template中定义了模板内容,那么template的优先级大于el

三步走:声子,挂子,用子

　　声子:Vue中组件的名字,首字母要大写,要和标签区分,组件中的data必须是一个函数,一定要有返回值

　　

VUE的双向绑定及局部组件的使用的更多相关文章

  1. vue 解决双向绑定中 父组件传值给子组件后 父组件值也跟着变化的问题

    说明: 近日开发中碰见一个很诡异的问题,  父组件动态的修改对象 data 中的值, 然后将这个对象 data 传给子组件, 子组件拿到后将 data 中的值 乘以 100 ,发现父组件中的值也跟着变 ...

  2. Vue.js双向绑定的实现原理

    Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少 ...

  3. Vue.js双向绑定的实现原理和模板引擎实现原理（##########################################）

    Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...

  4. 西安电话面试：谈谈Vue数据双向绑定原理，看看你的回答能打几分

    最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...

  5. Vue.js双向绑定原理

    Vue.js最核心的功能有两个,一个是响应式的数据绑定系统,另一个是组件系统.本文仅仅探究双向绑定是怎样实现的.先讲涉及的知识点,再用简化的代码实现一个简单的hello world示例. 一.访问器属 ...

  6. 揭密 Vue 的双向绑定

    Vue 中需要输入什么内容的时候,自然会想到使用 <input v-model="xxx" /> 的方式来实现双向绑定.下面是一个最简单的示例 剖析Vue原理& ...

  7. vue的双向绑定和依赖收集

    在掘金上买了一个关于解读vue源码的小册,因为是付费的,所以还比较放心 在小册里看到了关于vue双向绑定和依赖收集的部分,总感觉有些怪怪的,然后就自己跟着敲了一遍. 敲完后,发现完全无法运行,  坑啊 ...

  8. vue的双向绑定原理及实现

    前言 使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图 ...

  9. Vue数据双向绑定原理及简单实现

    嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...

随机推荐

  1. Python Django的安装配置

    学习Django前,我们要确定电脑上是否已经安装了Python,目前Python有两个版本,不过这两个版本并不互相兼容,所以根据个人选择合适的版本. 因为从Django2.0开始将不再支持Python ...

  2. p5437 【XR-2】约定

    分析 https://www.cnblogs.com/cjyyb/p/11111404.html 代码 #include<bits/stdc++.h> using namespace st ...

  3. EnumMap 源码分析

    EnumMap EnumMap 能解决什么问题?什么时候使用 EnumMap? 1)EnumMap[枚举映射]中的键值必须来自单个枚举. 2)EnumMap 根据枚举键的自然顺序来维护,迭代遍历是有序 ...

  4. 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_05 IO字符流_4字符输出流的基本使用_写出单个字符

    写完之后不刷新,则没有数据.数据只是写如到了内存缓冲区中 必须要调用flush方法,把数据刷新过去 close关闭的时候也会把数据刷新到文件中.这里把flush注释了也是可以的

  5. 07 归档模式 Active redo log丢失或损坏的恢复

    环境同上一篇 模拟处于active状态的redo log损坏 sesion 1 SYS@ orcl >/ GROUP# THREAD# SEQUENCE# BYTES BLOCKSIZE MEM ...

  6. MySQL 编码：utf8 与 utf8mb4，utf8mb4_unicode_ci 与 utf8mb4_general_ci

    参考:mysql字符集小结 utf8mb4 已成为 MySQL 8.0 的默认字符集,在MySQL 8.0.1及更高版本中将 utf8mb4_0900_ai_ci 作为默认排序规则. 新项目只考虑 u ...

  7. 模块内高内聚?模块间低耦合?MVC+EF演示给你看！

    前言 在软件项目开发过程中,我们总能听见“高内聚,低耦合”,即使这种思想在我们学习编程的过程中就已经耳濡目染.可一旦当我们上项目,赶进度的时候我们就会“偷懒”,能省时间就省.管他什么设计模式,什么软件 ...

  8. linux驱动模型——platform（1）

    一.驱动模型包含什么? 1.1. 类class 1.1.2. 它能够自动创建/dev下的设备节点,不需要mknod /dev/xxx c x x创建.当然class还有其另外的作用,且自动创建设备节点 ...

  9. require 和 import 详解

    前言 JS模块化编程是前端小伙伴们必不可少的知识,下面妹子将于自认为比较清晰的方式列举出来. 1 require 特点: 1.运行时加载 2.拷贝到本页面 3.全部引入 1.1 CommonJS No ...

  10. P5443 [APIO2019]桥梁

    传送门 子任务 $4$ 告诉我们可以离线搞带权并查集 从大到小枚举询问,从大到小连边 如果没有修改操作就可以过了 但是有修改,考虑最暴力的暴力,搞可撤销并查集 同样先离线,从大到小处理询问时,按原边权 ...