为了学习基础语法，我并没有用vue-cli脚手架来vue init [基于什么类型]  [项目名称]初始化项目，而是直接<script>../vue.js</script>

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title></title>

  </head>

  <body>

    <div id="app">

      模板语法(各种指令、Mustache)

      <div v-bind:class="clas">666</div>

      <button v-on:click="say(678)">按钮</button>

      <p></p>计算属性和观察者

      <div>

        <input type="text" v-model="ipt">

      </div>

      <div>{{toUp}}</div>

      <input type="text" v-model="ipt2">

      <p></p>自定义指令

      <div v-color="'green'">用于测试</div>

      <p></p>自定义组件[简单]

      <div>

        <simple></simple>

      </div>

      <p></p>自定义组件[复杂]

      <div>

        <do-list v-bind:data="list"></do-list>

      </div>

    </div>

    <script src="./bower_components/vue/dist/vue.min.js"></script>

    <script>

    // 注册一个全局自定义【指令】 v-color

    Vue.directive("color", function(el,binding){  /* el就是页面的dom */

        console.log(binding)

        el.style.color = binding.value;

    })

    // 注册一个全局自定义组件 v-color

    Vue.component("simple",Vue.extend({

        template: '<div>A custom component!</div>'

    }))

    // 注册一个复杂全局自定义【组件】 v-color

    Vue.component("do-list",Vue.extend({

        //(父子传参)子组件要显式地用 props 选项声明它预期的数据：

        props: ['data'],

        template: `

            <ul>

                <li v-for="item in data">{{item.name}}</li>

            </ul>

        `

    }))

    //一个vue的实例

    new Vue({

        el: '#app',

        //model

        data: {

          msg: 'Hello!',

          clas:'active',

          ipt:'dsh',

          ipt2:'wx',

          list:[

            {name:'小明',age:20},

            {name:'小红',age:16}

          ]

        },

        //计算属性

        computed:{

          toUp:function() {

              var that=this;

              var temp=that.ipt.toUpperCase();

              return temp;

          }

        },

        //函数

        methods:{

          say:function(i) {

            alert(i)

          }

        },

        //观察者

        watch:{

          // 如果 `ipt2` 发生改变，这个函数就会运行

          ipt2:function (newVal) {

            this.say(newVal)

            //console.log(this.ipt2);

          }

        }

        //至于路由，我暂时先用官方支持的 vue-router 库，而不用基础的自带路由

    })

    </script>

  </body>

</html>

动态显示时间和过滤器

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title></title>

  </head>

  <body>

    <div id="app">

          当前时间：{{nowDate | dataFmt('yyyy-MM-dd HH:mm:ss')}}

    </div>

    <script src="./bower_components/vue/dist/vue.min.js"></script>

    <script>

        // vue2.0后，删除了所有内置的过滤器，都需要自己定义

        Vue.filter('dataFmt',function(data,type){

          that = new Date(data)

          var o = {

              "M+": that.getMonth() + 1, //月份

              "d+": that.getDate(), //日

              "h+": that.getHours() % 12 == 0 ? 12 : that.getHours() % 12, //小时

              "H+": that.getHours(), //小时

              "m+": that.getMinutes(), //分

              "s+": that.getSeconds(), //秒

              "q+": Math.floor((that.getMonth() + 3) / 3), //季度

              "S": that.getMilliseconds() //毫秒

          };

          var week = { "0": "\u65e5", "1": "\u4e00", "2": "\u4e8c", "3": "\u4e09", "4": "\u56db", "5": "\u4e94", "6": "\u516d" };

          if (/(y+)/.test(type)) { type = type.replace(RegExp.$1, (that.getFullYear() + "").substr(4 - RegExp.$1.length)); }

          if (/(E+)/.test(type)) { type = type.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "\u661f\u671f" : "\u5468") : "") + '周' + week[that.getDay() + ""]); }

          for (var k in o) {

              if (new RegExp("(" + k + ")").test(type)) { type = type.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); }

          }

          return type;

        })

        //一个vue的实例

        new Vue({

            el: '#app',

            data: {

              nowDate:new Date()

            },

            //生命周期函数：动态显示时间，要不然时间是死的，刷新页面才会更新

            mounted: function () {

                var that=this;

                setInterval(function () {

                    that.nowDate=new Date();

                },1000)

            }

        })

    </script>

  </body>

</html>

