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. python函数篇0-2

    函数的有三中不同的参数: 普通参数 默认参数 动态参数# ######### 定义函数 ######### # name 叫做函数func的形式参数,简称:形参def func(name):    p ...

  2. intelliJ idea安装go开发环境 并 搭建go项目 打包

    本人使用的是 idea 开发go项目  也是一个初学者  将自己遇到的问题记录分享 在晚上查找了很多资料  没有什么可以直接使用  本人再次整理一下 我使用的idea 时 2017.2.6 版本的 查 ...

  3. .Net高级工程师面试题

    ----------高级开发工程师岗位职责: 1.完成平台系统新功能模块开发,维护现有产品,独立地设计.开发.实现和测试关键系统: 2.负责公司项目核心代码的编写: 3.根据产品需求进行业务功能的开发 ...

  4. Eclipse怎么改变@author 姓名

    1 点击windows  然后选择 点击进去选择搜索code Templates  点击选择出现下面的页面 点开comments,里面有给方法,变量 ,类等加注释设置的模板 如:点击Methods  ...

  5. C++内存分配和分区

    1.分配方式 静态分配: 静态区(全局区),分配全局变量.静态变量优先于main函数. 动态分配: (1)自动分配:栈区(2)手动分配:堆区,(malloc,free) (new,delete) 2. ...

  6. luogu P4688 [Ynoi2016]掉进兔子洞

    luogu 我们要求的答案应该是三个区间长度\(-3*\)在三个区间中都出现过的数个数 先考虑数列中没有相同的数怎么做,那就是对三个区间求交,然后交集大小就是要求的那个个数.现在有相同的数,考虑给区间 ...

  7. Nginx作为静态资源web服务之跨域访问

    Nginx作为静态资源web服务之跨域访问 首先了解一下什么是跨域 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器施加的安全限制. 所谓同源是指,域名,协议,端口均相 ...

  8. 当在terminal中输入一行命令的时候，查找的顺序如何看

    大多数时候,尤其是安装了anaconda的时候,我们常常会知道,实际上因为conda的环境变量写到了该用户下的.bashrc下面,所以在terminial敲如python的时候,会显示conda的py ...

  9. OGG学习笔记03

    OGG学习笔记03-单向复制简单故障处理 环境:参考:OGG学习笔记02-单向复制配置实例实验目的:了解OGG简单故障的基本处理思路. 1. 故障现象故障现象:启动OGG源端的extract进程,da ...

  10. C++虚函数和纯虚函数的用法和区别

    C++虚函数与纯虚函数用法与区别(转)   1. 虚函数和纯虚函数可以定义在同一个类(class)中,含有纯虚函数的类被称为抽象类(abstract class),而只含有虚函数的类(class)不能 ...