<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<!--引入vue--> 

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

<style>
    .bg{color:red;}
</style>
</head>
<body>
<div id='app'>
    <div class="bg" v-bind:id='app1'>
        hello,word!
     </div>
     <div class='bg'>
         {{msg}}
        {{count}}
        {{count+1}}
      {{(count+1)*10}}
       <button type='button' v-on:click="submit()">计数 </button>
       <button type='button' @click="submit()">计数 </button>
    </div>
     <a v-bind:href="url"> 百度 </a>
     <a :href="url"> 百度 </a>
    <div v-html='template'></div>
</div>
    <script>
        new Vue ({
           el:"#app",
           data:{
              msg:"hello,vue!",
              app1:'test',
              count:0,
              template:'<div>hello,baidu</div>',
              url:"http://www.baidu.com",
           },
           methods:{
            submit:function(){
                this.count ++
            }
           }
        })
    </script>
</body>
</html>

第一个vue程序：hello,vlue的更多相关文章

  1. 第一个vue程序(极客时间Vue视频笔记)

    第一个vue程序 <body> <div class="app"> {{message}}--{{message+','+message}} <div ...

  2. 2.第一个Vue程序

    1.IDEA中安装Vue.js插件 2.建立项目以及html文件 1.创建一个 HTML 文件 2.引入 Vue.js <script src="https://cdn.jsdeliv ...

  3. Vue.js——2.第一个Vue程序

    代码 <div id="app"> <p>{{msg}}</p> </div> <script> let vm=new ...

  4. Vue（一）创建第一个Vue程序

    一.下载安装nodeJs 基于node.js,利用淘宝npm镜像安装相关依赖.由于国内使用npm会很慢,这里推荐使用淘宝NPM镜像 -- npm install -g cnpm --registry= ...

  5. 第一个vue程序

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

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

  7. 读懂源码：一步一步实现一个 Vue

    源码阅读:究竟怎样才算是读懂了? 市面上有很多源码分析的文章,就我看到的而言,基本的套路就是梳理流程,讲一讲每个模块的功能,整篇文章有一大半都是直接挂源码.我不禁怀疑,作者真的看懂了吗?为什么我看完后 ...

  8. Vue.js 学习笔记 第2章 数据绑定和第一个Vue应用

    本篇目录: 2.1 Vue实例与数据绑定 2.2 指令与事件 2.3 语法糖 学习任何一种框架,从一个Hello World应用开始是最快了解该框架特性的途径. 我们先从一段简单的HTML代码开始,感 ...

  9. vue-用Vue-cli从零开始搭建一个Vue项目

    Vue是近两年来比较火的一个前端框架(渐进式框架吧). Vue两大核心思想:组件化和数据驱动.组件化就是将一个整体合理拆分为一个一个小块(组件),组件可重复使用:数据驱动是前端的未来发展方向,释放了对 ...

随机推荐

  1. Java核心复习—— 原子性、有序性与Happens-Before

    一. 产生并发Bug的源头 可见性 缓存导致的可见性问题 原子性 线程切换带来的原子性问题 有序性 编译优化带来的有序性问题 上面讲到了 volatile 与可见性,本章再主要讲下原子性.有序性与Ha ...

  2. WebSocketSharp中WebSocket类

    websocket-sharp.clone, Version=1.0.2.39869 WebSocket由方法调用事件改为实例化委托调用,两种构造 1.构造函数 第一种 // // 摘要: // In ...

  3. Python 死循环

    while True: try: x=int(input("Please enter a number:")) break except ValueError: print(&qu ...

  4. c++ 套接字 --->2002 java NIO --->netty

    c++ 套接字 --->2002 java NIO --->netty

  5. Animator动画XML实现

    在res下创建文件夹animator文件夹 <?xml version="1.0" encoding="utf-8"?> <objectAni ...

  6. java-mybaits-013-mybatis-Interceptor-拦截器执行顺序

    一.概述 已知拦截器能够拦截四种类型:Executor.ParameterHandler.ResultSetHandler.StatementHandler. 1.1.不同类型拦截器的执行顺序 背景: ...

  7. osg 在场景中绘制坐标轴(xyz)

    //x y z font_size osg::Geode* makeCoordinate(float a_x,float a_y,float a_z,float font_size) { osg::r ...

  8. 123457123457#0#-----com.twoapp.FromPuzzle02--前拼后广--儿童农场拼图游戏jiemei

    com.twoapp.FromPuzzle02--前拼后广--儿童农场拼图游戏jiemei

  9. （七）Centos之链接命令

    一.链接命令:ln  (link) ln -s [源文件] [目标文件] 功能描述:生成链接文件 选项: -s 创建软链接 二.硬链接 硬链接特征: 1,拥有相同的i节点和存储block块,可以看作是 ...

  10. redis列表和有序集合

    redis中的list数据类型是可以插入重复数据的,有去重的需求的话可以用redis有序集合数据类型 Redis Zadd 命令用于将一个或多个成员元素及其分数值加入到有序集当中. 如果某个成员已经是 ...