vue简单demo的更多相关文章

  1. vue+node+es6+webpack创建简单vue的demo

    闲聊: 小颖之前一直说是写一篇用vue做的简单demo的文章,然而小颖总是给自己找借口,说没时间,这一没时间一下就推到现在了,今天抽时间把这个简单的demo整理下,给大家分享出来,希望对大家也有所帮助 ...

  2. 一个基于ES5的vue小demo

    由于现在很多vue项目都是基于ES6开发的,而我学vue的时候大多是看vue官网的API,是基于ES5的,所以对于刚接触项目的我来说要转变为项目的模块化写法确实有些挑战.因此,我打算先做一个基于ES5 ...

  3. 设计模式之单例模式的简单demo

    /* * 设计模式之单例模式的简单demo */ class Single { /* * 创建一个本类对象. * 和get/set方法思想一样,类不能直接调用对象 * 所以用private限制权限 * ...

  4. Spring的简单demo

    ---------------------------------------- 开发一个Spring的简单Demo,具体的步骤如下: 1.构造一个maven项目 2.在maven项目的pom.xml ...

  5. 使用Spring缓存的简单Demo

    使用Spring缓存的简单Demo 1. 首先创建Maven工程,在Pom中配置 <dependency> <groupId>org.springframework</g ...

  6. Managed DirectX中的DirectShow应用（简单Demo及源码)

    阅读目录 介绍 准备工作 环境搭建 简单Demo 显示效果 其他 Demo下载 介绍 DirectX是Microsoft开发的基于Windows平台的一组API,它是为高速的实时动画渲染.交互式音乐和 ...

  7. angular实现了一个简单demo，angular-weibo-favorites

    前面必须说一段 帮客户做了一个过渡期的项目,唯一的要求就是速度,我只是会点儿基础的php,于是就用tp帮客户做了这个项目.最近和客户架构沟通,后期想把项目重新做一下,就用现在最流行的技术,暂时想的使用 ...

  8. Solr配置与简单Demo[转]

    Solr配置与简单Demo 简介: solr是基于Lucene Java搜索库的企业级全文搜索引擎,目前是apache的一个项目.它的官方网址在http://lucene.apache.org/sol ...

  9. 二维码简单Demo

    二维码简单Demo 一.视图 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name=&qu ...

随机推荐

  1. ubuntu16.04 安装 eclipse

    1. 下载jdk , jdk-8u77-Linux-x64.tar.gz 2.下载 eclipse  , eclipse-jee-mars-2-linux-gtk-x86_64.tar.gz 注:我下 ...

  2. Java Web开发SpringMVC和MyBatis框架开发环境搭建和简单有用

    1.下载SpringMVC框架架包,下载地址: 点击下载 点击打开地址如图所看到的.点击下载就可以 然后把相关的jar拷贝到lib下导入 2.MyBatis(3.4.2)下载 X-Amz-Algori ...

  3. hrbustoj 1305:多边形（计算几何，极角排序练习）

    多边形 Time Limit: 1000 MS     Memory Limit: 65536 K Total Submit: 113(42 users)   Total Accepted: 51(3 ...

  4. JavaScript 一、 ES6 声明变量，作用域理解

    // JavaScript/* * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ * * 编译原理 * 尽管通常将 JavaScr ...

  5. shell脚本学习总结04--终端信息的获取和设置

    tput tput 命令将通过 terminfo 数据库对您的终端会话进行初始化和操作.通过使用 tput,您可以更改几项终端功能,如移动或更改光标.更改文本属性,以及清除终端屏幕的特定区域. 文本属 ...

  6. 在scrollview中双击定点放大的代码

    双击放大是 iPhone 的一个基本操作,第三方程序里引入这一功能的话,主要是在 scrollview 呈现一张图片或者 PDF 页面时,双击可以放大,主要代码如下 - (void)scrollVie ...

  7. 三 Android Studio打包EgretApp (SDK选择和下载)

    一 设置项目的sdk路径 二 设置项目使用sdk版本 一 设置项目的sdk路径 设置SDK目录 选择你电脑上的sdk路径 二 在项目中设置SDK版本 在项目中设置编译的sdk版本 在SDK Manag ...

  8. 【BZOJ4002】[JLOI2015]有意义的字符串 数学

    [BZOJ4002][JLOI2015]有意义的字符串 Description B 君有两个好朋友,他们叫宁宁和冉冉.有一天,冉冉遇到了一个有趣的题目:输入 b;d;n,求 Input 一行三个整数 ...

  9. navicat自动生成DDL语句

    场景:当我们在开发库修改表结构之后,需要把这些表结构的变化同步更新到生产库,这时候可以在Navicat中copy表结构变更的SQL语句. 当你点击了“设计表”进行修改表结构,在保存表结构之前点击“SQ ...

  10. KDevelop使用笔记【中文教程】

    *师从官方文档: https://userbase.kde.org/KDevelop4/Manual/zh-cn https://docs.kde.org/trunk5/en/extragear-kd ...