vue指令及组件

复习

"""
vue:
    为什么选择vue - 综合其他框架优点，轻量级，中文API，数据驱动，组件化开发，数据的双向绑定，虚拟DO
    渐进式js框架 - 选择性控制 - 创建一个vue实例对象，关联一个挂载点
    
实例成员：
    el：body，html不能，通常用id，css3选择器语法
    data: 数据，字典形式
    filters：过滤器函数 fn(a, b) - {{ a | fn(b) }} | {{ a,b | fn }}
    methods: 事件方法
    
指令：
    文本：{{ }} | v-text | v-html
    事件：v-on:click="clickAction" | @click="clickAction" | @click="clickAction($event)"
    属性：v-bind:style="myStyle" | :class="[c1, c2]" | :class="{active: isActive}"
    表单指令：v-model="变量"
"""

v-once指令

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

    
    
    
    
{{ msg }}
    
    
{{ msg }}

v-cloak指令(了解)

"""
v-cloak：防止页面闪烁
"""

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

条件指令

    
if条件指令
    
show条件指令








    

        

            红
            黄
            蓝
        
        

            红
            黄
            蓝
        
        

        

        

    

v-pre指令(了解)

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

    
{{ msg }}
    
    

        {{ }}
        
    

循环指令

"""
1) 遍历字符串：可以只逐一遍历字符，也可以连同遍历索引
    
 | 

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

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

"""

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

        {{ ch }}
    
    

        
        {{ i }}{{ ch }}
    


    

        
{{ i }}{{ ele }}
    


    

        
{{ ele }}
    

    

        
{{ k }}:{{ ele }}
    

    

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

todolist留言板案例

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

2) 前台数据库：localStorage 和 sessionStorage
    localStorage永久保存数据
    sessionStorage临时保存数据(当所属页面标签被关闭，数据被清空)
    
3) 前台localStorage 和 sessionStorage数据库存储的值是字符串类型，所以要存放arr、dic等复杂数据需要JSON参与
"""

    
    
    


    

        

            
            留言
        
        

            

                {{ msg }}
            
        
    

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

    {{ msg }}
    {[ msg ]}

计算属性

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

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

属性监听

// 1) watch为data中已存在的属性设置监听事件
// 2) 监听的属性值发送改变，就会触发监听事件
// 3) 监听事件的方法返回值没有任何意义

    姓名：
    姓：{{ firstName }}
    名：{{ lastName }}

组件

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

局部组件

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

全局组件

// 1) 创建全局组件
// 2) 在父组件的template模板中直接渲染该全局组件

组件交互-父传子

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

组件交互-子传父

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

    

        
        留言