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 ...
随机推荐
- uva 796 C - Critical Links（tarjan求桥）
题目链接:https://vjudge.net/contest/67418#problem/C 题意:求出桥的个数并且按顺序输出 题解:所谓桥就是去掉这条边后连通块增加,套用一下模版就行. #incl ...
- R:ggplot2数据可视化——进阶(1)
,分为三个部分,此篇为Part1,推荐学习一些基础知识后阅读~ Part 1: Introduction to ggplot2, 覆盖构建简单图表并进行修饰的基础知识 Part 2: Customiz ...
- 除了FastJson,你还有选择: Gson简易指南
前言 这个周末被几个技术博主的同一篇公众号文章 fastjson又被发现漏洞,这次危害可导致服务瘫痪! 刷屏,离之前漏洞事件没多久,fastjson 又出现严重 Bug.目前项目中不少使用了 fast ...
- 062 Python必备库-从Web解析到网络空间
目录 一.概述 二.Python库之网络爬虫 2.1 Requests 2.2 Scrapy 2.3 pyspider 三.Python库之Web信息提取 3.1 Beautiful Soup 3.2 ...
- Android 图片处理之 Fresco
一.关于 Fresco github: https://github.com/facebook/fresco API: http://www.fresco-cn.org/javadoc/referen ...
- map转java对象
pom依赖: <dependency> <groupId>commons-beanutils</groupId> <artifactId>commons ...
- @classmethod @staticmethod 个人理解
官方解释 @classmethod 一个类方法把类自己作为第一个实参, 就像一个实例方法把实例自己作为第一个实参. 语法格式: class C: @classmethod def f(cls, arg ...
- ios 把数组对象转成json字符串存起来
1第一步是我们获取数据源 一般我们都是从接口请求数据 NSArray *subColumnsArray = nil; NSDictionary *dict = [NSJSONSerialization ...
- WordPress后台地址路径修改方法
用过WordPress后台的,其实都知道http://域名目录/wp-login.php就是登录地址,如果这时候使用暴力破解,很可能破解密码(这就有些想象力了),下面芝麻带你看看如何自定义美观的地址. ...
- vmware配置静态ip
wmware安装后,默认是动态ip地址. 在测试环境搭建虚拟机后,都需要使用静态ip地址.但是配置固定静态ip地址后,虚拟机总是不能上网和访问网站域名. 原来问题出在配置固定ip后配置的的网关和域名解 ...