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

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. SAS学习笔记63 如何导出Log

    如上,将Log输出,然后又恢复到SAS系统里面的Log,把需要运行的程序放到他们中间就可以了.这种方法不会出现Log打印满了的情况 这种是先输出在SAS系统里面,然后在输出,在SAS里面Log的行是有 ...

  2. SAS学习笔记61 set和union的区别

    好久没发博客了,水一篇,直接来代码 set的结果如下 union的结果如下

  3. Spring Cloud--实现Eureka的高可用（Eureka集群搭建）实例

    将10086注册到10087上: 再在10086服务的基础上复制一个Eureka的服务,端口为10087,将其注册到10086上: application-name的名称保持一致,只是一个服务的两个实 ...

  4. python 协程池和pool.map用法

    一.问题描述 现在有一段代码,需要扫描一个网段内的ip地址,是否可以ping通. 执行起来效率太慢,需要使用协程. #!/usr/bin/env python # -*- coding: utf-8 ...

  5. UOJ269 清华集训2016 如何优雅地求和 下降幂多项式、NTT

    代码 神仙题? 看到连续的点值,那么一定是要利用到连续点值的性质,可以考虑下降幂多项式,即考虑多项式\(F(x) = \sum\limits_{i=0}^m a_ix^{\underline i}\) ...

  6. nginx配置http静态站点服务器

    1.  系统环境Windows 10 2.  设置静态站点目录,注意不要出现中文(这里踩了很多坑,可以查看错误日志error.log, “No mapping for the Unicode char ...

  7. 转 js一个简单实用的弹出层

      关闭 点击查看 >> <html> <head> <title>新文件标题</title> <script type=" ...

  8. windows下git创建本地分支并建立对应远程分支

    在对应项目目录下打开命令提示符 git branch -a      查看所有本地和远程分支 git checkout -b [newBranch]     建立本地分支newBranch git p ...

  9. 分布式系统session一致性解决方案

    在单机系统中,不存在Session共享问题,但是在分布式系统中,我们必须实现session共享机制,使得多台应用服务器之间会话统一,如果不进行Session共享会出现数据不一致,比如:会导致请求落到不 ...

  10. SAP云平台CloudFoundry环境里route 超过quota的错误处理

    试图往SAP Cloud Platform CloudFoundry用命令行CLI部署应用时,遇到如下错误: 原因是因为这个新建的名为Haytham的subaccount没有分配application ...