<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <style type="text/css">
  </style>
  <title></title>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
new Vue({
  el: '#app',
  data: {
    newTodo: '',
    todos: [
      { text: 'Add some todos' }
    ]
  },
  methods: {
    addTodo: function () {
      var text = this.newTodo.trim()
      if (text) {
        this.todos.push({ text: text })
        this.newTodo = ''
      }
    },
    removeTodo: function (index) {
      )
    }
  }
})
}//]]>
</script>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<div id="app">
  <input v-model="newTodo" v-on:keyup.enter="addTodo">
  <ul>
    <li v-for="todo in todos">
      <span>{{ todo.text }}</span>
      <button v-on:click="removeTodo($index)">X</button>
    </li>
  </ul>
</div>
</body>
</html>

参考：

http://www.runoob.com/w3cnote/vue-js-quickstart.html

vue+webpack:

https://segmentfault.com/a/1190000004690338

http://guowenfh.github.io/2016/03/24/vue-webpack-02-deploy/

https://segmentfault.com/a/1190000005363030

vue简单使用的更多相关文章

  1. Vue简单基础 + 实例 及 组件通信

    vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...

  2. vue简单实现

    vue简单实现 vue的三个核心 虚拟dom, 双向绑定 Proxy,

  3. html vue简单

    1.Vue 简单的替换更新 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  4. 一篇文章带你了解网页框架——Vue简单入门

    一篇文章带你了解网页框架--Vue简单入门 这篇文章将会介绍我们前端入门级别的框架--Vue的简单使用 如果你以后想从事后端程序员,又想要稍微了解前端框架知识,那么这篇文章或许可以给你带来帮助 温馨提 ...

  5. vue初学实践之路——vue简单日历组件(1)

    ---恢复内容开始--- 最近做的项目有一个需求,需要有一个日历组件供预定功能使用,之前的代码过于繁琐复杂,所以我采用vue重写了这个组件. npm.vue等等安装. 只是一个简单的日历组件,所以并不 ...

  6. 极速搭建RTMP直播流服务器+webapp (vue) 简单实现直播效果

    在尝试使用webRTC实现webapp直播失败后,转移思路开始另外寻找可行的解决方案.在网页上尝试使用webRTC实现视频的直播与看直播,在谷歌浏览器以及safari浏览器上测试是可行的.但是基于基座 ...

  7. vue（2）—— vue简单语法运用，常用指令集

    按照前面的文章:vue(1)——node.js安装使用,利用npm安装vue  安装完vue之后,就可以使用vue了 vue vue简介 前面安装好vue之后,确实还没有对vue进行介绍,首先,官网: ...

  8. vue简单介绍

    最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在 ...

  9. vue简单demo

    为了学习基础语法,我并没有用vue-cli脚手架来vue init [基于什么类型]  [项目名称]初始化项目,而是直接<script>../vue.js</script> & ...

  10. parcel vue 简单使用

    1.安装依赖 yarn global add parcel-bundler yarn add babel-preset-env --dev yarn add parcel-plugin-vue --d ...

随机推荐

  1. Selenium+python 配置

    1. 安装python, www.python.org. 下载最新的python,应该是32位的.注意配置环境变量. 2. 安装PIP(pip是一个以Python计算机程序语言写成的软件包管理系统). ...

  2. Java 创建文件夹和文件，字符串写入文件，读取文件

    两个函数如下: TextToFile(..)函数:将字符串写入给定文本文件: createDir(..)函数:创建一个文件夹,有判别是否存在的功能. public void TextToFile(fi ...

  3. Java Web学习笔记---用GET实现搜索引擎

    今天做了一个实验,关于Servlet的.使用GET实现搜索引擎.因自己没有搜索引擎数据库,所以使用了Yahoo提供的Search API. 浏览效果如下图: 现在雅虎推出了新的Search API-- ...

  4. [Android]学习笔记Activity_001

    操作button的说明 设置button的ID: android:id="@+id/button" 设置button的点击事件 findViewById(R.id.button). ...

  5. 逐行扫描型Memory LCD显存管理与emWin移植

    因为Memory LCD 的特性,不能设置像素坐标,只能用缓存整体刷新. 所以对于Memory LCD来说,emWin移植仅与打点函数有关,这里用Sharp Memory LCD(ls013b7dh0 ...

  6. shc

    A tool  for encrytion of bash shell scripts . Install: wget http://www.datsi.fi.upm.es/~frosal/sourc ...

  7. 面向对象编程（OOP）

    什么是面向对象编程,对于面向对象编程与面向过程编程的解释随处可见,个人认为对面向对象编程解释最好的一个定义是:依赖倒转原则是面向对象编程的标志,面向对象编程是一种思想,无论使用哪一种编程语言,如果在编 ...

  8. 动态令牌-(OTP,HOTP,TOTP)-基本原理

    名词解释和基本介绍 OTP 是 One-Time Password的简写,表示一次性密码. HOTP 是HMAC-based One-Time Password的简写,表示基于HMAC算法加密的一次性 ...

  9. 增量式PID推导及C语言实现

    PID控制器表达式为: \[ u(t) = K_pe(t) + K_i\int_0^t e(\tau)d\tau + K_d\frac{de(t)}{dt} \] 离散化: 令 $ t = nT,~T ...

  10. word20161216

    object / 对象 object identifier / 对象标识符 offline / 脱机  OLE on-disk catalog / 磁盘目录 on-media catalog / 媒体 ...