Vue学习记录

[toc]

邂逅Vue.js

1.编程范式
- 命令式编程 如jquery
- 声明式编程 只需要生命需要显示的东西就可以

2. 创建Vue实例的时候，传入了一个对象options，这个opentions中包含了
   - el: 类型：string|HTMLElement 作用：决定之后Vue实例会管理哪一个DOM
   - data: 类型：Object|Function(组件中data必须是一个函数) 作用：Vue实例对应的数据对象
   - methods: 类型：{[key: string] : Function} 作用： 定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。

Vue基础语法

1. 前端代码缩进最好两个空格，多数大型开源框架都是两个

模板语法

Mustache语法（{{}}）

1. 可以写变量，也可以写简单的表达式

   {{message}}
   {{firstName + ' ' + lastName}}
   

指令

1. v-once
   - 该指令后面不需要跟任何表达式
   - 该指令表示元素和组件只渲染一次，不会随数据的改变而改变

   {{message}}
   
   

2. v-html
   - 该指令后面往往会跟上一个string类型
   - 会将string的html解析出来并且进行渲染

   
   data:{
       url: '百度一下'
   }
   

3. v-text

   {{message}}
   
   

   一般不用，不够灵活，会覆盖innerHTML内容
4. v-pre , 原生显示

   {{message}}
   

5. v-cloak
   - 在vue解析之前，div中有一个属性v-cloak
   - 在vue解析之后，div中的v-cloak属性被删除
   - 主要是用来防止界面上显示未渲染的代码

    
   {{message}}
   
    
    
   

6. v-bind
   - 动态绑定属性
   - 缩写： ':'
   - 预期： any(with argument) | Object(without argument)
   - 参数： attrOrProp(optional)

   
   语法糖写法
   
   
   
   methods:{
    getClass: function(){
       return {class1: showClass1, class2: showClass2}
    }
   }
   

7. v-bind:style
   - 动态绑定样式
   -
   
   -

计算属性

1. 数据展示前需要进行处理时使用。

   computed:{
       fullName: function(){
           return this.firstName + this.lastName
           }
   }
   

2. 计算属性会缓存，多次调用只会计算一次，方法不会缓存
3. 计算属性的getter和setter(set不常用)

   computed: {
       fullName: {
           get: function(){
               return this.firstName + ' ' + this.lastName
           },
           set： function(name){
               this.fullName = name
           }
       }
   }
   

对象字面量增强写法

 // 普通写法
 name = 'aaa'
 age = 18
const obj = {
    name: name,
    age: age
}
// 增强写法
const obj = {
    name,
    age
}

事件监听

1. v-on
   - 作用： 绑定事件监听器
   - 缩写： @
   - 预期： Function| Inline Statement | Object
   - 参数： event
2. 参数传递
   - 如果方法不需要额外参数，那么方法后的()可以不添加
   - 如果方法本身有参数，但是调用的时候没有传递，省略小括号，默认会将event参数传递进去
   - 如果同时需要传入某个参数，同时需要event，可以通过$event传入事件

       默认传过去event
      默认传过去undefined
   
   methods:{
       btnClick(aaa){
           console.log(aaa)
       },
       btn1Click(aaa, event){
           console.log(aaa)
       }
   }
   

3. v-on修饰符的使用
   - .stop 阻止冒泡

       - prevent   阻止默认事件
   

   
   
   # 阻止默认提交事件
   

     - .{keyCode | keyAlias}   只当事件是从特定键触发时才触发回调
     - .native   监听根元素的原生事件
     - .once  只触发一次回调
   

条件判断

1. v-if
2. v-else-if
3. v-else
4. vue内部会复用dom元素，如果不想让复用，可以加个key
5. v-show
   - v-show dom会渲染，使用样式决定是否显示
   - v-if 根据条件判断是否要渲染
   - 频繁切换使用v-show

循环

