了解一下，其它的什么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. yii2创建数据表

    原文地址: http://blog.csdn.net/xiaoyangxiaodong/article/details/45026865

  2. ajax传输中文乱码解决方法

    问题描述: 我是在一个jsp页面有一个保存按钮,点击时会触发saveForm()的js函数,在saveForm()函数里经过校验后,会通过ajax发送数据请求,这样就不用通过提交表单来传输数据了,aj ...

  3. 影响postgresql性能的几个重要参数

    转载 一篇蛮老的文章了,但是还是很有用,可参考修补. PG的配置文件是数据库目录下的postgresql.conf文件,8.0以后的版本可支持K,M,G这样的参数,只要修改相应参数后重新启动PG服务就 ...

  4. [译]Node.js Interview Questions and Answers (2017 Edition)

    原文 Node.js Interview Questions for 2017 什么是error-first callback? 如何避免无止境的callback? 什么是Promises? 用什么工 ...

  5. Linux查找命令

    最近,我在学习Linux,下面是一些笔记. 使用电脑的时候,经常需要查找文件. 在Linux中,有很多方法可以做到这一点.国外网站LinuxHaxor总结了五条命令,你可以看看自己知道几条.大多数程序 ...

  6. RxJava简单的介绍

    1. RxJava简介 Rx(ReactiveX,响应式编程)是一种事件驱动的基于异步数据流的编程模式,整个数据流就像一条河流,它可以被观测(监听),过滤,操控或者与其他数据流合并为一条新的数据流.而 ...

  7. 剑指Offer 数组中只出现一次的数字

    题目描述 一个整型数组里除了两个数字之外,其他的数字都出现了两次.请写程序找出这两个只出现一次的数字.   思路: 因为有2个数字只出现了一次,而其他的数字都是2次,可以通过异或运算,得到最后这2个只 ...

  8. PostgresSQL的安装与基本命令使用

    安装与配置 yum install http://yum.postgresql.org/9.5/redhat/rhel-7-x86_64/pgdg-redhat95-9.5-2.noarch.rpm ...

  9. zabbix自定义key

    zabbix自定义key 1.修改客户端配置文件 #vi /opt/zabbix/etc/zabbix_agentd.conf Include=/opt/zabbix/etc/zabbix_agent ...

  10. paxos(chubby) vs zab(Zookeeper)

    参考: Zookeeper的一致性协议:Zab Chubby&Zookeeper原理及在分布式环境中的应用 Paxos vs. Viewstamped Replication vs. Zab ...