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

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. Codeblocks中文乱码解决方法。

    如需安装包请后台留言!! Codeblocks中文乱码解决方法: 特别提示:出现中文乱码情况才执行以下操作,未出现请勿随意修改!!!! 打开Codeblocks -> 设置 -> 编辑器: ...

  2. 【scratch3.0教程】1.2 下载安装scratch

    第2课  下载安装Scratch 1 . 什么是Scratch?                                Scratch将程序语言设计成一块块积木,你只要用拖拉的方式,将程序积木 ...

  3. AS3灰色图像

    一开始觉得AS3的滤镜很难使用,尤其是那些矩阵,让人望而生畏.最近写一个聊天模块,要用到离线状态下的灰色头像,于是认真研究了ColorMatrixFilter,发现其实也没有那么难.所谓的矩阵其实就是 ...

  4. Elasticsearch-6.7.0系列（七）SpringCloud连接ES集群，使用ES用户名密码

    pom.xml代码: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://ww ...

  5. Linux环境python3.6.5

     安装python3.6可能使用的依赖 yum -y install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel r ...

  6. Xshell连接虚拟机文档教程

    1打开VirtualBox 2 找到导入的虚拟机 3右键虚拟机 启动 4 等待加载 5 加载的时候,打开xshell 6 7 填写框住的内容 名称: 自己取 主机: 127.0.0.1  固定内容 端 ...

  7. Maven 的依赖范围

    Maven 在编译项目主代码的时候需要使用一套 classpath,在编译和执行测试的时候会使用另外一套 classpath.最后,实际运行 Maven 项目的时候,又会使用一套 classpath. ...

  8. lucene中Field简析

    http://blog.csdn.net/zhaoxiao2008/article/details/14180019 先看一段lucene3代码 Document doc = new Document ...

  9. Vue异步加载高德地图API

    项目中用到了高德地图的API以及UI组件库,因为是直接把引入script写在index.html中,项目打包后运行在服务器,用浏览器访问加载第一次时会非常慢,主要原因是加载高德地图相关的js(近一分钟 ...

  10. 分享个免费的svn平台

    平时在工作中难免会用到svn,但是要自己搭建一个,未免成本太高,近来,本人接触到一个免费的svn平台(可能大神们早就发现了),个人使用还是足够了. 地址:https://svnbucket.com 相 ...