了解一下，其它的什么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. 深入理解JSX

    本文由笔者翻译自官方文档的JSX In Depth,若干案例经过了改写.其实说白了也好像不算太深入,但还是提示了一些可能的盲区. JSX是为构造React元素方法React.createElement ...

  2. Quartz.NET总结（四）Quartz 远程调度

    前面篇已经介绍了Quartz.NET的配置,使用和Cron表达式表达式的写法.基本上后台的定时任务的定时执行已经完成,并能正确的按照执行计划,执行相关的job . 然后,如果任务需要更新,停止某个任务 ...

  3. [译]C#编码约定

    原文:https://msdn.microsoft.com/en-us/library/ff926074.aspx 编码约定的目的是: 创建统一格式的代码,让读者的注意力更集中在内容上面,而不是结构 ...

  4. 【JSP错误总结】无法访问jsp页面

    运行环境:window 7 64位  JSP服务器 tomcat 7 现象:无法访问JSP页面,如下图所示:

  5. jaee开发起步：tomcat服务器的配置

    1.将下载下来的apache-tomcat-6.0.13.zip解压到任意文件夹. (打开tomcat官网,选择下载tomcat6.x.zip版本的tomcat不需要安装,直接解压并配置一下环境变量就 ...

  6. Netty 实现聊天功能

    Netty 是一个 Java NIO 客户端服务器框架,使用它可以快速简单地开发网络应用程序,比如服务器和客户端的协议.Netty 大大简化了网络程序的开发过程比如 TCP 和 UDP 的 socke ...

  7. runtime 第四部分method swizzling

    接上一篇 http://www.cnblogs.com/ddavidXu/p/5924597.html 转载来源http://www.jianshu.com/p/6b905584f536 http:/ ...

  8. [2016-10-24]jQuery学习回顾笔记1.0

    一.如何把 jQuery 添加到网页 <script> 标签应该位于页面的 <head> 部分. <head> <script src="jquer ...

  9. ubuntu下C++连接mysql数据库

    参考了该博客的做法:http://zhmy.michael.blog.163.com/blog/static/861578792012101244715692/ 1.安装mysql: sudo apt ...

  10. 在XP上运行IIS5.1新建站点

    系统问题,XP下IIS5.1不能直接新建站点,因为内核限制只能同时运行一个站点,要想新建站点,必须把当前站点停掉,然后用adsutil.vbs脚本创建,脚本在C:\Inetpub\AdminScrip ...