VUE 基础

VUE

文档

​ 官方 文档 https://cn.vuejs.org/ or vue.js

使用版本 最新稳定版本：2.5.21

https://www.cnblogs.com/liwenzhou/p/9959979.html

vue的使用

1. 下载 vue.js 文件 引入 或使用网络 链接导入

2. 声明领地（Vue实例的作用范围）

使用 id 来定义 作用范围 名字随意

1. 创建一个对象（Vue对象）

2. 查找领地（作用域）

   el : '#app', 查找作用域 app 必须写# 号

3. 基本使用

   
       
       
   
           
   {{ content + content }}
      支持 拼接  字符串
           
   {{ '今晚去我家' }}
         直接显示
           
   {{ {'name': "鑫姐" } }}
      显示 object 对象
           
   {{ 1 > 2 ? "大于" : "傻逼" }}
      三元运算
           
   {{ python + linux }}
     数字相加
           
   {{ totalScore }}
      函数调用  
           
   {{ list }}
     显示
       
   
       
   
   

vue.js 指令系统

• 指令以v-开头，用来操作标签的文本值，操作标签的属性，绑定事件

操作标签的文本值

1. v-text 渲染文本值

2. v-html 渲染原始标签

3. v-for: 处理丰富的数据结构

   
       
   
           
   {{ value }}
       
      

4. v-if, v-else-if, v-else: 判断标签是否显示

   实现方式：

   ​ v-if底层采用的是appendChild removeChild 来实现的

       
   
           
   滚
       
       
   
           
   来啦老妹
       
       
   
           
   没有美女来吗
       
   boo 在 data 中定义

5. v-show：判断标签是否显示

   实现方式：

   ​ v-show通过样式的display控制标签的显示

   
           显示
   
   
   show:true,
   hide:false,

6. v-if和v-show的性能比较 开销问题

   • 渲染的开销

     v-if：低

     v-show：高

   • 切换的开销

     v-if：appendChild, removeChild 高
     v-show：低

7. 一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好，如果在运行时条件很少改变，则使用v-if较好。

操作标签的属性

（class，href，src）

v-bind

简写 :class='aaa' 绑定

绑定类名

    

aaa:'box1',   box1 为类名   必须通过 data 中的变量传输
bbb:'box2',


    
    
    
    
  

• 修饰符

  // 可以阻止form表单的 默认提交 请求 执行 mySubmit 事件
  
  @click.prevent="mySubmit"   
  

v-model='function' 双向数据绑定

     
    

       输入的值 :  {{ message }}
    
    

• 双向 数据绑定装饰 修饰符
  • v-model.number -->> 只能 输入 数字
    
  • v-model.number.lazy -->> 懒加载 输入完毕 离开时 加载

自定义指令

• 遇到一些复杂的需求，vue提供的指令不能完美的处理，有时候我们需要自定义指令，针对这一需求，vue提供了自定义指令，如下所示：

axios 上传文件:

// 通过file来选择需要上传的文件
 
  
var formData = new FormData() // 声明一个FormData对象
var formData = new window.FormData() // vue 中使用 window.FormData(),否则会报 'FormData isn't definded'
// 'userfile' 这个名字要和后台获取文件的名字一样;
//'userfile'是formData这个对象的键名
formData.append('userfile', document.querySelector('input[type=file]').files[0]) 

var options = {  // 设置axios的参数
         url: '请求地址',
         data: formData,
         method: 'post',
         headers: { 
          'Content-Type': 'multipart/form-data'
         }
    }

this.axios(options).then((res) => {}) // 发送请求

ES6 中 的常用语法

• var let const

全局变量   有变量提升的的问题
var a = '11' 

局部变量   有作用域的变量
let a  = '11'

一般定义常量   不可以改变 值
const AA = '121' 

• 模板字符串

  ​ 用 `` 反引号 在 js 中 写html 便签

• 单体函数 foo( ){ }

  // 单体函数就是指在Object里面定义普通函数的简写形式
  let obj = {
    foo:function () {
        // 原始函数
          },
    foo(){
        // 简写 形式
        console.log(this);
        },
  };

• 箭头函数 () => {};

  function Vue(obj) {
    this.foo = obj.foo;
    this.bar = obj.bar;
    this.foo();
    obj.foo();
    this.bar();
    obj.bar()
  }
  
  let obj = {
    username: 'zhangziyi',
    foo(){
        console.log(this);
    },
    // 箭头函数的this指向调用该函数的对象的父作用域
    bar: () => {
        console.log(this);
    }
  };
  
  // 普通函数的this指向调用该函数的对象
  // obj.foo();
  
  new Vue(obj);
  

todoList

    
    
    





    

        

            

                

                    
输入
                    

                        

                            

                                
输入:>>>{{ message }}
                                

                                    
                                
                                提交
                            
                        
                    
                    

                        

                            

                                
Left
                                

                                    

                                        

                                            {{item}}
                                        
                                    
                                
                            
                        
                        

                            

                                
Right
                                

                                    

                                        

                                            {{item}}
                                        
                                    
                                
                            
                        
                    
                
            
        
    

    

    

组件

组件注意事项:

1. is标识 ==》 table里面只认识tr标签不认识你写的组件
2. 组件中的data必须是函数！！！保证每个组件内部的数据都是独立的！

• 实现页面布局的vue的一个非常重要的核心功能

  组件只是vue里面的概念，浏览器没有这个概念

  组件里面肯定会包含标签

  组件里面可能会包含数据

  组件里面可能还有事件

  综上：组件其实就是一个可复用的Vue实例

• 声子=》挂子=>用子

1. 全局组件

   注册全局组件

   Vue.component(组件的名字,{组件实例})

2. 局部组件

   分开的 写法

   1. 创建局部组件

   let myHeader = {
       template: `
        
   
            
   这是首页
        
       `
   }

   1. 在vue 实例中 注册 组件

   new Vue({
       el: "#app",
       components: {
        // key是自定义的名称，value是创建的局部组件名称
           "my-header": myHeader,
       }
   })

   1. 在Vue根实例的作用域中使用局部组件

   组件间的使用

   
   子组件
   let myHeader = {
       template: `
        
   
            
   我是导航栏
        
       `
   }
   
   
   父组件
   let Container = {
    // 使用子组件
       template: `
        
   
            
        
       `,
       // 注册子组件
       components: {
           "my-header": myHeader
       }
   }
   
   
   new Vue({
       el: "#app",
       components: {
           "container": Container
       }
   })

父子 组件之间的数据传递

1. 父-->子 之间的 传递

   • 在父组件中通过v-bind:变量名='变量' 传递数据

     在子组件中通过 props 声明需要被接收的参数

2. 子--> 父 组件之间的数据传递

   • 抛出的事件（不推荐直接在组件里修改根实例的数据）

     子组件中通过 $emit('自定义事件名') 向外抛出自定义事件

     父组件中用过 v-on:自定义事件名=动作函数监听子组件抛出的事件

   具名的slot插槽

   用在组件中，有一些特殊的需求

   定义组件

   let AlertBox = {
   template: `
   
       
    Error! 
       
   ...
       
    出错了！！
   `,  // 必须包含在闭合标签那种
   }

   注册组件

   let APP = new Vue({
     el: '#app',
     compoments: {
       "alert-box": AlertBox,
     }
   })

   使用组件