实例方法

发表于 2019-05-25

<div id="app">
      <p>{{message}}</p>
  </div>
  <button onclick="destroy()">销毁</button>
  <button onclick="reload()">更新</button>
  <button onclick="tick()">修改</button>
  <script>
      var app = Vue.extend({
          template:`<p>{{message}}</p>`,
          data:
          function(){
              return {
               message:'hello world'
              }
          },
          mounted:function(){
              console.log('我被挂载了')
          },
          destroyed:function(){
              console.log('我被销毁了')
          },
          updated:function(){
              console.log('我被更新了')
          }
       })
      //挂载方法
      var vm = new app().$mount('#app');
      //销毁方法
      function destroy(){
          vm.$destroy();
      }
      //更新方法
      function reload(){
          vm.$forceUpdate();
      }
      //修改方法
      function tick(){
          vm.message = 'hello Vue',
          vm.$nextTick(function(){
              console.log('我被修改了')
          })
      }
   </script>

实例入门

发表于 2019-05-25 | 分类于 Vue

实例就是在构造器外部操作构造器内部的属性和方法，他让Vue可以和其他框架一起使用

阅读全文 »

delimiters选项

发表于 2019-05-25 | 分类于 Vue

delimiters是用在当我们想修改一些东西比如我不想用花括号来绑定值时使用,他一般在数组里有两个元素，第一个是改变后的前面的，另一个是改变后后面的部分

阅读全文 »

extends选项

发表于 2019-05-25 | 分类于 Vue

extends方法和mixins差不多，是个扩展选项，只是在构造器里写的时候他是个对象（只能有一个对象），而mixins可以写一个数组

阅读全文 »

mixins选项

发表于 2019-05-25 | 分类于 Vue

mixins是混入选项操作，一般用于在你写完构造器后想加些东西却不想污染构造器时使用，一种是当很多地方需要用时作为全局的使用，随时可以调用，同时下面的栗子中构造器原生的updated和构造器内的和全局的还有顺序规则，需要注意的是如果构造器内的mixin的名和构造器内方法的名字重了，就不存mixin了

<div id="app">
        <p>{{count}}</p>
        <button @click="add">增加</button>
    </div>
    <script>
        //全局的
        Vue.mixin({
            updated:function(){
                console.log('全局mixin')
            }
        })
        var addLog = {
            updated:function(){
                console.log('mixin')
            }
        }
        var app = new Vue({
            el:'#app',
            data:{
                count:1
           },
            methods:{
               add:function(){
                   this.count++;
               }
           },
           //原生
           updated:function(){
               console.log('原生')
           },
           //构造器内
           mixins:[addLog]
        })
    </script>

顺序：全局构造器内原生

watch选项

发表于 2019-05-25 | 分类于 Vue

watch选项用于监控数据变化，一种是直接在构造器内用watch选项，一种是为了避免耦合度在构造器外使用

阅读全文 »

methods选项

发表于 2019-05-24 | 更新于 2019-05-25 | 分类于 Vue

methods方法一般跟@click这样的绑定，下面有三个栗子，分别是简单的传值绑定，组件绑定，实例外绑定

<div id="app">
         <p>{{count}}</p>
         <button @click="add(2)">add</button>
         <!-- .native的意思实质上就是调用原生的js方法，这个技巧很常用 -->
         <btn @click.native="add(3)"></btn>
     </div>
     <button onclick="app.add(4)">实例化外</button>
     <script>
         var btn={
             template:`<button>add组件</button>`
             }
         var app = new Vue({
             el:'#app',
             data:{
                 count:1
             },
             components:{
                 'btn':btn
             },
             methods:{
                 add:function(num){
                     if(num !=''){
                         this.count+=num
                     }
                     else  this.num++
                 }
             }
         })
     </script>

computed选项

发表于 2019-05-24 | 分类于 Vue

computed选项一般用来改变原来的值得形式，使data选项里的值尽量的整洁简单，因此我们一般用computed选项来给绑定的值进行改变大小写啊，添加修饰啊。下面就举一个将新闻日期倒过来的小栗子，因为数据输入时是旧时间到新时间，而我们想要的是先看到新时间的新闻，所以在computed中使用computed就很有必要

<div id="app">
       <p>{{newMessage}}</p>
       <ul>
           <li v-for="item in reverseNews">{{item.title}}-{{item.date}}</li>
       </ul>
   </div>
   <script>
       var app = new Vue({
           el:'#app',
           data:{
               message:100,
               news:[{title:'新闻1', date:'2019/01/24'},
                     {title:'新闻2', date:'2019/01/25'},
                     {title:'新闻3', date:'2019/01/26'},
                     {title:'新闻4', date:'2019/01/27'}]
               },
           computed:{
               newMessage:function(){
                   return this.message='￥'+this.message+'元';
               },
               reverseNews:function(){
                   return this.news.reverse();
               }

           }
       }) ;
   </script>

propsData

发表于 2019-05-24 | 分类于 Vue

实际上propsData他不是挂载个属性，它是一个选项，甚至说这很不常用，完全可以用组件实现，但是要认识他，他是个传递数据的选项

<div id="summer"></div>
   <script>
       var summer = Vue.extend({
           template:`<h2>{{message}}-{{food}}</h2>`,
           data:function(){
                 return{
                     message:'summer'
                 }
           },
           props:['food']
       })
       new summer({propsData:{food:'iceCream'}}).$mount('#summer')
        //注意写法sss
   </script>

keyframes

发表于 2019-05-23 | 分类于 CSS动画

与transition不同，这个可以在一开始就进行动画演示，无需操作，这在CSS动画中是很重要的部分，他可以让你任意调动，说白了，这个关键帧动画实际上就是多个补间动画,另外还有一种逐帧动画，它是一种特殊的关键帧动画，只不过他没有补间动画是一帧一帧的，但是他资源使用大，因此除了另两个动画搞不定的情况下尽量不要使用，因为他包含于keyframes里，因此说CSS设置动画实质上就两种transition和keyframes

<style>
    .container{
        width:50px;
        height:50px;
        background-color: red;
        animation: run 1s ;
    }
    @keyframes run{
        0%{
            width:100px;
        }
        10%{
            width: 20px;
        }
        50%{
            width: 200px;
        }
        100%{
            width:300px;
        }
    }
</style>
<body>
    <div class="container"></div>
</body>

栗子中的run是动画名要与下面的@keyframes后的对应好了

当然transition里可以用的这里也可以用，比如说可以加上像linear这样的

1	animation: run 1s linear ;

当只有前后两个节点时一般会写成from to来代替0% 100%

@keyframes run{
       from{
           width:100px;
       }
       to{
           width:300px;
       }
   }

还有一些有意思的animation属性

设置动画倒着开始

1	animation-direction: reverse;

设置动画不要回来了

1	animation-fill-mode: forwards;

设置动画循环次数，这里的infinite是无数次

1	animation-iteration-count: infinite;

设置动画停止

1	animation-play-state: paused;

逐帧动画

<style>
    .container{
        width:100px;
        height:100px;
        border: 1px solid red;
        background:url("http://images2015.cnblogs.com/blog/733006/201611/733006-20161103171828065-1874183143.png") no-repeat;
        animation: run 1s ;
        animation-timing-function: steps(1);
    }
    @keyframes run{
        0%{
            background-position:0px 0px;
        }
        50%{
            background-position:0px -80px;
        }
        100%{
            background-position:0px 0px;
        }
    }
</style>
<body>
    <div class="container"></div>
</body>

其实就是加个

1 2	animation-timing-function: steps(1); /* 只能是1 */