1. v-for遍历
   官方推荐在使用v-for遍历时，给对应的元素或组件加上一个:key属性
   为什么要使用key属性？
   假设有一个数组，现在想在数组中间插入一个元素，如果没有key，则插入位置以及后面的位置都需要改变，而如果有key，则会先使用key与元素对应起来，插入时只修改插入位置即可。key必须与item一一对应，所以不能用index。

   
   
   遍历时key的作用

• 使用key给每一个节点做一个唯一标识
• Diff算法可以正确的识别此节点
• 找到正确的位置插入新的节点
  ==key的作用主要是为了更高效的更新虚拟DOM==

2. 哪些数组的方法是响应式的？
   - push()： 可以添加多个 arr.push('aaa', 'bbb', 'ccc')
   - pop(): 删除数组的最后一个元素
   - shift() ： 删除数组第一个元素
   - unshift()： 在数组前面添加元素， 可以添加多个
   - sort()：
   - reverse()
   - splice() : 删除元素/插入元素/替换元素 会影响原始数组
   第一个参数start，表示开始操作的索引
   删除元素： 第二个参数表示要删除几个元素，如果没有传，表示删除所有
   替换元素： 第二个参数表示要替换的个数，后面参数表示要替换的元素
   插入元素： 第二个参数为0，后面参数为添加的元素

   arr = [1,2,3,4,5]
   arr.splice(1)  => [2,3,4,5]
   arr = [1,2,3,4,5]
   arr.splice(1,2)⇒ [2,3]
   arr = [1,2,3,4,5]
   arr.splice(1,2,'m','n', 'o') => [1, "m", "n", "o", 4, 5]
   arr = [1,2,3,4,5]
   arr.splice(1,0,'m', 'n')==> [1, "m", "n", 2, 3, 4, 5]
   

==通过数组索引直接修改元素不是响应式的， 直接修改界面不会更新==
- Vue.set(obj, index, newValue)
Vue.set(arr, 0, ''a)

  
  
  


  

    
购物车为空
    

      

        
书籍名称
        
出版日期
        
价格
        
购买数量
        
操作
      
      

        
{{book.bookName}}
        
{{book.publishDate}}
        
{{book.price | transPrice}} 
        
+{{book.number}}-
        
移除
      
    
    
总价：￥{{totalPrice | transPrice}}
  

3. 高阶函数
   - filter() : filter回调函数必须返回一个bool值
   - map()
   - reduce(): 对数组中所有内容进行汇总

   arr = [1,2,3,4]
   arr.reduce(function(preValue, n){
       return preValue + n;
   }, 0)
   0 表示preValue的初始值， n表示每次遍历时的元素
   

4. 表单绑定v-model
   - v-model其实是一个语法糖，他的背后本质包含两个操作
   - v-bind绑定一个value属性
   - v-on指令给当前元素绑定input事件

   
   相当于
   
   相当于
   
   methods:{
       changeMessage(event){
           this.message = event.target.value;
       }
   }
   

5. v-model结合radio

     
       男
     
     
       女
     
     data{
       sex: '男'
     }
   

6. v-model结合checkbox

         
   
   同意协议
   
   下一步
   data{
       isAgree: false
   }
   
   
   篮球
   足球
   乒乓球
   羽毛球
   
   data{
       hobbies: []
   }
   

7. v-select :单选（字符串） 多选（数组）
8. v-model 修饰符
   - .lazy 敲回车或失去焦点才同步数据
   - .number
   - .trim

组件化开发

组件注册步骤

1. 创建组件构造器对象
2. 注册组件
3. 使用组件

   const cpn = Vue.extend({
       template: `
   hhhhh
   `
   })
   Vue.components('my-cpn', cpn)
   

