vue简单demo

为了学习基础语法，我并没有用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>

 

posted @ 2017-10-21 10:53  丁少华  阅读(6110)  评论(0)  编辑  收藏  举报