<!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. Scyther-Semantics and verification of Security Protocol 翻译 (第二章 2.2.2----2.3)

    2.2.2  事件顺序 协议中的每个角色对应于事件列表,换句话说, 在属于角色 R 的协议事件集上施加结构,总的排序表示为 $ \prec $ , 如此任何角色 R∈Role 和 $\varepsil ...

  2. 微信小程序开发（十二）Promise将异步改为同步

    // utils/utils.js /** * requestPromise用于将wx.request改写成Promise方式 * @param:{string} myUrl 接口地址 * @retu ...

  3. jquery.js:9600 POST http://127.0.0.1:8000/news/1/comments/ 500 (Internal Server Error)

    什么情况? 代码报错了....查询 语句错误  看 编译提示. 数据 查询 语句的问题!!!!

  4. Windows与Linux之间文件传输

    (1).使用WinSCP工具,实现将Windows的文件上传到Linux指定目录下 (1).输入主机名.用户名.密码,选择登录,成功连接至Linux系统 (2).在左侧列表,选择要上传文件,单击右键选 ...

  5. No result defined for action com.java.test.Action.HelloAction and result index

    Struts中配置action访问出错: Struts Problem Report Struts has detected an unhandled exception: Messages: No ...

  6. PWA

    附一个示例e6书写 todolist的示例,切换list的状态: //todolist示例 const toggleTodo = (id)=>{ setTodos(todos => tod ...

  7. 一、vue基础--语法

      用到的前台编程工具是Visual Studio Code,暂时是官网下载vue.js到本地使用 一.Visual Studio Code需要安装的插件: jshint :js代码规范检查 Beau ...

  8. com.atomikos.datasource.ResourceException: XA resource 'masterDB': resume for XID异常

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/u014172271/article/det ...

  9. List根据某字段去重，以及compareTo 浅解

    原文链接:https://blog.csdn.net/qq_35788725/article/details/82259013 Collections.sort可对集合进行排序 根据List里面某个字 ...

  10. MySQL 5.6 中一个重要的优化——Index Condition Pushdown，究竟push down了什么

    1        问题描述 一条SQL,在数据库中是如何执行的呢?相信很多人都会对这个问题比较感兴趣.当然,要完整描述一条SQL在数据库中的生命周期,这是一个非常巨大的问题,涵盖了SQL的词法解析.语 ...