发表于 | 分类于

transition(过渡)是用来设置补间动画的即自动填补两个画面中间的部分，但必须有前后变化，比如下面的栗子中，就得有个hover

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
    .container{
        width:50px;
        height:50px;
        background-color: red;
        transition: width 1s,background-color 1s;
        transition-delay: 2s;
        transition-timing-function: ease-in-out;
    }
    .container:hover{
        width:300px;
        height:50px;
        background-color: green;
    }
</style>
<body>
    <div class="container"></div>
</body>

transition-property和transition-duration一般一起用，第一个表示做动画的属性，第二个表示动画进行时间，当多个属性同时使用动画时就用逗号隔开,也可以写成all 1s

1
transition: width 1s,background-color 1s;

transition-delay 只有一个时间参数使用来设置延迟的

transition-timing-function是用来定义动画进行方式，就是先快后慢啊还是匀速啊啥的，常见方式如下

function

具体实例如下

ease-in-out:

function

linear:

function

ease-in

function

ease-out

function

一个需要翻墙的工具，用来自制动画方式

发表于 | 分类于

组件标签就是<component></component>,是vue自己定义的，可以用这个实现动态选择组件，详情看下面的小栗子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<body>
   <div id="app">
      <component :is="ok"></component>
      <!-- vue中用v-bind:is实现动态组件 -->
      <button @click="changeComponent">changeComponent</button>
   </div>
   <script>
      var componentA = {
          template:`<h2 style="color:red">A</h2>`
      }
      var componentB = {
          template:`<h2 style="color:green">B</h2>`
      }
      var componentC= {
          template:`<h2 style="color:pink">C</h2>`
      }
      var app = new Vue({
          el:'#app',
          data:{
              ok:'componentA'
          },
          components:{
              'componentA':componentA,
              'componentB':componentB,
              'componentC':componentC
          },
          methods:{
            changeComponent:function(){
                if(this.ok==componentA){
                    this.ok=componentB
                }
                else if(this.ok==componentB){
                    this.ok=componentC
                }
                else this.ok = componentA
            }
          }

      })
   </script>
</body>

发表于 | 分类于

组件属性(props)的设置有两个坑，第一个坑是组件属性命名一定不能有-只能化成驼峰式，第二个坑是props是数组，不能写成对象形式而且他是写在template底下的；

组件属性设置有两种，一种是直接属性，一种是绑定data

阅读全文 »

发表于 | 分类于

生命周期又叫钩子函数，就是在某个节点进行某个操作，这里讲的是构造器里的生命周期，总共有十个，有两个需结合组件学习(activated,deactivated)，所以先学八个

阅读全文 »

发表于 | 分类于
  1. 将二进制转换为小数，同样是各位乘以位权

avatar

  1. 计算机运算出错原因：

avatar

因此不是所有的十进制小数都可以用二进制表示，而计算机底层使用的都是二进制数，由此看来当计算一些不能直接化成二进制小数的将会像10/3一样，无限循环而不准确

为了避免这种出错可以把小数化成一定倍数好计算

发表于 | 分类于

因为还没学组件所以下面的将是一个简单的扩展实例构造器的小栗子，一般情况下扩展实例构造器是要和组件一起使用的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
<!-- 最好写id形式，不要直接用标签 -->
    <div id="author"></div>
    <script>
    //定义扩展构造器
       var authorUrl = Vue.extend({
           template:'<p><a :href="authorUrl">{{authorName}}</a></p>',
           data:function(){//在Vue.extend里的data必须是函数
               return{
                   authorName: 'liuxue',
                   authorUrl:'https://snowFlakeXue.github.io'
               }
           }
       });
       //挂载（.$mount）到一个元素上
       new authorUrl().$mount('#author');
    </script>