1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title></title>
  6.     <style type="text/css">
  7.         [v-cloak]{/*网速比较慢可以用此命令隐藏msg*/
  8.             display: none;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13. <div id="app">
  14.     <p v-cloak>+++++{{msg}}-----</p><!--接受消息-->
  15.     <h4 v-text="msg">==========</h4><!--接受消息-->
  16.     <input type="button" value="点我啊" @click="btnHandler">
  17.     <input type="button" value="传送门" @click="ch">
  18.     <a href="http://www.baidu.com" @click.prevent="onclick">百度一下,不跳转</a><!--阻止自动跳转-->
  19.     <a href="http://www.baidu.com" @click="onclick1">百度一下,跳转</a>
  20. </div>
  21. <!--引入vue.js-->
  22. <script src="./WEB-INF/lib/vue.js"></script>
  23. <script>
  24. //创建Vue的实体
  25.     var vm=new Vue({
  26.         el:'#app',
  27.         data:{
  28.             msg: 'Hello Vue.js!'
  29.         },
  30. //方法的合集,都写在此处
  31.         methods:{
  32.             onclick1(){
  33.                 alert("直接跳了")
  34.             },
  35.             onclick(){
  36.               alert("阻止baidu的跳转")
  37.             },
  38.             ch(){
  39.                 alert("传送出来了")
  40.             },
  41.         btnHandler (){
  42.             alert("显示出来了")
  43.         }
  44.         }
  45.     })
  46. </script>
  47. </body>
  48. </html>

vue.js入门代码的更多相关文章

  1. Vue.js 入门指南

    1.Vue.js是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注 ...

  2. Vue.js入门（一）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta htt ...

  3. Vue.js 入门：从零开始做一个极简 To-Do 应用

    Vue.js 入门:从零开始做一个极简 To-Do 应用 写作时间:2019-12-10版本信息:Vue.js 2.6.10官网文档:https://cn.vuejs.org/ 前言  学习 Vue ...

  4. Vue.js 入门教程

    Vue.js 入门教程:https://cn.vuejs.org/v2/guide/index.html

  5. 免费的 Vue.js 入门与进阶视频教程

    这是我免费发布的高质量超清「Vue.js 入门与进阶视频教程」. 全网最好的.免费的 Vue.js 视频教程,课程基于 Vue.js 2.0,由浅入深,最后结合实际的项目进行了最棒的技术点讲解,此课程 ...

  6. Vue.js入门

    之前一直用的是jQuery,jQuery手动操作DOM导致性能不够好,因为DOM修改导致的页面重绘.重新排版!重新排版是用户阻塞的操作,同时,如果频繁重排,CPU使用率也会猛涨! Vue.js是数据驱 ...

  7. Vue.js 入门指南之“前传”（含sublime text 3 配置）

    题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴 ...

  8. 一个Java程序猿眼中的前后端分离以及Vue.js入门

    松哥的书里边,其实有涉及到 Vue,但是并没有详细说过,原因很简单,Vue 的资料都是中文的,把 Vue.js 官网的资料从头到尾浏览一遍该懂的基本就懂了,个人感觉这个是最好的 Vue.js 学习资料 ...

  9. [转]Vue.js 入门教程

    本文转自:http://www.runoob.com/w3cnote/vue-js-quickstart.html 什么是 Vue.js? Vue.js 是用于构建交互式的 Web  界面的库. Vu ...

随机推荐

  1. 【CF #541 D】 Gourmet choice

    link:https://codeforces.com/contest/1131 题意: 给定一些大小比较,输出排名. 思路: 这道题我用的是拓扑排序,又因为有等于号的存在,我用了并查集. 结束后这道 ...

  2. 杭电多校第九场 D Rikka with Stone-Paper-Scissors 数学

    Rikka with Stone-Paper-Scissors Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 524288/52428 ...

  3. 牛客小白月赛5 D 阶乘 数学

    链接:https://www.nowcoder.com/acm/contest/135/D来源:牛客网 题目描述 输入描述: 输入数据共一行,一个正整数n,意义如“问题描述”. 输出描述: 输出一行描 ...

  4. eql框架。

    在刚进入公司的时候,在service层的框架用的是eql,是公司内的大佬封装的,作为一个小白,真的是折磨.公司内没有任何的文档,只能靠着自己一步一步的摸索. 后来用习惯了,发现这个框架确实有自己的独到 ...

  5. Keras之注意力模型实现

    学习的一个github上的代码,分析了一下实现过程.代码下载链接:https://github.com/Choco31415/Attention_Network_With_Keras 代码的主要目标是 ...

  6. SQL Server2008 inner join多种方式的实践

    这些天的学习,才发现自己对SQL原来是如此的不了解.之前一直以为自己轻松应对各种复杂的SQL查询,但是一旦提到效率上,可能就比较傻眼了,有时候也会埋怨客户的服务器不好使. 至于Inner Join的三 ...

  7. 【LeetCode】5# 最长回文子串

    题目描述 给定一个字符串 s,找到 s 中最长的回文子串.你可以假设 s 的最大长度为 1000. 示例 1: 输入: "babad" 输出: "bab" 注意 ...

  8. 008 Python基本语法元素小结

    目录 一.概要 二.保留字 三.温度转换 一.概要 缩进.注释.命名.变量.保留字 数据类型.字符串. 整数.浮点数.列表 赋值语句.分支语句.函数 input().print().eval(). p ...

  9. 史上最全Docker环境安装指南-让安装docker简单到爆

    一.思考❓❔ 1.什么是Docker? 装应用的容器 开发.测试.运维都偏爱的容器化技术 轻量级 扩展性 一次构建.多次分享.随处运行 2.安装Docker难不难? So easy! 此文看过之后,读 ...

  10. Python网络爬虫实战(二)数据解析

    上一篇说完了如何爬取一个网页,以及爬取中可能遇到的几个问题.那么接下来我们就需要对已经爬取下来的网页进行解析,从中提取出我们想要的数据. 根据爬取下来的数据,我们需要写不同的解析方式,最常见的一般都是 ...