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. TCP的组包、半包、粘包与分包

    一.概念 1)组包.简单的说就是tcp协议把过大的数据包分成了几个小的包传输,接收方要把同一组的数据包重新组合成一个完整的数据包. 2)半包.指接受方没有接受到一个完整的包,只接受了部分,这种情况主要 ...

  2. PAT A1065 A+B and C (64bit) (20 分)

    AC代码 #include <cstdio> int main() { #ifdef ONLINE_JUDGE #else freopen("1.txt", " ...

  3. 虚拟机(Vmware)安装ubuntu18.04和配置调整（三）

    三.ubuntu安装软件     1.安装常用软件 python程序员: $ sudo apt install ipython $ sudo apt install ipython3 $ sudo a ...

  4. 怎样获取NodeList某位置上的节点

    1. 使用类似 Array 的中括号写法: document.body.childNodes[0] 2. 使用 NodeList.prototype.item(): document.body.chi ...

  5. 使用Enablebuffering多次读取Asp Net Core 请求体

    使用Enablebuffering多次读取Asp Net Core 请求体 1 .Net Core 2.X时代 使用EnableRewind倒带 public IActionResult Index( ...

  6. c# 是如何对一个可遍历对象实现遍历的

    public class Persons:IEnumerable { public Persons(string[] people) { this.people = people; } public ...

  7. 搭建自己的框架WedeNet（四）

    WedeNet2018.Web-UI层:结构如下: 首先,在Controller中定义BaseController,以便加入统一处理逻辑,如下: using log4net; using System ...

  8. [转载]深入理解maven构建生命周期和各种plugin插件

    我就不复制博主文章了,到原文地址看吧.写这个只是为了自己搜索起来方便些: https://blog.csdn.net/zhaojianting/article/details/80321488 htt ...

  9. mqtt协议实现 java服务端推送功能（一）安装

    最近有个新需求,需要通过java服务端把信息推送到mqtt服务器上,安卓和ios端从mqtt服务器上获取信息实现推送. 1. 本地需要安装Mosquitto服务器  http://mosquitto. ...

  10. input 禁止输入特殊字符

    方式一:拿到value值以后 在你传递之前处理 function stripscript(value) { var pattern = new RegExp("[`~!@#$^&*( ...