vue.js入门代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
[v-cloak]{/*网速比较慢可以用此命令隐藏msg*/
display: none;
}
</style>
</head>
<body>
<div id="app">
<p v-cloak>+++++{{msg}}-----</p><!--接受消息-->
<h4 v-text="msg">==========</h4><!--接受消息-->
<input type="button" value="点我啊" @click="btnHandler">
<input type="button" value="传送门" @click="ch">
<a href="http://www.baidu.com" @click.prevent="onclick">百度一下,不跳转</a><!--阻止自动跳转-->
<a href="http://www.baidu.com" @click="onclick1">百度一下,跳转</a>
</div>
<!--引入vue.js-->
<script src="./WEB-INF/lib/vue.js"></script>
<script>
//创建Vue的实体
var vm=new Vue({
el:'#app',
data:{
msg: 'Hello Vue.js!'
},
//方法的合集,都写在此处
methods:{
onclick1(){
alert("直接跳了")
},
onclick(){
alert("阻止baidu的跳转")
},
ch(){
alert("传送出来了")
},
btnHandler (){
alert("显示出来了")
}
}
})
</script>
</body>
</html>
vue.js入门代码的更多相关文章
- Vue.js 入门指南
1.Vue.js是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注 ...
- Vue.js入门（一）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta htt ...
- Vue.js 入门：从零开始做一个极简 To-Do 应用
Vue.js 入门:从零开始做一个极简 To-Do 应用 写作时间:2019-12-10版本信息:Vue.js 2.6.10官网文档:https://cn.vuejs.org/ 前言 学习 Vue ...
- Vue.js 入门教程
Vue.js 入门教程:https://cn.vuejs.org/v2/guide/index.html
- 免费的 Vue.js 入门与进阶视频教程
这是我免费发布的高质量超清「Vue.js 入门与进阶视频教程」. 全网最好的.免费的 Vue.js 视频教程,课程基于 Vue.js 2.0,由浅入深,最后结合实际的项目进行了最棒的技术点讲解,此课程 ...
- Vue.js入门
之前一直用的是jQuery,jQuery手动操作DOM导致性能不够好,因为DOM修改导致的页面重绘.重新排版!重新排版是用户阻塞的操作,同时,如果频繁重排,CPU使用率也会猛涨! Vue.js是数据驱 ...
- Vue.js 入门指南之“前传”（含sublime text 3 配置）
题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴 ...
- 一个Java程序猿眼中的前后端分离以及Vue.js入门
松哥的书里边,其实有涉及到 Vue,但是并没有详细说过,原因很简单,Vue 的资料都是中文的,把 Vue.js 官网的资料从头到尾浏览一遍该懂的基本就懂了,个人感觉这个是最好的 Vue.js 学习资料 ...
- [转]Vue.js 入门教程
本文转自:http://www.runoob.com/w3cnote/vue-js-quickstart.html 什么是 Vue.js? Vue.js 是用于构建交互式的 Web 界面的库. Vu ...
随机推荐
- springboot之swagger快速启动
springboot之swagger快速启动 简介 介绍 可能大家都有用过swagger,可以通过ui页面显示接口信息,快速和前端进行联调. 没有接触的小伙伴可以参考官网文章进行了解下demo页面. ...
- SCRUM的三个工件
转自:http://www.scrumcn.com/agile/scrum-knowledge-library/scrum.html#tab-id-6 Scrum 的工件以不同的方式展现工作和价值,可 ...
- 2019DX#8
Solved Pro.ID Title Ratio(Accepted / Submitted) 1001 Acesrc and Cube Hypernet 7.32%(3/41) 1002 A ...
- CodeForces 1105E Helping Hiasat 最大独立集
Helping Hiasat 题解: 如果我们把连续的2出现的人都相互连边的话, 题目就是问最大独立集的答案是多少. 求最大独立集可以将图变成反图, 然后求最大团. 代码: #include<b ...
- 【Offer】[55-2] 【平衡二叉树】
题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 输入一棵二叉树的根节点,判断该树是不是平衡二叉树.如果某二叉树中任意节点的左.右子树的深度相差不超过1,那么它就是一棵平衡二叉树.例如, ...
- Springboot国际化信息（i18n）解析
国际化信息理解 国际化信息也称为本地化信息 . Java 通过 java.util.Locale 类来表示本地化对象,它通过 “语言类型” 和 “国家/地区” 来创建一个确定的本地化对象 .举个例子吧 ...
- 5.cookie每个参数的意义和作用以及工作原理？
cookie主要参数有: (1)expires 过期时间 (2)path cookie存放路径 (3)domain 域名 同域名下可访问 (4)Set-Cookie: name cookie名称
- 谈谈你对HTML语义化的理解。
1.什么是HTML语义化? 基本上都是围绕着几个主要的标签,像标题(h1-h6),列表(li),强调(strong em)等. 根据内容的语义化(内容结构化),选择合适的标签(代码语义化),便于开发者 ...
- Java多线程（十四）：Timer
Timer schedule(TimerTask task, Date time) 该方法在指定日期执行任务,如果是过去的时间,这个任务会立即被执行. 执行时间早于当前时间 示例代码,当前时间是201 ...
- TestNG（十二） 参数化测试
<?xml version="1.0" encoding="utf-8" ?> <suite name = "parameter&q ...