Vue进阶笔记-组件指令

filters:过滤器

  HTML:       {{ needFilter |  filterName }}
  
  全局过滤器：  Vue.filter({filterName, ( needFilter ) =>{  return  返回值    }}                                 
  局部过滤器：  filters:{
                      filterName( needFiltervalue ){
                           return  返回值
                      }
              }

component:自定义组件

const   hello = { 
         template: '<p>hello component</p>'，
         
         data(){     - - - 组件里的data是一个方法，返回一个对象
             return{
                 title: 'x x x'
             }
         },
         methods...computeds...filters...
      }

全局组件： Vue.component(‘hello’,hello)
局部组件： components:{ hello }

注：子组件里的data默认情况下不会相互影响

  在HTML里定义组件：
                  <template id="hello">
                      <div>     - - - 在template里只能有一个子元素
                         ...
                      </div>
                  </template>
 在HTML里使用组件：
                  <hello-word></hello-word> - html内驼峰命名要改成-命名
      
  在JS里引用组件：
                  const helloWord = {
                      template: '#hello'，
                      data(){
                          return{
                              ...
                          }
                      },
                      ...
                  }

directive: 自定义指令

eg:)自定义指令-轮播 *inserted 插入最后一个元素时初始化swiper

 <p   v-uptext =" I Love "></p>
 
 全局指令：  Vue.directive('uptext', function(el, binding){
                el.textContent = binding.value.toUpperCase()
           })
           
 局部组件：  derectives:{
                lowertext(el, dinding){
                     el.textContent = binding.value.toLowerCase()
                }
           }
           
 el: 指令属性所在的标签对象    binding：包含指令相关信息的数据对象

指令钩子函数

• bind - 第一次绑定时调用，可进行初始化设置
• inserted - 被绑定元素插入父节点时调用
• update - 所在组件的VNode更新时调用
• componentUpdated - 指令所在组件的VNode及其子VNode全部更新后调用
• unbind - 指令与元素解绑时调用

指令钩子函数参数

• el - 指令绑定的元素，可直接操作DOM
• binding - 一个对象
  • name - 指令名，不包含v-前缀
  • value - 绑定值
  • oldvalue - 指令绑定的前一个值
  • expression - 字符串形式的指令表达式
  • arg - 传给指令的参数
  • modifiers - 一个包含修饰符的对象
• vnode - 虚拟节点
• oldVnode - 上一个虚拟节点，在update，componentUpdated使用

安装 Vue CLI

• npm install -g @vue/cli

OR

• yarn global add @vue/cli

升级

• npm update -g @vue/cli

OR

• yarn global upgrade --latest @vue/cli

创建项目

• 运行以下命令来创建一个新项目：

• vue create hello-world