vue.js部分扩展指令

1.vuejs中的扩展指令

         （1）v-on为当前的元素绑定事件监听函数

                  <button v-on:click="f1">+</button>

                  <button @click="f2">-</button>

                  v-on后面可用的修饰符：.prevent/.stop/.once/.13

         （2）v-once：为元素绑定事件监听函数，但是只触发一次

                          <button v-on:click.once="f1"></button>

                          <button v-once:click="f1">

         （3）v-model：用于实现视图到模型数据的绑定

                          可能发生改变的view只有表单元素，也就是说只有表单元素可以绑定v-model指令

                  注意：v-model绑定其实就是数据的双向绑定，既可以把模型数据绑定到视图中，也可以吧视图上的数据绑定到模型中，

         v-model绑定的模型数据变量必须在模型中声明

         （4）vuejs中对class和style的绑定

                          方式一：把class和style当做普通的字符串进行绑定

                          <span :class="unameClassObject"></span>

                           <span :style="unameStyleObect"></span>

                          方式二：将class和style绑定为一个对象

                          <span       :class="unaemclassObject"></span>

                         

                                   unameClassObject{

                                            label:true

                                            btn-success:true

                                  

                                   }

         （5）计算属性：

                          在view中多次调用函数以获取计算后的值，每次在{{}}绑定就会重新调用一次函数，而不会复用刚刚计算得出的结果，影响页面的渲染速度

                  计算属性：computed

         计算属性本质是声明computed中的一个函数，使用的时候像普通模型属性一样，不加(),vuejs会缓存计算属性的运算结果，只要模型数据没有发生改变，无论使用多少次，访问的都是对应的缓存

 

  （6）自定义指令：

                          vuejs中除了预定义的13个自定义指令外，还允许用户自定义指令

                  使用自定义的步骤：

                                   1.声明自定义指令

                                            Vue.directive("指令名",{

                                                     inserted：function(el){

 

                                   }

                                           

                          })

                          2.使用自定义指令

                                   <input v-指令名>

                  自定义指令选项对象提供了几个生命周期钩子函数

                  （1）bind：当自定义指令绑定到元素上时调用

                  （2）inserted：当绑定自定义指令到DOm上时自定调用

                  （3）updata：元素绑定的数据发生更新后自动调用

                  （4）componentupdata：元素的子组件发生更新时调用

                  （5）unbind：元素和自定义指令解除绑定时调用

         对象的生命周期钩子函数：

                          在一个独享的不同生命时期的某个时刻，会自动调用的函数---“生命周期钩子函数”

         （7）自定义过滤器

                          filter：滤网，过滤器，可用于接收一些原始数据，加以处理，返回另一中格式的数据，vuejs官方没有提供任何预定义的过滤器，只能自定义

                  Vue.filter("过滤器名",function(val){

                                            ....return .....

                          })

         使用过滤器：

                          方式1：{{ 数据 | 过滤器名}}

                          方式2：<any :title="数据|过滤器名">

组件

         component：组件,是可以复用的vue实例，在视图中呈现的用户自定义的扩展标签，项目中，组件时页面中的一个区域，该区域有对应的模型数据,html/css结构

面向组件化开发：将一个大的网页划分为若干个组件组成的区域，每个区域都有自己的专属的数据/html元素/css样式

                  （1）全局组件

                                   Vue.component("xz-header",{

                                            template:"<div></div>",

                                            data:function(){

                                                             return {

                                                                               uanme:"zhansan"

                                                             }

                                            },

                                            props:["属性1"...]

                          })

                  (2)局部组件 只能用在特定的父组件内的组件

                                   Vue.component("xz-heder",{

                                                     data:function(){}

                                                     methods:{}

                                                     components:{

                                                                               "child-com-name":{

                                                                                        template:"div"

                                                                                        data:function(){

                                                                                                         return {}

                                                                                                }

                                                                               }

                                                                      }

                                            })

                  (3)vuejs中模板写法

                          1.直接写在组件template：“div....(string)”

                                   {

                                            template:"  <div>  </div>"

 

                                            }      

                          2.写在一个独立的template元素中，然后在template属性中引用

                                            <template>

                                                     <div>

                                                     .....

                                                     </div>

                                            </template>

 

html编码规范：

                  （1）html标签名：    

                                   H5官方标签名：<productlist></prodcutlist>

                                   自定义组件名：<prodct-list>

                                   不推荐<productList>

                  (2)自定义属性：

                                   H5官方标签名：<productlist title=“ ”></prodcutlist>

                                   自定义组件名：<prodct-list my-title=>

                                   不推荐<productList myTitle=“”>

                  (3)自定义事件名：

                                   H5官方标签名：<productlist οnmοuseοver=“”“”></productlist>

                                   自定义组件名：<prodct-list onmyevent=" " >

                                   不推荐<productList onMyEvent>

 

vuejs实例的生命周期分为四个阶段

         （1）创建阶段（creat）

         （2）挂载阶段（mount）

         （3）更新阶段（updata）

         （4）销毁阶段（destyoy）

 

(8)父子组件之间的数据传递

(9)兄弟组件之间的数据传递