<!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. linux redhat 安装了jdk检查版本不是自己安装的版本的解决办法

    Linux下安装jdk java -version 不是自己所需要的版本 设置环境变量,这是最重要的 在etc/profile文件下添加 export JAVA_HOME=/usr/java/jdk1 ...

  2. 使用vscode快速建立vue模板

    当我们希望每次新建.vue文件后,vscode能够根据配置,自动生成我们想要的内容. 打开vscode编辑器,依次选择“文件 -> 首选项 -> 用户代码片段”,此时,会弹出一个搜索框,我 ...

  3. 教你阅读 Cpython 的源码（一）

    目录 第一部分-介绍 Cpython 源代码中有什么? 如何编译 Cpython 代码 编译器能做什么? 为什么 Cpython 是用 C 语言而是 Python 编写的? Python 语言的规范 ...

  4. node.js 简易聊天室

    效果图 首先开启server.js 打开服务器端,然后打开client.js,注册用户.打开一个注册一个用户,打开三个,注册三个用户. 接下来,小王发布一个广播消息,小李和小刘都收到了此消息. 接下来 ...

  5. C++ vector 比较大小

    写在前: vector 是可以直接 进行比较. vector 默认提供的   operator< 内使用了  std::lexicographical_compare  进行比较, operat ...

  6. Navicat Premium 12安装与激活（亲测已成功激活）

    说明:博主所提供的激活文件理论支持Navicat Premium 12.0.16 - 12.0.24简体中文64位,但已测试的版本为Navicat Premium 12.0.22.12.0.23和12 ...

  7. 微信小程序之分享功能

    说到分享 大家都会想到手机右上角点击不就分享了么?对的没错,那样是分享转发的是小程序  而不是指定的某个页面,所以自己动手丰衣足食,自己写一个转发功能被, 其实也没那么可怕,主要参考的是微信小程序AP ...

  8. API 设计 POSIX File API

    小结: 1. https://mp.weixin.qq.com/s/qWrSyzJ54YEw8sLCxAEKlA API 设计最佳实践的思考 谷朴 阿里技术 昨天   阿里妹导读:API 是模块或者子 ...

  9. Ionic4.x 中的button

    官方文档:https://ionicframework.com/docs/api/button 1.ion-button 组件可以定义一个按钮 <ion-button>Default< ...

  10. PHP松散比较与严格比较的区别详解

    在PHP中相等的比较有两种,松散比较和严格比较,当使用松散比较时,如果进行比较的两个操作数类型不同,那么会对操作数进行适当的类型转换,如果转换后的值相同则认为两个操作数相等.而使用严格比较时,如果两个 ...