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. idea配置glassFish

    FIile ---> settings ---> 查找Application Server .. 点击加号,, 点击glassFish Server.. 找到glassFish存放路径 点 ...

  2. strCmd.Format("delete FROM userTable where name = '%s'", name);

    string.Format("select * from 数据库表 where 用户名='%s' and 密码='%s' ",m_1,m_2); 把[m_1]和[m_2]的值按照[ ...

  3. 方格取数--状压DP or 网络流

    题意:http://acm.hdu.edu.cn/showproblem.php?pid=1565 取不相邻的点是权值最大. 这题可以网络流做,暂时先DP一下,网络流明天学一下~~ #define I ...

  4. Elastic Search中Query String常见语法

    1 搜索所有数据timeout参数:是超时时长定义.代表每个节点上的每个shard执行搜索时最多耗时多久.不会影响响应的正常返回.只会影响返回响应中的数据数量.如:索引a中,有10亿数据.存储在5个s ...

  5. 区间dp 括号匹配问题

    这道题目能用区间dp来解决,是因为一个大区间的括号匹配数是可以由小区间最优化选取得到(也就是满足最优子结构) 然后构造dp 既然是区间类型的dp 一般用二维 我们定义dp[i][j] 表示i~j这个区 ...

  6. Specialization For SCCM

    JUST A LINK FOR ALL SCCM QUESTION http://eskonr.com/

  7. WPF 键盘事件

    private void Window_KeyDown(object sender, KeyEventArgs e) { if (e.KeyStates==Keyboard.GetKeyStates( ...

  8. rabbitmq 连接报错 An unexpected connection driver error occured

    转自:https://blog.csdn.net/zht741322694/article/details/82801873 在服务器上安装了一个RabbitMq,并新创建了一个用户授予了管理员角色, ...

  9. Spring面试题整理

    1.https://blog.csdn.net/a745233700/article/details/80959716 2.https://ifeve.com/spring-interview-que ...

  10. 《python解释器源码剖析》第3章--python中的str对象

    3.0 序 我们知道python中的字符串属于变长对象,当然和int也是一样,底层的结构体实例所维护的数据的长度,在对象没有定义的时候是不知道的.当然如果是python2的话,底层PyIntObjec ...