了解一下，其它的什么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. Dell R730 配置完RAID后装系统找不到硬盘。

    1. 各硬盘只是灯都正常.硬件无故障. 2. 8个600G硬盘做的RAID0和RAID5后都在装系统选盘处找不到硬盘.(注意: 第一次做raid 时,没有进行初始化init.后补做也无效,一直复现这个 ...

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

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

  3. Pivot Table

    1. Disable menu 'Disable show/hide Field list menu sht.PivotTables().EnableFieldList = False ''scrip ...

  4. ReportView报表开发记录（一）

    在公司开发,使用到ReportView技术,写下自己的经验. 1.在工具箱中找到 ReportViewer,ScriptManager放到test.aspx页面. 如果找不到报表项,请参考http:/ ...

  5. 一个简单实用的css loading图标

    摘要 在web开发中,为了提高用户体验,在加载数据的时候都会给一个loading的提示. Html <!DOCTYPE html> <html xmlns="http:// ...

  6. 手持设备点击响应速度，鼠标事件与touch事件的那些事

    前言 现在一直在做移动端的开发,这次将单页应用的网页内嵌入了app,于是老大反映了一个问题:app应用点击响应慢!我开始不以为然,于是拿着网页版的试了试,好像确实有一定延迟,于是开始了研究,最后选择了 ...

  7. ACM之鸡血篇

    一匹黑马的诞生 故事还要从南京现场赛讲起,话说这次现场赛,各路ACM英雄豪杰齐聚南京,为争取亚洲总舵南京分舵舵主之职位,都使出了看 家本领,其中有最有实力的有京城两大帮清华帮,北大帮,南郡三大派上交派 ...

  8. (转载)解决GDI闪烁

    一般的windows 复杂的界面需要使用多层窗口而且要用贴图来美化,所以不可避免在窗口移动或者改变大小的时候出现闪烁. 先来谈谈闪烁产生的原因 原因一:如果熟悉显卡原理的话,调用GDI函数向屏幕输出的 ...

  9. sql查找去重复并且字段不为空的数据

    select distinct username,quantity  from Student where isnull(username,'')<>'' and p_id = {1}

  10. centos7 编译php56

    编译安装php5.6 centos7环境 步骤: //下载php5.6 wget http://cn2.php.net/distributions/php-5.6.26.tar.bz2 //安装依赖 ...