输入端在上面变化的同时,下面的内容也在变

View-->DOM监听-->指令;大括号数据

{{username}}

Model-->模型(简单来说就是data,数据供view自动去读,自动读的背后需要有ViewModel的支撑)

data:{//数据(model)
            username:'赵云'
        }

ViewModel-->实例vm

vm=new Vue({//配置对象  option
        el:'#app',//element:选择器
        data:{//数据(model)
            username:'赵云'
        }
    })
　　DataBinding 实现数据从内层model读数据到外层view
　　DOM Listener:数据输入框发生改变,需要Dom监听
其实是声明式开发:
不需要处理整个流程,只需要写特定语法的代码就可以如{{name}},说明我需要data里面的name
背后的一切不需要你来做,只需要按照别人的语法声明v-model就可以.
命令式开发:
说白了就是Jquery的写法,我们要去监听输入的值,读完之后需要把值设置到<p>标签中去.

=====================================================================================================================================================

1.test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01_HelloWorld</title>
</head>
<body>
<!--
1.引入vue.js
2.创建Vue对象
    el:指定根element(选择器)
    data:初始化数据(页面可以访问)
3.双向数据绑定: v-model
4.显示数据:{{}}
5.理解vue的mvvm实现
-->
<div id="app"> <!--view-->
    <input type="text" v-model="username">
    <p>Hello {{username}}</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    //创建Vue实例
    const vm=new Vue({//配置对象  option
        el:'#app',//element:选择器
        data:{//数据(model)
            username:'赵云'
        }
    })
</script>
</body>
</html>

2.页面展示

厉害了!!!

(尚002)Vue的基本使用的更多相关文章

  1. 002——vue小结

    1.new 一个vue对象的时候你可以设置他的属性,其中最重要的包括三个,分别是:data,methods,watch. 2.其中data代表vue对象的数据,methods代表vue对象的方法,wa ...

  2. (尚022)Vue案例_初始化显示(十分详细!!!)

    项目结构目录 所需资料: comment_page文件夹: ====================================================================== ...

  3. (尚020)Vue打包发布项目

    1.项目的打包与发布 1.1打包: npm run build 报错: 原因:原来eslint是一个语法检查工具,但是限制很严格,在我的vue文件里面很多空格都会导致红线(红线可以关闭提示),虽然可以 ...

  4. (尚019)Vue基于脚手架编写项目

    vue_demo目录结构截图: (1)图一 (2).图二 (3).图三 (四).图四 (5).图五 (6).图六 (7).图七 不能随便改入口文件的名字,因为已经配置好了 (8).图八 (9).图九 ...

  5. (尚017)Vue插件

    1.如何开发插件? 2.编写自己的vue-myPlugin.js插件库,代码如下: /** * vue的插件库 * 最好使用匿名函数包裹起来,这样代码会更加规范 * 里面的实现被隐藏了 */(func ...

  6. (尚016)Vue指令(11个自带指令+自定义指令)

    1.Vue常用指令 1)v:text:更新元素的 textContent 2)v-html:更新元素的 innerHTML 3)v-if:如果为true,当前标签才会输出到页面 4)v-else:如果 ...

  7. (尚015)Vue过滤器(对显示的数据进行格式化)

    现在日期为:当前时间-1970年1月1日0时0分0秒的时间差 日期格式化:百度搜索moment 1.test015.html <!DOCTYPE html><html lang=&q ...

  8. (尚014)Vue过渡与动画

    操作元素时有个过渡或动画的效果(渐变和移动的效果和放大缩小的效果) 过渡:trasition 动画:animation 1.vue动画的理解 1)操作css的trasition或animation(它 ...

  9. (尚013)Vue的生命周期

    三个阶段: 一.初始化显示; 二:更新显示 三.死亡 每一个阶段都对应生命周期的回调函数(也叫勾子函数) 生命周期图示: 1. 2.test013.html <!DOCTYPE html> ...

随机推荐

  1. 05- if-else语句、循环for

    if-else 语句 if是条件语句.if语句的语法是 if 条件{ #注意大括号和条件之间不能换行 执行代码 } if语句还包括else if 和 else 部分 package main impo ...

  2. 【Linux】一步一步学Linux——Centos7.5安装图解(08)

    00. 目录 参考博客:https://mp.csdn.net/mdeditor/95031775# 01. Centos7.5简介 CentOS(Community Enterprise Opera ...

  3. Java8系列 (三) Spliterator可分迭代器

    本文转载自 jdk8 Stream 解析2 - Spliterator分割迭代器. 概述 我们最为常见的流的产生方式是 collection.stream(), 你点开Stream()方法, 他是通过 ...

  4. Java 枚举和抽象类添加状态值

    枚举: public enum CourseTypeEnum { VIDEO_COURSE(1,"录制课程"), LIVE_COURSE(2,"直播课程"), ...

  5. ③ Python3.0 数字类型

    Python3 的六个标准数据类型中:不可变数据(3 个):Number(数字).String(字符串).Tuple(元组):可变数据(3 个):List(列表).Dictionary(字典).Set ...

  6. JAVA - 普通类读取WEB-INF里面配置文件

    服务器:Tomcat 9 注意问题:配置文件应该放入Tomcat的正式工程目录中测试. 可用代码: package com.daoen.rtis.test; import java.io.FileRe ...

  7. redis3集群管理

    以下操作基于redis3.X版本:Redis集群存储原理:Redis 集群使用数据分片(sharding),而非一致性哈希(consistency hashing)来实现,一个 Redis 集群包含 ...

  8. RabbitMQ direct交换器

    1:队列和交换器多次绑定 String[] routekeys={"routekey1","routekey2","routekey3"}; ...

  9. SpringBoot AOP概念及使用Demo

    AOP核心概念1.横切关注点 对哪些方法进行拦截,拦截后怎么处理,这些关注点称之为横切关注点2.切面(aspect)->(通知+切点) 类是对物体特征的抽象,切面就是对横切关注点的抽象.通知+切 ...

  10. mysql Starting MySQL..The server quit without updating PID file

    可能的原因和解决办法 1.可能是/usr/local/mysql/data/rekfan.pid文件没有写的权限解决方法 :给予权限,执行 chown -R mysql:mysql /var/data ...