新建一个hello.html文件，输入以下内容：

<html>

<head>

    <title></title>

    <script src="https://unpkg.com/vue"></script>

</head>

<body>

    <p id="app">

      {{ message }}

    </p>

    <script type="text/javascript">

        var app = new Vue({

        el: '#app',    //这是element

        data: {

             message: 'Hello Vue!'

            }

        })

    </script>

</body>

</html>

打开后就是Hello Vue!。

打开控制台，输入app.message = "Hello world!"，那么页面就会动态变化成Hello world!。

使用Chrome浏览器。

<div id="app">

    <p>{{ message }}</p>

    <input type="text" v-model="message"/>

</div>

修改代码，在input里写字，<p>的内容会跟着变。

一个单js文件也可以运行vue的更多相关文章

  1. grunt-contrib-watch 监控 JS 文件改变来运行预定义的Tasks

    依赖于 GruntJs ~0.4.0 监控 JS 文件改变来运行预定义的Tasks Demo: watch: { scripts: { files: ['src/**/*.js'], tasks: [ ...

  2. JSFinder：一个在js文件中提取URL和子域名的脚本

    JSFinder介绍 JSFinder是一款用作快速在网站的js文件中提取URL,子域名的脚本工具. 支持用法 简单爬取 深度爬取 批量指定URL/指定JS 其他参数 以往我们子域名多数使用爆破或DN ...

  3. thinkPHP为什么设置一个单入口文件？

    TP3.2的具体解释: ThinkPHP采用单一入口模式进行项目部署和访问,无论完成什么功能,一个应用都有一个统一(但不一定是唯一)的入口. 应该说,所有应用都是从入口文件开始的,并且不同应用的入口文 ...

  4. 一个日期Js文件。 2013年10月12日 星期六 癸巳年九月初八

    1.简单用法 <div align="center">  <SCRIPT language=JavaScript src="js/calendar.js ...

  5. vue/cli项目添加外部js文件的一个方法

    有一个util.js文件,内容如下 function Util () { ... } export default new Util() 可以在main.js里面通过import引入js import ...

  6. vue引入自己写的js文件

    话不多说,直接上代码呀~ 先来个结构图: 中规中矩的vue-cli就写了一个自己的js文件 那么我想要引入到vue组件里. 1.首先写我的js文件 2.引入到vue组件!!!一定要用{}把方法名拿过来 ...

  7. vue 调用常量的config.js文件

    我遇到问题,就是有很多常量需要应用的项目里面.所以需要打算设置一个config.js文件 1.填写config.js 文件 //常量配置 //快递公司名单 对应的页面为: src/pages/othe ...

  8. Vue在单独引入js文件中使用ElementUI的组件

    Vue在单独引入js文件中使用ElementUI的组件 问题场景: 我想在vue中的js文件中使用elementUI中的组件,因为我在main.js中引入了element包和它的css,并挂载到了全局 ...

  9. Js文件函数中调用另一个Js文件函数的方法

    在项目中Js文件需要完成某一功能,但这一功能的大部分代码在另外一个Js文件已经完成,只需要调用这个文件实现功能.那么如何调用:一个Js文件函数中调用另一个Js文件函数的方法? (直接代码说明) 示例d ...

随机推荐

  1. protocol buffer开发指南（官方）

    欢迎来到protocol buffer的开发者指南文档,一种语言无关.平台无关.扩展性好的用于通信协议.数据存储的结构化数据序列化方法. 本文档是面向计划将protocol buffer使用的到自己的 ...

  2. linux bin & sbin different

    linux bin & sbin different flutter & $PATH http://blog.taylormcgann.com/2014/04/11/differenc ...

  3. loadrunner基础学习笔记三

    运行时设置: 打开运行时设置:任务窗格中-选择回放-点击运行时设置按钮  1 重复执行次数:=2 2 步:控制迭代时间间隔 3 日志设置:指出要在运行测试期间记录的信息量 4 思考时间:可以在cont ...

  4. cxf Webservice 使用httpClient 调用

    package com.wistron.wh.swpc.portal.uitl; import java.io.BufferedInputStream;import java.io.File;impo ...

  5. BZOJ3876 AHOI/JSOI2014支线剧情（上下界网络流）

    原图所有边下界设为1上界设为inf花费为时间,那么显然就是一个上下界最小费用流了.做法与可行流类似. 因为每次选的都是最短路增广,且显然不会有负权增广路,所以所求出来的可行流的费用就是最小的. #in ...

  6. mvc Filters 过滤器

    项目需要控制controller和action的访问权限. 看了下资料,发觉还是很方便的. 首先在mvc项目下创建一个文件夹 Filters, 然后在Filters中创建一个类.代码如下 namesp ...

  7. Django前端获取后端数据之前端自定义函数

    在写网站的时候遇到了一个问题: Django在后端向前端传数据时,多数会使用dict字典来传送多个数据,但前端只能遍历,没有一个用key取到value值的方法可以直接使用 如果作为一个list传递到前 ...

  8. day11 匿名函数

    格式 lambda 形参 :逻辑运算方式 lambda x:x+1 普通的方式计算 卧槽.这么长! def calc(x): return x+1 res = calc(10) print(res) ...

  9. py3+urllib+re，爬虫下载捧腹网图片

    实现原理及思路请参考我的另外几篇爬虫实践博客 py3+urllib+bs4+反爬,20+行代码教你爬取豆瓣妹子图:http://www.cnblogs.com/UncleYong/p/6892688. ...

  10. Java核心技术-具体的集合

    除了Map结尾的类之外,其他都实现了Collection接口,而以Map结尾的类实现了Map接口. 链表 在Java程序设计语言中,所有链表实际上都是双向链表的(double linked)--即每个 ...