<!DOCTYPE html>

<html lang="en" xmlns:v‐on="http://www.w3.org/1999/xhtml">

<head>

<meta charset="UTF‐8">

<title>vue.js入门程序</title>

</head>

<body>

<div id="app">

<!‐‐{{name}}解决闪烁问题使用v‐text‐‐>

<a v‐bind:href="url"><span v‐text="name"></span></a>

<input type="text" v‐model="num1">+

<input type="text" v‐model="num2">=

<span v‐text="result"></span>

<!‐‐ <span v‐text="Number.parseInt(num1)+Number.parseInt(num2)"></span>‐‐>

<!‐‐{{num1+num2}}‐‐>

<!‐‐<input type="text" v‐model="result">‐‐>

<button v‐on:click="change">计算</button>

<!‐‐ 在Vue接管区域中使用Vue的系统指令呈现数据

这些指令就相当于是MVVM中的View这个角色 ‐‐>

</div>

</body>

<script src="/js/vue/vue.min.js"></script>

<script>

// 实例化Vue对象

//vm :叫做MVVM中的 View Model

var VM = new Vue({

el:"#app",//表示当前vue对象接管app的div区域

data:{

name:'黑马程序员',// 相当于是MVVM中的Model这个角色

num1:0,

num2:0,

result:0,

url:'http://www.itcast.cn'

},

methods:{

change:function(){

this.result = Number.parseInt(this.num1)+Number.parseInt(this.num2)

alert(this.result)

}

}

});

</script>

</html>


加之前先转换成Number类型

阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_04-vuejs研究-vuejs基础-v-model指令的更多相关文章

  1. 微服务项目开发学成在线_day02 CMS前端开发

    1 Vue.js与Webpack研究 开发版的浏览器:https://www.google.cn/intl/zh-CN/chrome/dev/ 前端的开发框架:微服务项目开发学成在线_Vue.js与W ...

  2. 阶段5 3.微服务项目【学成在线】_day04 页面静态化_16-页面静态化-模板管理-模板制作

    这是轮播图的原始文件 运行门户需要把 nginx启动起来 单独运行轮播图.把里面的css的引用都加上网址的url 这就是单独访问到的轮播图的效果 轮播图模板的地址: 阶段5 3.微服务项目[学成在线] ...

  3. 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_16-CMS前端工程创建-导入系统管理前端工程

    提供了基于脚手架封装好的前端工程 H:\BaiDu\黑马传智JavaEE57期 2019最新基础+就业+在职加薪\阶段5 3.微服务项目[学成在线]·\day02 CMS前端开发\资料\xc-ui-p ...

  4. 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_03-用户认证技术方案-Oauth2协议

    2.2 Oauth2认证 2.2.1 Oauth2认证流程 第三方认证技术方案最主要是解决认证协议的通用标准 问题,因为要实现 跨系统认证,各系统之间要遵循一定的 接口协议. OAUTH协议为用户资源 ...

  5. 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_01-用户认证需求分析

    1.1 用户认证与授权 截至目前,项目已经完成了在线学习功能,用户通过在线学习页面点播视频进行学习.如何去记录学生的学习过程 呢?要想掌握学生的学习情况就需要知道用户的身份信息,记录哪个用户在什么时间 ...

  6. 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_05-Feign远程调用-客户端负载均衡介绍

    2 Feign远程调用 在前后端分离架构中,服务层被拆分成了很多的微服务,服务与服务之间难免发生交互,比如:课程发布需要调用 CMS服务生成课程静态化页面,本节研究微服务远程调用所使用的技术. 下图是 ...

  7. 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_02-Eureka注册中心-搭建Eureka单机环境

    我们先搭建单机环境 govern是治理的意思, 这样就把工程创建好了 创建包 创建SpringBoot的启动类. 在父工程里面已经确定了Spring Cloud的版本了.相当于锁定了版本 接下里只需要 ...

  8. 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_04-Eureka注册中心-将服务注册到Eureka Server

    cms相当于客户端 配置客户端的信息 后面加逗号分隔开 50102表示向两台eureka服务上报服务,如果有一台死掉了 那么还可以上另外的一台去注册服务 直接把ip注册到eureka 启动类加注解 重 ...

  9. 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_01-Eureka注册中心-Eureka介绍

    1 Eureka注册中心 1.1 需求分析 在前后端分离架构中,服务层被拆分成了很多的微服务,微服务的信息如何管理?Spring Cloud中提供服务注册中 心来管理微服务信息. 为什么 要用注册中心 ...

  10. 阶段5 3.微服务项目【学成在线】_day18 用户授权_03-方法授权-jwt令牌包含权限

    修改认证服务的UserDetailServiceImpl类,下边的代码中 permissionList列表中存放了用户的权限, 并且将权限标识按照中间使用逗号分隔的语法组成一个字符串,最终提供给Spr ...

随机推荐

  1. Visual studio 2010 打开高版本VS工程解决办法

    第一步.找到工程项目文件: 第二步.编辑项目文件 找到Format Version 12.00 ,将数字改为11.00 再找到#Visual Studio 14 将数字改为2010 点击保存并关闭 第 ...

  2. 关于Linux、python的PDF书籍整理（附带亲测的 IT 电子书网站）

    [18.1.3][在博客园发的文章不是很多呢,接下来的博客会转移到独立的个人博客网站上去了,具体的学习笔记和内容都会在独立网站上发布,后期还会有博主的个人资源库和教程还有独立网盘存储(可以关注一波哈) ...

  3. springboot 学习小结

    springboot 默认自动扫描和配置根包下面的类.如果启动配置不在根包目录下,得把对应的类进行配置扫描生成对应的bean. 主要的扫描注解有: @SpringBootApplication //s ...

  4. Anton and Chess（模拟+思维）

    http://codeforces.com/group/1EzrFFyOc0/contest/734/problem/D 题意:就是给你一个很大的棋盘,给你一个白棋的位置还有n个黑棋的位置,问你黑棋能 ...

  5. mysql运维相关

    1.为什么要分库分表(设计高并发系统的时候,数据库层面该如何设计)?用过哪些分库分表中间件?不同的分库分表中间件都有什么优点和缺点?2.现在有一个未分库分表的系统,未来要分库分表,如何设计才可以让系统 ...

  6. bat 判断 bat 是否是以管理员权限运行，和自动以管理员权限运行

    bat 判断 bat 是否是以管理员权限运行,和自动以管理员权限运行 判断 @echo off net.exe session 1>NUL 2>NUL && ( goto ...

  7. vue-cli3 clone项目后如何安装插件及依赖模块启动项目

    一. 前提条件1.确保使用的是Node 8.11.0+和NPM 3+:2.确保已全局安装vue-clie3:npm install -g @vue/cli: 二.安装依赖 1.在安装依赖之前,先安装官 ...

  8. laravel本地开发环境的安装及配置 - Windows：安装 Laravel Homestead 虚拟机

    一.安装 VirtualBox-5.2.22-126460-Win.exe 和 vagrant_2.2.2_x86_64.msi(可视化安装包安装); 安装在D盘 二.导入 Homestead Vag ...

  9. mysql中对表操作----为所有列插入数据

         为所有列插入数据 通常情况下,向数据表中插入数据应包含表中所有字段,也就是为表中所有字段添加数据,为表中所有字段添加数据有以下两种方式. 1.INSERT语句中指定所有字段名 使用INSER ...

  10. this关键词详解

    当一个对象创建后,Java虚拟机(JVM)就会给这个对象分配一个引用自身的指针,这个指针的名字就是 this. 因此,this只能在类中的非静态方法中使用,静态方法和静态的代码块中绝对不能出现this ...