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 ...
随机推荐
- pickle 序列化对象
# 序列化对象 import pickle mylist=[[1,2,3,4,5,6,7],["abc","xyz","hello"],[1 ...
- hdu-6681 Rikka with Cake
题目链接 hdu-6681 Problem Description Rikka's birthday is on June 12th. The story of this problem happen ...
- P2762 太空飞行计划问题 最大权闭合子图
link:https://www.luogu.org/problemnew/show/P2762 题意 承担实验赚钱,但是要花去对应仪器的费用,仪器可能共用.求最大的收益和对应的选择方案. 思路 这道 ...
- bzoj 2001 CITY 城市建设 cdq分治
题目传送门 题解: 对整个修改的区间进行分治.对于当前修改区间来说,我们对整幅图中将要修改的边权都先改成-inf,跑一遍最小生成树,然后对于一条树边并且他的权值不为-inf,那么这条边一定就是树边了. ...
- 基于GitLab+Jenkins的DevOps赋能实践
随着微服务.中台架构的兴起,DevOps也变得非常关键,毕竟是一些基础设施层面的建设,如果搞好了对后面的研发工作会有很大的效率提升.关于DevOps本身的概念,网上已经非常多了,在园子里随便搜索一些都 ...
- 【Offer】[28] 【对称的二叉树】
题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 请实现一个函数,用来判断一-棵二叉树是不是对称的.如果一棵二叉树和它的镜像一样,那么它是对称的.  牛客网刷题地址 思路分析 利用前序 ...
- JWT与Session的比较
如今,越来越多的项目开始采用JWT作为认证授权机制,那么它和之前的Session究竟有什么区别呢?今天就让我们来了解一下. JWT是什么 定义 JSON Web Token(JWT)是一个开放标准(R ...
- Spring boot运行原理-自定义自动配置类
在前面SpringBoot的文章中介绍了SpringBoot的基本配置,今天我们将给大家讲一讲SpringBoot的运行原理,然后根据原理我们自定义一个starter pom. 本章对于后续继续学习S ...
- SQL查询出距当前时间最近的一条或多条记录。
select * from bas_dredge,(SELECT C_ENTERPRISEID,MAX(D_UTIME) D_LTIME FROM BAS_DREDGE GROUP BY C_ENTE ...
- Unity3D_10_文件夹目录架构
一:几个特殊文件夹介绍 1.Editor Editor文件夹可以在根目录下,也可以在子目录里,只要名子叫Editor就可以.比如目录:/xxx/xxx/Editor 和 /Editor 是一样的,无论 ...