4. 全局组件和局部组件
   - 全局组件可以在多个Vue实例中使用
   - 局部组件

   const app = new Vue({
       el: '#app',
       data:{}
       conponents: {
           cpn: cpn     #局部组件
       }
   }
   

5. 父组件和子组件
6. 注册组件语法糖, 主要时省去了调用Vue.extend()的步骤，而是直接可以使用一个对象来代替

   // 全局
   Vue.components('cpn', {
       template: `
   hhhhh
   `
   })
   

组件间的通信

父子组件的通信

1. 通过props向子组件传递数据

==props里面如果是驼峰式写法，在v-bind用的时候要使用-连接==
cMovies ---> :c-movies="movies"

2. 通过事件向父组件发送消息
   • 在子组件中，通过$emit()来触发事件
   • 在父组件中，通过v-on来监听子组件事件

父子组件的访问方式

1. 父组件访问子组件：使用$children或$refs
   this.$children 是一个数组，包含了所有的子组件

   
   在父组件中使用this.$refs.aaa获取对应子组件
   

2. 子组件访问父组件：使用$parent
3. 访问根组件$root

插槽(slot)

• 组件的插槽是为了让封装的组件更加有扩展性
• 让使用者可以决定组件内部的一些内容到底展示什么

1. 插槽的基本使用
   
2. 插槽的默认值
   按钮
3. 如果有多个值，同时放到组件中替换，一起作为替换元素

具名插槽

作用域插槽

父组件替换插槽的标签，但是内容由子组件来提供

模块化开发

模块化有两个核心：导出和导入
CommonJs的导出

moduleA.exports = {
     flag: true,
     sum(a,b){
        return a + b
     }
}

CommonJS的导入

let {flag, sum} = require(‘moduleA’)

webpack入门

webpack使用

Vue Cli详解

安装

npm install -g @vue/cli

初始化项目

• Vue cli3 vue create projectName
• 兼容Vue cli2
  npm install @vue/cli-init -g
vue init webpack projectName

Vue CLI2使用

vue init webpack vuecli2test
输入上述命令后有以下配置：

• Project name : 项目名称，不能包含大写
• Project description
• Author: 作者信息，默认会从git中读取
• Vue build : runtime + complier和runtime-only
• Install vue-router : 是否安装路由
• 其他不重要的
  chrome使用v8引擎直接将js代码转换成二进制文件，所以运行速度较快
  node环境可以直接执行js文件
  node test.js
  static文件夹和assets文件夹的区别？
  都是存放静态文件的，assets中的图片会根据设置的limits，将大于的使用hash重命名后放到dist下对应文件夹中，小于的转换成base64格式直接显示。而static中的文件，webpack不会进行处理，会原样显示。

runtime+complier和runtime-only的区别

image-20201128195831819.png

//runtime+complier
import App from './App'
new Vue({
    el: '#app',
    template: ''
})
template-->ast(抽象语法树)-->render-->virtualDom-->realDom
//runtime-only (性能更高，代码更少(少了complier那部分))
new Vue({
    el: '#app',
    render: h=>h(App)
})
h实际是createElement函数
普通用法： createElement(标签, {属性}, [内容])
createElement('h2', {class: 'box', ['hello world']})
也可以直接传入组件： createElement(App)
render-->virtualDom-->realDom
runtime-only模式不包含template，那么app中的template是如何处理的？使用vue-template-complier将template编译成render函数后才使用

vue build过程

image-20201128211644528.png

Vue Cli3

vue-cli3和vue-cli2的区别

• vue-cli3是基于webpack4打造，vue-cli2还是webpack3
• vue-cli3的设计原则是“0配置”，移除了配置文件目录下的build和config等目录
• vue-cli3提供vue ui命令，提供了可视化配置，更加人性化
• 移除了static文件夹，新增了public文件夹，并且index.html移动到public中

Vue Cli3修改配置的方法

1. vue ui启动一个本地服务,在界面上修改

2. node_modules下面的@vue/webpack.config.js

3. 在当前项目下创建一个文件，vue.config.js

   module.exports = {
   }
   

vue-router

Vuex详解

网络封装