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

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. python 读取环境变量

    python 读取环境变量 前言 在使用python时候千万不要把账户密令直接写入脚本,特别是当你计划开源自己的作品时. 为了保护账户信息,你需要让脚本从环境中导入敏感信息. 读取方法 import ...

  2. ColorMatrixFilter色彩矩阵滤镜

    ColorMatrixFilter色彩矩阵滤镜: /** * * *----------------------------------------* * | *** ColorMatrixFilte ...

  3. 当base-package="controller.*"时，可见packageSearchPath为"classpath*:controller/*/**/*.class"： 当base-package="controller.**"时，可见packageSearchPath为"classpath*:controller/**/**/*.class"：

    今天在配置Spring的component-scan时,发现了一个有趣的问题.就是在指定base-package时,如果使用了星号通配符*,有时会出现类扫描不到的情况.下面研究一下这个问题. 先介绍一 ...

  4. Python Django 协程报错,进程池、线程池与异步调用、回调机制

    一.问题描述 在Django视图函数中,导入 gevent 模块 import gevent from gevent import monkey; monkey.patch_all() from ge ...

  5. Spring Cloud Alibaba学习笔记（22） - Nacos配置管理

    目前业界流行的统一配置管理中心组件有Spring Cloud Config.Spring Cloud Alibaba的Nacos及携程开源的Apollo,本文将介绍Nacos作为统一配置管理中心的使用 ...

  6. Java序列化流

    1.什么是序列化流 序列化就是把Java对象“流化”,序列化后的Java对象可以保存到本地文件系统,或者通过Socket传输到其他的服务器. Java中对象序列化有以下特点: 1)类实现java.io ...

  7. 1+X证书学习日志 —— css样式表

    ## 因为初级的内容较多,所以选了一些有用的 需要记忆的内容写下 方便日后回顾 CSS语法   选择符{属性:属性值;} ##             所有的css代码 都要放在css样式表里面    ...

  8. ubuntu安装mysql数据库方法

    ubuntu基于linux的免费开源桌面PC操作系统,十分契合英特尔的超极本定位,支持x86.64位和ppc架构.一个比较流行的Linux操作系统,不仅简单易用,而且和Windows相容性非常好.那么 ...

  9. Bootstrap 结合 PHP ,做简单的登录以及注册界面及功能

    登录实现 HTML代码 <div class="container"> <?php if (isset($error_msg)): ?> <div c ...

  10. 智表ZCELL产品发布企业版

    为了满足部分企业用户无限分发的需要,智表插件在专业版基础上推出企业版本(http://zcell.net/productinfo.html),功能与专业版本保持一致.授权方式采用提供企业客户授权工具, ...