vue : 配合es6+bootstrap

vue 特点：

1. 有自己的生态圈
2. 运行快， 虚拟DOM
3. 无刷新更新数据

基础 -指令

• v-html =》 将传入数据中的标签内容提出来显示
• v-text => 将传入数据中的标签和内容全部显示出来

显示如下图：

v-html-text.png

• v-cloak => 必须配合display:none 才能解决{{}}的闪现问题
  • 作用：
    • 让具有v-cloak的标签都隐藏
    • 等数据都加载成功之后在显示

{{}}

• v-model =>动态绑定数据

    // txt 对应 实例data数据中的属性txt

• v-once =》默认数据只绑定一次

  
{{txt==='hello' ? 'hello world' : txt}}

• v-if / v-else / v-show
  • v-if / v-else 是对DOM元素的增加和删除，相当于appendChild 和removeChild
    • 用处：如果只对DOM操作一次，建议使用v-if ，频繁操作的话不建议使用
  • v-show 是对display的block 和 none
    • 用处：频繁操作DOM的话建议使用

  
    

        
{{txt}}
        
{{txt}}
    
    
    

显示结果如下图：
值为true的图

true.png

值为false的图

false.png

• v-for => 用来遍历对象和数组

    

        

            
{{item}}
        
    
    
    

结果如下图：

v-for.png

表达式 {{}}

• 获取动态数据

   
   {{txt}}
    
  

• 设置默认值，此处设置默认值时无法改变的，可以在实例设置默认值

    //  表达式设置默认值
    {{txt = '设置默认值'}} 
    //  实例设置默认值
    data:{
      txt : '默认值' 
    }
  

• 直接进行运算 和 比较

    
    
  
      // 判断 
      {{txt===true ? 'Hellow world' : txt}}
      // 运算
      {{a+b}}
    
    
  
  

vue 体验

vue ： json+HTML =》通过表达式“”{{}}“”填入动态数据

    
{{name}}
       //  {{name}} 接收动态数据，并显示在页面上
    
    

双向数据绑定

vue 为MVVM的框架 ：即为数据影响视图 ，视图影响数据，主要用在form元素中

    

           // v-model：动态绑定绑定数据
        
{{txt}}
 
    
    
    

事件

• 事件绑定的函数，放在methods中；
• 动态数据，放在data中
• v-on :事件类型 =》 v-on:click
  • 简写为：@click
• 事件绑定中，带不带 括号"()" 的区别
  • 带括号 ：
    • 可以传参
    • 必须"手动"传入事件对象$event

    

        

            

                
{{item.name}}
                
{{item.age}}
            
        
    
    
    

修饰符 通过"."操作

• 鼠标事件@click
• 键盘事件 @keydown / @keyup
  • @keydown.down
  • @keydown.up
  • @keydown.enter
  • @keydown.键值
• @click.stop =》 阻止事件冒泡
• @click.prevent =》 阻止默认事件
• 串联使用 ： @keydown.stop.prevent

动态绑定 用冒号" : " 来绑定

• v-bind:src 简写为 :src

  • 所有标签元素身上的属性，都能简写为 " : 属性" 来获取动态数据

• 动态的class样式

  • 对象
  • 数组

  
  data:{
    变量1: '样式1',
    变量2: '样式2'
  }
  

• 动态的style样式

  • 行间样式
  • 获取数据中样式

    

        // 动态行间样式
        
aaaaaaa
        // 动态获取数据中样式
        
bbbbbbb
    
    
    

demo 焦点切换

    

        

            

                

                    
姓名 : {{item.name}} ; 年龄 : {{item.age}}
                
            
        
    
    
    

计算属性：computed

• 计算属性将被混入到Vue实例中
• 所有的getter和setter的this上下文自动绑定为Vue实例
• 计算属性的结果会被缓存
• 注意：此处不能使用箭头函数来定义计算属性函数

demo1

    
    
    
    
    


    

        

            
            

                
                    
{{item}}
                
            
        
    
    
    

计算属性中的datas方法以datas属性中get方法代替

// 更替后效果完全一样
datas:{
   get(){
       let arr = [];
       this.lists.forEach(item=>{
           item.toString().includes(this.txt) && arr.push(item);
        })
       return arr;
    }
}

在datas对象中有get方法，自然就少不了set方法

• set : 顾名思义就是用来设置属性值的

datas:{
  get(){ 
    // 获取
  },
  set(val){
    // 设置
  }
}

• set 赋值
  • 通过实例调用datas来赋值

set(val){
  // val 自动接收值
  console.log(val);
}
vm.datas = 'ccc';

自定义键盘事件的修饰符

全局设置Vue.config

• Vue.config 是一个对象，包含Vue的全局配置，可以在启动应用之前修改属性
  • 可修改的属性
    • slient
    • optionMergeStrategies
    • devtools
    • errorHandler
    • warnHandler
    • ignoredElements
    • keyCodes
    • performance
    • productionTip

组件

• 组件是一个对象
  • 包含：
    • 模板
      • 模板是字符串
    • 数据
    • 方法 / 函数
    • 生命周期钩子函数，等
• 组件特性
• :is -> 判断
• slot -> 接收来自显示写入组件的内容

demo

浏览器渲染：

组件.png

组件数据通信

• 概括：
  • 父给子传递数据通过属性传递，通过props接收
  • 子给符传递数据通过$emit传递，通过函数接收
    • 也就是事件订阅发布的思想

demo

点击children组件后的浏览器渲染结果

数据通信-订阅发布.png

路由

1. 注册路由组件
   • 组件即对象
2. 创建路由实例
   • routes 为 数组 [ ]
3. 在Vue实例vm中注册路由
4. 在app中，添加导航和对应显示的模块
   • 导航链接：
   • 显示模块：

    
    
    


    

        
        首页
        列表页