1.使用vue
    下载vue.js；
    下载地址：https://vuejs.org/js/vue.min.js；打开链接后是一大堆js代码；ctrl+s保存即可；
    新建一个html，引入vue.js;
    在html中写js脚本，新建一个Vue实例，实例中必须指定元素id;
    将id引入到需要用到vue的html标签中；
代码：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>vue测试</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-html="title"></div>
        <button v-on:click="sayHello">点击问候</button>
    </div>
    
    <script type="text/javascript">
        var vm=new Vue({
            //元素id
            el:"#app",
            //变量数据
            data:{
                title:"<h2>welcome to Vue</h2>",
                name:"诸葛孔明"
            },
            //方法
            methods:{
                sayHello:function(){
                    alert("hello "+this.name);
                }
            }
        });
    </script>
</body>
</html>
结果：用浏览器打开新建的html文件

vue的简单使用的更多相关文章

  1. react构建淘票票webapp，及react与vue的简单比较。

    前言 前段时间使用vue2.0构建了淘票票页面,并写了一篇相关文章vue2.0构建淘票票webapp,得到了很多童鞋的支持,因此这些天又使用react重构了下这个项目,目的无他,只为了学习和共同进步! ...

  2. vue.js之生命周期，防止闪烁，计算属性的使用，vue实例简单方法和循环重复数据

    摘要:今天是比较糟糕的一天没怎么学习,原因是学校的wifi连不上了~~.今天学习一下vue的生命周期,如何防止闪烁(也就是用户看得到花括号),计算属性的使用,vue实例简单方法,以及当有重复数据时如何 ...

  3. Vue的简单入门

    Vue的简单入门 一.什么是Vue? vue.js也一个渐进式JavaScript框架,可以独立完成前后端分离式web项目 渐进式:vue可以从小到控制页面中的一个变量后到页面中一块内容再到整个页面, ...

  4. vue教程2-04 vue实例简单方法

    vue教程2-04 vue实例简单方法 vue实例简单方法: vm.$el -> 就是元素 vm.$data -> 就是data <!DOCTYPE html> <htm ...

  5. 沉淀，再出发：VUE的简单理解

    沉淀,再出发:VUE的简单理解 一.前言 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.Vue 只关注视图层,采用自底向上增量开发的设计.Vue 的目标是通过 ...

  6. vue实现简单在线聊天

    vue实现简单在线聊天 引用mui的ui库,ES6的 fetch做网络请求 //html <!DOCTYPE html> <html> <head> <met ...

  7. VUE实现简单的全选/全不选

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

  8. vue超简单加载字体方法,解决scss难加载字体的问题

    vue超简单加载字体方法,解决scss难加载字体的问题 scss在加载字体方面一直不太好用,需要繁杂的配置才能达到想要的效果,这里说一种非常简单的方法 在App.vue的style标签下引入字体文件后 ...

  9. Vue.js简单实践

    直接上代码,一个简单的新闻列表页面(.cshtml): @section CssSection{ <style> [v-cloak] { display: none; } </sty ...

  10. 用vue实现简单实时汇率计算功能

    最近在自己摸索vue的使用,因为相对于只是去看教程和实例,感觉不如自己动手写一个demo入门来的快.刚好看到小程序中有一个简单但是很精致的应用极简汇率,而且它的表现形式和vue的表现形式很像,于是想着 ...

随机推荐

  1. PAT A1077 Kuchiguse (20)

    晴神书中AC代码 #include <cstdio> #include <cstring> #include <iostream> using namespace ...

  2. 交替方向乘子法（ADMM）的原理和流程的白话总结

    交替方向乘子法(ADMM)的原理和流程的白话总结 2018年08月27日 14:26:42 qauchangqingwei 阅读数 19925更多 分类专栏: 图像处理   作者:大大大的v链接:ht ...

  3. Centos系统修改docker默认网络参数

    刚Yum装完发现是没有网上所说的/etc/default/docker文件的,自己vim后其实也是不生效的. 因为Docker的systemd启动脚本(/usr/lib/systemd/system/ ...

  4. Spring 基于 AspectJ 的 AOP 开发

    Spring 基于 AspectJ 的 AOP 开发 在 Spring 的 aop 代理方式中, AspectJ 才是主流. 1. AspectJ 简介 AspectJ 是一个基于 java 语言的 ...

  5. string库

    Lua字符串库小集 1. 基础字符串函数: 字符串库中有一些函数非常简单,如: 1). string.len(s) 返回字符串s的长度: 2). string.rep(s,n) 返回字符串s重复n次的 ...

  6. ZOOKEEPER进阶

    集群个数: 2n+1,因为集群当宕机大于等于二分之一的机子时,集群选举会失败.故 2n+1台机器和3n台机器可靠性相同 Leader的作用: 为了实现各个节点数据的一致性,需要一个负责协调数据同步的操 ...

  7. Java基础第四天--常用API

    常用API 基本类型包装类概述 将基本数据类型封装成对象的好处可以在对象中定义更多的功能方法操作该数据 常用的操作之一:用于基本数据类型与字符串之间的转换 基本数据类型 包装类 byte Byte s ...

  8. 初识JavaScript对象

    JavaScript对象语法.类型.属性 属性描述符(getOwnPropertyDescriptor().defineProperty()) [[Get]].[[Put]].Getter.Sette ...

  9. Django单元测试 相关知识

    前言 本文,旨在说明python Django如何编写单元测试,从“背景”,“测试要求”,“代码编写”,“如何运行”,“检验测试覆盖度” 这几个方面来说明附上django的官方文档单元测试章节=> ...

  10. RHEL7中配置本地YUM软件源

     1.创建目录,挂载光盘 [root@localhost ~]# mkdir /mnt/iso [root@localhost ~]# mount /dev/sr0  /mnt/iso mount: ...