vue基础二，组件

vue二：
     指令：
     1，v-once指令：
         v-once：单独使用，限制的标签内容一旦赋值，便不可被动更改(如果是输入框，可以主动修改)

         

             
             
             
             
{{ msg }}
             
             
{{ msg }}
         
         
         

     2，v-cloak:斗篷指令（了解）
         v-cloak：防止页面闪烁

         
         
         
         

             {{ }}
             {{ }}
             {{ }}
         
         
         

     3，条件指令
        v-if    v-show
        1,两种都可以控制标签的显隐，绑定的值是布尔值类型，但是在都隐藏标签时
             v-if是不会渲染标签，在前端就无法看到此标签的数据，所以比较安全
             v-show以display：none方式渲染，不显示，但是渲染了标签，隐藏了

             

                 
if条件指令
                 
show条件指令
             
             
             

             2)    v-if="变量"
                 v-else-if="变量"
                 v-else
                 一组分支，上成立分支会屏蔽下方所有分支，else分支没有条件，在所有分支不成立后才显示
                 即只要if成立就不会走else-if，从上到下都不成立才会走else

             案例：
             
             
             
                 
                 
                 

             
             
                 
                     
                     
                 
                 

                     

                         

                             
                                 
                                 
                             红
                             黄
                             绿
                         
                         

                             
                             红
                             黄
                             绿
                         
                         
                         

                         

                         

                     
                 
             
             
             
             
     4，v-pre指令(了解)
         v-pre指令可以在vue控制范围内，形成局部vue不控制区域(局部不解析vue语法)

         

             
{{ msg }}
             
             

                 {{ }}
                 
             
         
         
         


     5,v-for 循环指令
         1) 遍历字符串：可以只逐一遍历字符，也可以连同遍历索引
             
 | 


         2) 遍历数组：可以只逐一遍历成员元素，也可以连同遍历索引
             
 | 


         3) 遍历对象：可以只逐一遍历成员元素，也可以连同遍历成员键(key)，还可以遍历成员key索引
             
 | 
 | 


         案列：
         

             
{{ str }}
             
{{ str[0] }}
             

                 {{ ch }}
             
             

                 
                 {{ i }}{{ ch }}
             


             

                 
{{ i }}{{ ele }}
             


             

                 
{{ ele }}
             

             

                 
{{ k }}:{{ ele }}
             

             

                 
{{ i }}{{ k }}:{{ ele }}
             

         
         
         

     6，todolist留言板案例

         1) 留言就是往留言数组中添加数据，删除留言就是从留言数组中移除数据

         2) 前台数据库：localStorage 和 sessionStorage
             localStorage永久保存数据
             sessionStorage临时保存数据(当所属页面标签被关闭，数据被清空)

         3) 前台localStorage 和 sessionStorage数据库存储的值是字符串类型，所以要存放arr、dic等复杂数据需要JSON参与

         案列：
             
             
             
                 
                 
                 
             
             
                 

                     

                         
                         留言
                     
                     

                         

                             {{ msg }}
                         
                     
                 
             
             
             

             
             

     7，实例成员 - 插值表达式符号(了解)
         

             {{ msg }}
             {[ msg ]}
         
         

     8，计算属性
         1) computed是用来声明 方法属性 的
         2) 声明的方法属性不能在data中重复定义
         3) 方法属性必须在页面中渲染使用，才会对内部出现的所有变量进行监听
         4) 计算属性的值来源于监听方法的返回值

         

             姓：
             名：
             姓名：{{ flName }}
         
         
         

         案列：
         
         
         
             
             

         
         
             

                 
{{num}}
                 
                 
                 
                 
十位：{{parseInt(num / 10)}}
                 
各位：{{num % 10}}
                 十位：
                 各位：
                 结果：{{shi*10 + +ge}}
                 结果：{{result}}

             
             
         
         
         
         

     9,组件：

         1) 组件：一个包含html、css、js独立的集合体，这样的集合体可以完成页面解构的代码复用
         2) 分组分为根组件、全局组件与局部组件
               根组件：所有被new Vue()产生的组件，在项目开发阶段，一个项目只会出现一个根组件
               全局组件：不用注册，就可以成为任何一个组件的子组件
               局部组件：必须注册，才可以成为注册该局部组件的子组件
         3) 每一个组件都有自身的html结构，css样式，js逻辑
              每一个组件其实都有自己的template，就是用来标识自己html结构的
              template模板中有且只有一个根标签
               根组件一般不提供template，就由挂载点的真实DOM提供html结构
         4) 除根组件的其他组件，数据要有局部作用域，保证组件复用时，各组件间数据的独立性
         5) 在多组件共处时，在哪个组件模板中出现的变量，有当前组件组件提供

          
         1,局部组件：
             1，创建局部组件
             2，在父组件中注册该局部组件
             3，在父组件的template模板中渲染该局部组件

             案列：
             
             

                 
                 
                 
                 
             
             
             

          2，全局组件:
                 1，创建全局组件
                 2，在父组件的template模板中渲染该全局组件


                 
                 

                     
                     
                     
                 
                 
                 

         3，组件交互-父传子
             数据交互-父传子 - 通过绑定属性的方式
             1，数据由父组件提供
             2，在父组件模板中，为子组件标签设置自定义属性，绑定的值由父组件提供
             3，在子组件实例中，通过props实例成员来获取自定义属性


                 
                 
                 
                     
                     
                     
                 
                 
                     

                         
                     
                 
                 
                 
                 

         4，组件交互-子传父
             // 组件交互-子传父
                 1) 数据由子组件提供
                 2) 子组件内部通过触发系统事件，发送一个自定义事件，将数据携带出来
                 3) 父组件位子组件标签的自定义属性通过方法实现，就可以通过参数拿到子组件传递处理的参数
                 
                 
                 

                     

                         
                         留言