了解一下，其它的什么SASS,COMPASS,WEBPACK,VUE.JS都看看，了解一下前端开发的一些知识点吧。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" dir="ltr">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <script src="vue.js"></script>
  </head>
  <body>
      <div id="app">
          {{ message }}
      </div>
      <div id="app-2">
          <span v-bind:title="message">
              Hover your mouse over me for a few seconds to see my dynamically bound title!
          </span>
      </div>
      <div id="app-3">
          <p v-if="seen"> Now you see me</p>
      </div>
      <div id="app-4">
          <ol>
              <li v-for="todo in todos">
                  {{ todo.text }}
              </li>
          </ol>
      </div>
      <div id="app-5">
          <p> {{ message }} </p>
          <button v-on:click="reverseMessage">Reverse Message</button>
      </div>
      <div id="app-6">
          <p> {{message}}</p>
          <input v-model="message">
      </div>
      <div id="app-7">
          <ol>
              <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
          </ol>
      </div>

        <script type="text/javascript">
            var app = new Vue({
                el: '#app',
                data: {
                        message: 'Hello Vue!'
                }
            });

            var app2 = new Vue({
                el: '#app-2',
                data: {
                    message: 'You loaded this page on ' + new Date()
                }
            });
            var app3 = new Vue({
                el: '#app-3',
                data: {
                    seen: true
                }
            });
            var app4 = new Vue({
                el: '#app-4',
                data: {
                    todos: [
                        {text: 'Learn JavaScript' },
                        {text: 'Learn Vue' },
                        {text: 'Build something awesome' }
                    ]
                }
            });
            var app5 = new Vue({
                el: '#app-5',
                data: {
                    message: 'Hello Vue.js!'
                },
                methods: {
                    reverseMessage: function() {
                        this.message = this.message.split('').reverse().join('')
                    }
                }
            });
            var app6 = new Vue({
                el: '#app-6',
                data: {
                    message: 'Hello Vue!'
                }
            });
            Vue.component('todo-item', {
                props: ['todo'],
                template: '<li>{{ todo.text }}</li>'
            });

            var app7 = new Vue({
                el: '#app-7',
                data: {
                    groceryList: [
                        { text: 'Vegetables' },
                        { text: 'Cheese' },
                        { text: 'Wahtever else human eat'}
                    ]
                }
            });

        </script>
    </body>
</html>

Vue.js介绍样码的更多相关文章

  1. 从vue.js的源码分析，input和textarea上的v-model指令到底做了什么

    v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能:对,它本质上只是一个语法糖,但到底是一个 ...

  2. Vue.js介绍

    http://www.cnblogs.com/keepfool/p/5619070.html Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思 ...

  3. 1. vue.js介绍

    1. 什么是vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助 ...

  4. 深入Vue.js从源码开始(二)

    从入口开始 我们之前提到过 Vue.js 构建过程,在 web 应用下,我们来分析 Runtime + Compiler 构建出来的 Vue.js,它的入口是 src/platforms/web/en ...

  5. Vue.js 从源码理解v-for和v-if的优先级的高低

    在vue.js里面,v-for和v-if是可以一起使用作用在某个元素上,网上看到一篇文章说永远不要把v-for和v-if同时用在同一个元素上,感觉有点瞎扯,官网也注明了可以一起使用的,还把两个指令的优 ...

  6. vue.js 二维码生成组件

    安装 通过NPM安装 npm install vue-qart --save 插件应用 将vue-qart引入你的应用 import VueQArt from 'vue-qart' new Vue({ ...

  7. 一、Vue.js介绍

    一.介绍 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手 ...

  8. Vue.js 介绍入门

    Vue.js 的目标 是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.Vue.js 是一个用于创建 Web 交互界面的库.它让你通过简单而灵活的 API 创建由数据驱动的 UI 组件. ...

  9. vue.js介绍，常用指令，事件，以及制作简易留言版

    一.vue是什么? 一个mvvm框架(库).和angular类似,比较容易上手.小巧,让我们的代码更加专注于业务逻辑,而不是去关注DOM操作 二.vue和angular之间的区别 vue--简单易学 ...

随机推荐

  1. 怎么把电脑的word,txt,pdf等文件拷贝到iPhone手机上

    之前都是用的qq什么的传文件,电脑发送到qq上.今天尝试了一下用itunes把电脑上的文件夹弄到iPhone上. 1.首先,打开电脑的偏好设置,找到共享如图: 打开它,勾选文件共享. 2.把手机和电脑 ...

  2. TF-IDF算法学习报告

    TF-IDF是一种统计方法,这个算法在我们项目提取关键词的模块需要被用到,TF-IDF算法是用来估计 一个词汇对于一个文件集中一份文件的重要程度.从算法的定义中就可以看到,这个算法的有效实现是依靠 一 ...

  3. UNIX下的LD_PRELOAD环境变量

    UNIX下的LD_PRELOAD环境变量 也许这个话题并不新鲜,因为LD_PRELOAD所产生的问题由来已久.不过,在这里,我还是想讨论一下这个环境变量.因为这个环境变量所带来的安全问题非常严重,值得 ...

  4. JavaScript 中 Number()、parseInt()、parseFloat()的区别

    Number(): 概述:Number 对象由 Number() 构造器创建,是经过封装的能让你处理数字值的对象.在非构造器上下文中 (如:没有 new 操作符),Number 能被用来执行类型转换. ...

  5. Fedora20-32bit cross-compiling arm-linux-gcc4.3.2

    目录 0 前言 1 安装arm-linux-gcc-4.3.2 2 配置 nfs 服务器 0 前言 之前在 fedora 64bit 上建立交叉编译,但由于4.4.3版本需要另装用于gdb-serve ...

  6. 5. web前端开发分享-css,js深化篇

    一. css练习网易专题: 1. http://news.163.com/ 新闻 跟腾讯的新闻版式大体没有大的变化,只是细节. 2. http://news.163.com/photo/#Curren ...

  7. float-position的一些细节

      一 综述: float position 对于div布局的作用明显, 注意使用的细节也变得有必要了.  float position 有相同的地方,都会脱离"文档流"(posi ...

  8. 关于JS事件的几点总结

    1.理解事件(2点) 事件行为本身:没有给事件绑定方法事件也是一直存在的,当触发行为的时候,也对触发对应的行为,只不过由于没有绑定事件,导致没有任何事件发生: 事件绑定:给元素绑定一个方法:触发行为, ...

  9. HDU 1690 Bus System

    题目大意:给出若干巴士不同价格的票的乘坐距离范围,现在有N个站点,有M次询问,查询任意两个站点的最小花费 解析:由于是多次查询不同站点的最小花费,所以用弗洛伊德求解 时间复杂度(O^3) 比较基础的弗 ...

  10. Java基本数据类型总结

    基本类型,或者叫做内置类型,是JAVA中不同于类的特殊类型.它们是我们编程中使用最频繁的类型.java是一种强类型语言,第一次申明变量必须说明数据类型,第一次变量赋值称为变量的初始化. 1. Java ...