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

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. 小程序day1-day3随笔

    0==小程序的结构和组件 1==小程序常用组件:text文本属性 3==小程序UI组件view的属性hover 鼠标点击出现的效果hover 4==小程序ui组件button按钮组件的属性 5==小程 ...

  2. golang --iota 用法

    package main import "fmt" func main() { const ( a = iota //0 b //1 c //2 d = "ha" ...

  3. Kubernetes1.11.1 使用Nvidia显卡配置方法

    一.安装 1.1.kubernetes硬件支持问题说明 Kubernetes目前主要在很小程度上支持CPU和内存的发现.Kubelet本身处理的设备非常少.Kubernetes对于硬件都使用都依赖于硬 ...

  4. Java调用WebService方法总结(8)--soap.jar调用WebService

    Apache的soap.jar是一种历史很久远的WebService技术,大概是2001年左右的技术,所需soap.jar可以在http://archive.apache.org/dist/ws/so ...

  5. Elasticsearch 及 Kibana 安装篇

    简介 官网-安装介绍 这里记载了各个软件包的安装方法,Linux Mac Windows-- 本文记载的是在 CentOS 系统安装 Elasticsearch 7.0.0 版本的步骤. 安装 Jav ...

  6. 【转载】C#中List集合使用RemoveRange方法移除指定索引开始的一段元素

    在C#的List集合操作中,移除集合中的元素可以使用Remove方法和RemoveAt方法,这两个方法都是进行单个List集合元素的移除,其实List集合中还有个RemoveRange方法来移除一整段 ...

  7. mysql 模糊查询like小结

    以不完整的条件进行查询 因为条件是模糊的 所以叫模糊查询,可以对有相同信息的数据快速归类 . like  运算符:可以很好的通过%和-两种通配符对数据进行筛选查询 %(所有)放在条件前中后.可查询包含 ...

  8. 阿里云ACA—— I

    ACA 阿里云大数据助理工程师 阿里云大学 大数据助理工程师课程笔记分享, 本资料仅供个人学习,不允许用作商业用途,侵权必删 == Alibaba Cloud Certification Associ ...

  9. websocket之简易聊天室

    一,带昵称的群聊 #!/usr/bin/env python # -*- coding:utf8 -*- import json from flask import Flask, request, r ...

  10. 数据库事务和锁（三）——INNODB_LOCKS, INNODB_LOCK_WAITS, INNODB_TRX表的简单介绍

    INNODB_LOCKS, INNODB_LOCK_WAITS, INNODB_TRX是MYSQL中事务和锁相关的表.通常我们遇到事务超时或锁相关问题时,直接运行下面SQL语句即可进行简单检查: -- ...