了解一下，其它的什么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. CMake

    使用CMake编译跨平台静态库 http://www.tuicool.com/articles/3uu2Yj cmake命令 安装.用法简介 https://fukun.org/archives/04 ...

  2. zabbix3 设置邮件报警(五)

    Zabbix邮件报警配置 一.安装sendmail或者postfix(安装一种即可) yum install sendmail #安装 service sendmail start #启动 chkco ...

  3. .htaccess语法之RewriteCond与RewriteRule指令格式详细解释

    htaccess语法之RewriteCond与RewriteRule指令格式详细解释 (2012-11-09 18:09:08) 转载▼ 标签:  htaccess it 分类: 网络 上文htacc ...

  4. php、前端开发（网站建设）环境搭建

    php集成开发环境wampserver,是一款免费开源的软件,下载地址http://www.wampserver.com,由于是国外的网站,打开速度慢,根据自己的电脑选择32位/64位的系统下载.

  5. JavaScript中的this陷阱的最全收集

    JavaScript来自一门健全的语言,所以你可能觉得JavaScript中的this和其他面向对象的语言如java的this一样,是指存储在实例属性中的值.事实并非如此,在JavaScript中,最 ...

  6. python基础知识（三）

    摘要:主要涉及新数据类型set集合.三元运算.深浅拷贝.函数基础.全局变量与局部变量 一.set --> 无序,不允许重复的集合 不允许重复的列表,   1,创建    s = set() 接收 ...

  7. 【学习笔记】C语言之词法规则

    一.字符 标准并没有规定C环境必须使用特定的字符集,但是它规定了字符集必须包含英语所有的大小写字母,数字0到9,以及下面的字符: ! # % ^ & * ( ) _ – + =  / . ? ...

  8. PL/SQL Developer不配置TNS直接登录

    如果只是临时登录,就没必要去配置一个TNS了,Database那里直接输入<IP>:<PORT>/<服务器SERVER_NAME> EBS的直接登录: http:/ ...

  9. JS 初级 二（接上）

    传送门--http://www.cnblogs.com/Sabo-dudu/p/5786683.html (一) 六. JS 数组类型 数组是一种保存数据的有序列表,数组的每一项可以保存人意类型的数据 ...

  10. Lr IP欺骗设置

    IP欺骗设置IP工具:IP Wizard 开启IP欺骗时会关闭DHCP(也就是关闭IP自动获取 更改为手动设置IP) 注:添加IP欺骗,和释放IP,都要重启机器后才会生效,IP Wizard要管理员身 ...