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. 链表操作Java实现

    单链表 存储结构 public class ListNode { int i; ListNode next; ListNode(int i) { this.i = i; } public String ...

  2. 怎么将本地项目放到码云(gitee)上面？图文详解

    git的好处什么的,在此就不多赘述.现在很多公司都在用git了. 那么怎么将本地已经有的项目放到码云(gitee)上呢? 前置条件说明: 1:原来项目所在位置:D:\workspace01\class ...

  3. java 模拟http请求，通过流（stream）的方式,发送json数据和文件

    发送端: /** * 以流的方式 * 发送文件和json对象 * * @return */ public static String doPostFileStreamAndJsonObj(String ...

  4. PDO简单的DB类封装

    <?php class DB{ private $dbs = ""; private $fields = "*"; private $tables = n ...

  5. 怎样在 Vue 里面使用自定义事件将子组件的数据传回给父组件?

    首先, Vue 里面的组件之间的数据流动是 单向 的, 数据可以从父组件传递给子组件, 但不能从子组件传递给父组件, 因为组件和组件之间是 隔离 的. 就像两个嵌套的 黑盒子 . 能通过 props ...

  6. feign发送get请求时用复杂类传参

    如题,网上都有做法,只有有些人说的不清楚.而我自己也遇到了其他坑这里记录一下 1.就是网上说的做法: 客户端:application.yml加上配置: feign: httpclient: enabl ...

  7. HTML——form表单中常用标签 form input (text hidden password radio checkbox reset submit ) select(option)总结

    <form action="" method="get"> <!-- placeholder="请输入文本" 显示提示 r ...

  8. sequelize学习笔记

    示例: const Sequelize = require('sequelize'); // 建立连接 const sequelize = new Sequelize('test', 'root', ...

  9. Win32 编程

    1.ShowWindow(SW_SHOWNORMAL)  参数 : SW_HIDE激活另外一个窗口,当前窗口就跑到那个窗口后面了SW_MAXIMIZE显示的窗口是最大化的SW_MINIMIZE显示的窗 ...

  10. docker之常见错误

    1. docker run -d --name showdoc -p 4999:80 -v /showdoc_data/html:/var/www/html/ star7th/showdoc WARN ...