vue | Yo.

vue组件

创建全局组件的两种方式

利用构造器（extend）
vue.component方式

局部组件的创建方式，具有独立的作用域，只能在自己内部访问，如果需要则传值解决

组件的data必须是一个函数，且必须返回一个对象
只能有一个根元素

父子组件(这样就可以只暴露父组件，而不要把所有的组件都暴露出来)

组件中可以使用template标签，来在外面定义所需要的没有高亮。

上面的不管是什么方式都写的感觉很恶心，所以最好的解决方法是，把一各个组件都拆分成对应的.vue

父子组件相互通信

父组件要想给子组件传送值，必须使用props属性，子组件要想给父组件传送值是不能使用props这样必然是会报错的。我们应是使用自定义事件机制。this.$emit(‘父组件上的自定义的事件名’，参数1)；

父传子

html

<div id='app'>
    <mycom :pretmsg='msg'></mycom>
  </div>
  <script>
    let vm = new Vue({
      el: '#app',
      data:{
        msg: '父组件的数据',
      },
      components:{
        mycom:{
          template: `<h1>子组件{{pretmsg}}</h1>`,
          props:['pretmsg'],
        }
      }  
    })
  </script>

子传父

html

<body>
  <div id='app'>
    <mycom @func='show'></mycom>
  </div>
  <template id='com'>
    <div>
      <button @click='myclick'>点击我会调用父组件的方法</button>
    </div>
  </template>
  <script>
    // 实例化子组件
    let com2 = {
      template: '#com',
      methods:{
        myclick(data){
          this.$emit('func',23);
        }
      }
    }
    let vm = new Vue({
      el: '#app',
      data:{
        
      },
      methods:{
        show(data){
          console.log('调用了父组件中的方法'+data);//这里的data相当于传参数给父组件
        }
      },
      components:{
          // 'mycom':{
          //   template: '#com',
          // },
          // //调用父组件中的方法
          // methods:{
          //   myclick(){
          //     this.$emit('func');
          //   }
          // }
          'mycom':com2
        }
    });
  </script>
</body>

插槽

Vue中插槽可以分为匿名插槽和实名插槽

匿名插槽

(匿名插槽可以替代任何标签)

html

<body>
  <div id='app'>
    <mycom>
      <img src="img/01.jpg" alt="">
    </mycom>
  </div>
  <template id='com'>
    <div id='main'>
      <h2>我真美</h2>
      <!-- 匿名插槽 -->
      <slot>这是一个匿名插槽，如果没有则显示提示的内容</slot>
      <p>说的没错</p>
    </div>
  </template>
  <script>
    Vue.component('mycom',{
      template: '#com',
    })
    let vm = new Vue({
      el: '#app',
      data:{
      },

    })
  </script>
</body>

实名插槽

html

<body>
  <div id='app'>
    <mycom>
      <p slot='cpu'>core i5</p>
      <p slot='gpu'>高清</p>
      <p slot='memory'>8g</p>
    </mycom>
  </div>
  <template id='tmp'>
    <div id='panel'>
      <slot name='cpu'>cpu的插槽</slot>
      <slot name='gpu'>gpu的插槽</slot>
      <slot name='memory'>内存条的插槽</slot>
    </div>
  </template>
  <script>
    Vue.component('mycom',{
      template: '#tmp',
    })
    let vm = new Vue({
      el: '#app',
      data:{
        
      },

    })
  </script>
</body>

钩子函数与自定义指令

上面我们介绍了v-if，v-for等指令的使用，我们可不可以自己定义指令使用呢？答案当然是可以的。

首先我们在要绑定标签中写入我们要绑定的指令名称,假设我们要改变h3的颜色使每一个h3的颜色都是不同的

Code

<template>
	<h3 v-rainbow>我会变色</h3>
</template>

那么在我们的js文件中，不能带v-,在这里我们使用钩子函数bind,第一个参数代表着是哪一个元素标签，第二个是参数，第三个是节点

javascript

Vue.directive('rainbow'，{
              bind(el,binding,vnode){
    		el.style.color='#'+Math.random().toString().slice(2,8);
}
})

如果我们要传参数必须是字符，对象，数组

Code

<template>
	<div v-theme="'wide'">我会变宽</div>
</template>

javascript

Vue.directive('theme'，{
              bind(el,binding,vnode){
    if(binding.value == 'wide'){
        el.style.maxWidth = '1280px';
    }else{
        el.style.maxWidth = '800px';
    }
}
})

如果我们传入像click这种参数的话

Code

<template>
	<div v-theme:bgc>我会变宽</div>
</template>

javascript

Vue.directive('theme'，{
              bind(el,binding,vnode){
    if(binding.arg=='bgc'){
        el.style.background='red';
    }
}
})

自定义过滤器

在这个管道的右边，是我们的过滤器名称

html

<h3 v-rainbow>{{blog.title | to-upercase}}</h3>

javascript

// 自定义过滤器
Vue.filter('to-upercase',function(value){
  return value.toUpperCase();
})

我们用一个函数来接受value这里的value是我们管道中左边的值，

计算属性

模板内的表达式的是非常便利的，但是如果过多逻辑会变得更加难以维护，

html

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

官网的例子已经告诉我们，如果我们想要反转字符串，就会显得模板的的任务过于复杂，所以我们可以利用计算属性，来达到我们想要的结果。

html

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

javascript

computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }

上面的例子很好理解了，这里的是直接走get方法，默认把属性和get方法结合在一起用。

分开写

javascript

computed: {	
    reversedMessage: {
        get(){
           return this.message.split('').reverse().join('')
        }
    }
  }

监听者（watch）

watch可以分为对基本类型，引用类型的监听。基本类型主要监听你要监听的即可，引用类型是深度监听，主要是对于数组，对象。

如果要监听一个todos的数组的变化

javascript

computed: {
    ....
    todos: {
        handler(){
            ..设置变化
        }，
        deep: true
    }
}

自定义指令

全局的自定义指令（directive）
自定义的自定义指令（directives）

自定义指令中的钩子函数

bind、inserted、update、componentUpdated、unbind

bind中不可上来就聚焦focus（），所以要使用inserted（官网实例）

区别：bind和inserted的区别：bind获取不到父元素节点(上来就只执行一次)，而inserted是可以获取到父元素。

update获取的是模版跟新过前的内容，componentUpdated获取的是更新之后的内容，具体使用要看需求

javascript

Vue.directive('demo',{
       bind (el,binding) {
         console.log(el,el.parentNode)
       },
       inserted (el) {
         console.log(el,el.parentNode)
       },
      update (el) {
        console.log('update',el.innerHTML)
      },
      componentUpdated (el) {
        console.log('component',el,innerHTML)
      }
    })

通常会把bind和update结合在一起用

javascript

Vue.directive('demo',(el,binding){
    .....
})

利用自定义指令模拟v-bind（：）的实现

javascript

<div id="app">
    <h2 v-my-bind:title='message'>{{message}}</h2>
    <input type="text" v-model='message'>
  </div>

Vue.directive('my-bind',{
      bind(el,binding){
        el.setAttribute(binding.arg,binding.value)
      },
      update (el,binding) {
        el.setAttribute(binding.arg,binding.value)
      }
    })

简写

javascript

Vue.directive('my-bind',(el,binding) => {
      el.setAttribute(binding.arg,binding.value)
    })

Element

vue的一款组件类库，网站的快速成型工具，由饿了么团队开发。

使用

npm安装
引入Index.css文件
引入index.js文件
前提是一定要引入了vue或者是在vue-cli中使用。