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 ...
随机推荐
- This probably means that Tcl wasn't installed properly.
报错 D:/Anaconda3/tcl/tcl8.6/init.tcl: version conflict for package "Tcl": have 8.6.8, need ...
- 证书pfx转jks
keytool -importkeystore -srckeystore 2756649_order.hanels-home.com.pfx -srcstoretype pkcs12 -destke ...
- LuoGu-P1239计数器-强大的贡献
P1239 计数器 题意:就是求从1到n间,1-9一共出现的次数 这道题直接暴力是不科学的,因为N有 1e9: 然后我就看到了一个很好的从贡献思考的方法: ——>转自洛谷学神的方法: 楼下dal ...
- Codeforces 919D Substring (拓扑排序+树形dp)
题目:Substring 题意:给你一个有向图, 一共有n个节点 , m条变, 一条路上的价值为这个路上出现过的某个字符最多出现次数, 现求这个最大价值, 如果价值可以无限大就输出-1. 题解:当这个 ...
- 牛客多校第五场 F take 期望转化成单独事件概率（模板） 树状数组
链接:https://www.nowcoder.com/acm/contest/143/F来源:牛客网 Kanade has n boxes , the i-th box has p[i] proba ...
- codeforces 768 B. Code For 1（二分）
题目链接:http://codeforces.com/contest/768/problem/B 题意:给你一个数n和区间l,r,每次都能把任意数拆成n/2,n%2,n/2三个数,直到变成0和1,问区 ...
- Webstorm 的设置
背景色
- 【Offer】[60] 【n个骰子的点数】
题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 把n个骰子扔在地上,所有骰子朝上一面的点数之和为S.输入n,打印出s的所有可能的值出现的概率. [牛客网刷题地址]无 思路分析 递归的方 ...
- linux部署html代码到linux服务器，并进行域名解析
本博客主要是说一下,如何将本地写好的html代码部署到linux服务器,并进行解析.下一篇博客将写一下,如何将html代码部署到阿里云服务器,并进行域名解析,以及在部署过程中遇到的问题和解决方法. 1 ...
- 2018阿里-研发工程师JAVA Software Engineer, Java
岗位描述Job Description如果你想了解JAVA开发在阿里巴巴互联网生态系统中无与伦比的应用广度与深度: 如果你对基础技术感兴趣,你可以参与基础软件的设计.开发和维护,如分布式文件系统.缓存 ...