Vue2-基础4

发表于 2022-06-28 | 分类于前端， Vue2 |

字数统计: 6.5k

Vue2基础4

修改默认配置

通过vue inspect > output.js可以查看Vue脚手架的默认配置

创建vue.config.js

可选配置项可以去官网查看

module.exports = {
    pages: {
        index: {
            // page 的入口
            entry: 'src/main.js'
        }
    },
    lintOnSave: false
}

ref属性

<template>
 <div>
  <button ref="btn" @click="showDOM">点我输出按钮的DOM元素和School的Vc对象</button>
  <School ref="sch"/>
 </div>
</template>

<script>
 import School from './components/School'

 export default {
  name:'App',
  components:{School},
  methods: {
   showDOM(){
    console.log(this.$refs.btn) //真实DOM元素
    console.log(this.$refs.sch) //School组件的实例对象（vc）
   }
  }
 }
</script>

被用来给元素或子组件注册引用信息（id的替代者）

应用在html标签上获取的是真实DOM元素

应用在组件标签上是组件实例对象（vc）

props配置项

父组件想给子组件传数据，即可通过props配置项来实现

Student.vue

<template>
	<div>
        <h2>学生姓名：{{name}}</h2>
        <h2>学生性别：{{sex}}</h2>
        <h2>学生年龄：{{age}}</h2>
    </div>
</template>

<script>
    export default {
        name:'Student',
        //简单声明接收
        props:['name','age','sex'] 
    }
</script>

使用该组件

1	<School name='zs' age=18 sex='男'/>

我们来观察一下props接收到的数据放在了哪里

可以看到，使用props接收到的数据都被放在了vc对象上

我们还发现_data中并没有这些数据

props接收的数据不可修改

1	<button @click="updateAge">尝试修改收到的年龄</button>

methods: {
	updateAge(){
		this.age++
	}
}

如果一定想修改，则需要使用data配置一下数据做个中转

并且展示的时候也使用data中中转的那个变量

1	<h2>学生年龄：{{myAge}}</h2>

data(){
  return {
    myAge: this.age
  }
}

接收的同时对数据进行类型限制

如果要对类型做限制，需要通过以下写法

props:{
    name:String,
    age:Number,
	sex:String
}

传入数据

1	<Student name="芝麻" :age="19" sex="男"/>

如果是这样传入的

1	<Student name="芝麻" age="19" sex="男"/>

接收的同时对数据：进行类型限制+默认值的指定+必要性的限制

props:{
	name:{
		type:String, //name的类型是字符串
		required:true, //必要的，父亲组件一定要传该数据
	},
	age:{
		type:Number,
		default:99 //默认值
	},
	sex:{
		type:String,
		required:true
	}
}

mixin混入

就是子组件可以共享mixin中配置的配置项

达到全局共享的效果，达到复用的目的，减少代码重复性

混合文件就是我们在构造vc的时候传入的配置项

只不过单独将其拿了出来

export const hooks = {
    created(){
        console.log('数据代理、数据劫持已完成')
    },
    mounted() {
        console.log('挂载完成！')
    }
}

export const getData = {
    data() {
        return {
            x:100,
            y:200
        }
    },
}

全局混入（全局配置）：Vue.mixin(xxx)

局部混入（配置项）：mixin: ['aaa']

注意点：

1、钩子以外的配置项
    如果混合中有，则以配置项中优先级高
    如果混合中没有，则整合进配置项中
2、将两者的生命周期组合在一起
    先执行自己的钩子，然后执行mixin中的钩子

插件

我们在平时生活工作中，一款好用的插件可以极大地提高我们的生产效率，在Vue中也有这样的插件

我们来定义一个插件试一试

export default {
    //...代表使用插件的时候传入的参数
   install(Vue,...){
      //全局过滤器
      Vue.filter('filterName',function(value){
          return ...
      })

      //定义全局指令
      Vue.directive('directiveName',{
         //指令与元素成功绑定时
         bind(element,binding){
             //...
         },
         //指令所在元素被插入页面时
         inserted(element,binding){
             //...
         },
         //指令所在的模板被重新解析时
         update(element,binding){
             //...
         }
      })

      //定义混入
      Vue.mixin({
          //...
      })

      //给Vue原型上添加一个方法（vm和vc就都能用了）
      Vue.prototype.hello = ()=>{alert('你好啊')}
   }
}

在main.js中使用

1
2
3

import plugins from './plugins'

Vue.use(plugins)

style标签

scoped属性

<style scoped>
在这个里面写的css样式只会作用于该文件的结构
    如果不加scoped则会作用于所有符合条件的html结构
</style>

lang属性

<style scoped lang="scss">
    如果你想使用Less或者Scss来写css则需要下载编译工具
    npm i less-loader
    npm i scss-loader
</style>

Todos案例

提前声明：此案例会循序渐进地讲到很多知识点，请务必不要跳过

静态页面代码

App.vue

<template>
  <div class="container">
      <div>
         <h2 style="text-align: center">Todos</h2>
         <input class="task" type="text" placeholder="请输入待办事项，回车确认添加" v-model="task">
      </div>
      <ul class="todos">
        <li class="todo">
          <div>
            <input type="checkbox">
            <span>敲代码</span>
          </div>
          <div class="buttons">
            <button class="delete" @click="deleteSelf(todo.id)">删除</button>
            <button class="update" @click="updateSelf(todo.id)">修改</button>
          </div>
        </li>
        <li class="todo">
          <div>
            <input type="checkbox">
            <span>睡觉</span>
          </div>
          <div class="buttons">
            <button class="delete" @click="deleteSelf(todo.id)">删除</button>
            <button class="update" @click="updateSelf(todo.id)">修改</button>
          </div>
        </li>
        <li class="todo">
          <div>
            <input type="checkbox">
            <span>吃饭</span>
          </div>
          <div class="buttons">
            <button class="delete" @click="deleteSelf(todo.id)">删除</button>
            <button class="update" @click="updateSelf(todo.id)">修改</button>
          </div>
        </li>
      </ul>
      <div class="footer">
        <input type="checkbox" style="margin-right: 10px"><span>已经完成0/全部3</span>
      </div>
  </div>
</template>
<script>
export default {
  name: 'App',
  data(){
    return {

    }
  },
}
</script>
<style scoped>
.todos {
  list-style: none;
  padding: 0;
  border: 1px solid #ccc;
}
.todo {
  height: 50px;
  padding: 0 0 0 20px;
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.task {
  width: 100%;
  height: 40px;
  padding-left: 20px;
  box-sizing: border-box
}
.container {
  border: 1px solid black;
  padding: 10px;
  width: 30%;
  margin: 40px auto
}
.buttons {
  margin-right: 20px;
  width: 20%;
  display: none;
  justify-content: space-between;
}
.todo:hover .buttons {
  display: flex;
}
.todo:hover {
  background: #4dd9d5;
}
.delete {
  background: red;
  color: #CCCCCC;
  font-size: 10px;
  cursor: pointer;
}
.update {
  background: #2e6da4;
  color: #CCCCCC;
  font-size: 10px;
  cursor: pointer;
}
</style>

动态数据

现在将数据放到data中，再补充一点逻辑吧

接下来就不写style标签啦

<template>
  <div class="container">
      <div>
        <h2 style="text-align: center">Todos</h2>
        <input class="task" type="text" placeholder="请输入待办事项，回车确认添加" v-model="task" @keydown.enter="insertNewTask">
      </div>
      <ul class="todos">
        <li class="todo" v-for="todo in todos" :key="todo.id">
          <div>
            <input type="checkbox" v-model="todo.done">
            <span>{{ todo.content }}</span>
          </div>
          <div class="buttons">
            <button class="delete" @click="deleteSelf(todo.id)">删除</button>
            <button class="update" @click="updateSelf(todo.id)">修改</button>
          </div>
        </li>
      </ul>
      <div class="footer">
        <input type="checkbox" style="margin-right: 10px"><span>已经完成{{hasDone}}/全部{{totalSum}}</span>
      </div>
    </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      task: '',
      todos: [
        {id: '002',content: '睡觉',done: true},
        {id: '001',content: '打代码',done: true},
        {id: '003',content: '吃饭',done: false},
        {id: '004',content: '刷抖音',done: true},
      ],
      hasDone: 0,
    }
  },
  mounted() {
    this.hasDone = this.todos.filter(t=>t.done).length;
  },
  methods:{
    deleteSelf(id){

    },
    updateSelf(id){

    },
    insertNewTask(){

    }
  },
  computed: {
    totalSum(){
      return this.todos.length;
    }
  }
}
</script>

抽离组件

App作为王者居然写了这么多结构代码，哪里有什么组件化的思想，所以我们抽离出一个个组件

Top.vue

<template>
  <div>
    <h2 style="text-align: center">Todos</h2>
    <input class="task" type="text" placeholder="请输入待办事项，回车确认添加" v-model="task" @keydown.enter="insertNewTask">
  </div>
</template>

<script>
export default {
  name: "Top",
  data(){
    return {
      task: '',
    }
  },
  methods:{
    insertNewTask(){

    }
  }
}
</script>

<style scoped>
.task {
  width: 100%;
  height: 40px;
  padding-left: 20px;
  box-sizing: border-box
}
</style>

ShowTodosContainer.vue

<template>
  <ul class="todos">
    <li class="todo" v-for="todo in todos" :key="todo.id" @click="choose(todo.id)">
      <div>
        <input type="checkbox" v-model="todo.done">
        <span>{{ todo.content }}</span>
      </div>
      <div class="buttons">
        <button class="delete" @click="deleteSelf(todo.id)">删除</button>
        <button class="update" @click="updateSelf(todo.id)">修改</button>
      </div>
    </li>
  </ul>
</template>

<script>
export default {
  name: "ShowTodosContainer",
  props: ['todos'],
  data(){
    return {
      todos: this.todos
    }
  },
  methods:{
    deleteSelf(id){

    },
    updateSelf(id){

    },
    choose(id){
      this.todos.forEach(t=>{
        if(t.id===id){
          t.done=!t.done;
        }
      })
    },
  }
}
</script>

<style scoped>
.todos {
  list-style: none;
  padding: 0;
  border: 1px solid #ccc;
}
.todo {
  height: 50px;
  padding: 0 0 0 20px;
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.buttons {
  margin-right: 20px;
  width: 20%;
  display: none;
  justify-content: space-between;
}
.todo:hover .buttons {
  display: flex;
}
.todo:hover {
  background: #4dd9d5;
}

.delete {
  background: red;
  color: #CCCCCC;
  font-size: 10px;
  cursor: pointer;
}
.update {
  background: #2e6da4;
  color: #CCCCCC;
  font-size: 10px;
  cursor: pointer;
}
</style>

这里补充一个知识点

对于<input type="checkbox">
1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）

2.配置input的value属性:
      (1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
      (2)v-model的初始值是数组，那么收集的的就是value组成的数组

PageFooter.vue

<template>
  <div class="footer">
    <div>
      <input type="checkbox" style="margin-right: 10px" v-model="allHasDone">
      <span>已经完成{{hasDone}}/全部{{totalSum}}</span>
    </div>
    <button class="deleteAll" @click="deleteAllTodos">
      删除所有代办
    </button>
  </div>
</template>

<script>
export default {
  name: "PageFooter",
  props: ['todos'],
  data(){
    return {
      allHasDone: false
    }
  },
  computed: {
    totalSum(){
      return this.todos.length;
    },
    hasDone(){
      let length = this.todos.filter(t=>t.done).length;
      this.allHasDone = length === this.todos.length;
      return length;
    },
  },
  methods: {
	deleteAllTodos(){

    }
  }
}
</script>

<style scoped>
.footer {
  display: flex;
  justify-content: space-between;
}
.deleteAll {
  background: red;
  height: 30px;
  width: 200px;
  cursor:pointer;
  color: #4dd9d5
}
</style>

实现所有功能

插入新代办

insertNewTask(){
  if(this.task === ''){
    return alert('请不要输入空的代办！')
  }
  this.todos.push({
    id:nanoid(),
    content: this.task,
    hasDone: false
  })
  this.task=''
}

删除单个代办

1
2
3

deleteSelf(id){
  this.todoList.splice(0,this.todoList.length,...this.todoList.filter(t=>t.id!==id));
},

删除所有代办

1
2
3

deleteAllTodos(){
  this.todoList.splice(0,this.totalSum,...this.todoList.filter(t=>!t.done))
}

勾选

1	<input type="checkbox" style="margin-right: 10px" v-model="allHasDone" @click="chooseAll">

1
2
3

chooseAll(){
  this.todoList.forEach(t=>t.done=!this.allHasDone);
}

注意点：先处理点击事件，然后数据才更新，所以要取反

更新代办

这个有点麻烦，需要再添加一个组件，使用动态样式来控制其显示

UpdateDialog.vue

<template>
  <div class="dialog":class="{'clear':showDialog}" @click.self="close">
    <div class="form">
      <h2>请修改代办</h2>
      <span class="close" @click="close">X</span>
      <input type="text" v-model="updatedTaskContent">
      <button style="margin-right: 20px" @click="updateTask">
        修改
      </button>
      <button @click="close">
        取消
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: "UpdateDialog",
  props: ['task','showDialog'],
  data(){
    return {
      updatedTaskContent: this.task.content,
      propTask: this.task
    }
  },
  methods:{
    close(){
      this.$emit('closeDialog')
    },
    updateTask(){
      this.propTask.content=this.updatedTaskContent
    }
  }
}
</script>

<style scoped>
.dialog {
  position: absolute;
  display: none;
  top: 0px;
  bottom: 0;
  left: 0px;
  right: 0px;
  background: rgba(0,0,0,0.2);
}
input {
  width: 400px;
  margin-bottom: 20px;
}
.form {
  position: relative;
  width: 30%;
  height: 300px;
  margin: 40px auto;
  background: beige;
  padding: 20px;
}
.close {
  display: block;
  position: absolute;
  top: -10px;
  right: 0px;
  cursor: pointer;
}

.clear {
  display: block;
}
</style>

这里使用的自定义事件

我在使用该组件的时候传入一个函数，然后组件内部就可以使用this.$emit('自定义事件名')来调用该事件

1	<UpdateDialog :showDialog="showUpdateDialog" :task="choosedTask" @closeDialog="closeDialog"/>

这个如果这样写会产生一个问题，就是我的task确实是动态传的，但是因为我可能会取消本次更新操作

所以我不可以这样写，这样写的话，取消按钮就是一个小丑

1	<input type="text" v-model="task.content">

所以就必须得先存一份传入的值是吧，所以就应该像我刚刚那么写

但是你会发现还是有问题，检查之后发现是我存储的数据是固定在第一次传入的数据，可是我什么时候改变data中的数据呢？

监视属性

我们监视一下task，当其发生了改变，将其覆盖data中的数据

watch:{
  task(){
    this.updatedTaskContent=this.task.content;
    this.propTask = this.task;
  }
}

使用v-if配合使用

<UpdateDialog v-if="JSON.stringify(choosedTask)!=='{}'"
              :showDialog="showUpdateDialog"
              :task="choosedTask"
              @closeDialog="closeDialog"/>

如果使用这种方法的话，我在closeDialog中需要将choosedTask赋值为空对象

自动获取焦点

1	<input ref="input" type="text" v-model="updatedTaskContent" @keyup.enter="updateTask">

如果是监视属性实现的话

需要在监视方法中加入以下逻辑

task(){
    this.updatedTaskContent=this.task.content;
    this.propTask = this.task;
    //当页面解析完成之后再执行回调函数
    this.$nextTick(function (){
        this.$refs.input.focus();
    })
}

如果是v-if实现的话

需要再挂载的时候加入以下逻辑

mounted() {
  this.$nextTick(function (){
    console.log(this);
    this.$refs.input.focus();
  })
},

存储

在App中封装一个save函数，将其传递给子组件，在所有对数组造成更新的地方都使用this.$emit('save')调用该函数

1
2
3

save(){
    sessionStorage.setItem("todos",JSON.stringify(this.todos))
}

自定义事件

这个是相对于js中内置事件（keyup、click等等）的存在

js内置事件是给HTML元素使用的

自定义事件是给组件用的

主要作用就是实现父子组件之间的通信

绑定事件

<template>
<div class="app">
    <h1>学生姓名是:{{studentName}}</h1>

    <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
    <Teacher :getSchoolName="getSchoolName"/>

    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据 -->
    <Student @getStudentName="getStudentName"/>
</div>
</template>

<script>
    import Student from './components/Student'
    import School from './components/School'

    export default {
        name:'App',
        components:{School,Student},
        data() {
            return {
                studentName:''
            }
        },
        methods: {
            getTeacherName(name){
                console.log('App收到了学校名：',name)
            },
            getStudentName(name){
                console.log('App收到了学生名：',name)
                this.studentName = name
            }
        },
    }
</script>

<style scoped>
    .app{
        background-color: gray;
        padding: 5px;
    }
</style>

绑定事件的另一种方式

1
2
3

mount(){
    this.$refs.student.$on('getStudentName',this.getStudentName) //绑定自定义事件    
}

触发事件

School.vue

<template>
 <div class="school">
  <h2>学校名称：{{name}}</h2>
  <h2>学校地址：{{address}}</h2>
  <button @click="sendSchoolName">把学校名给App</button>
 </div>
</template>

<script>
 export default {
  name:'School',
  props:['getSchoolName'],
  data() {
   return {
    name:'尚硅谷',
    address:'北京',
   }
  },
  methods: {
   sendSchoolName(){
    this.getSchoolName(this.name)
   }
  },
 }
</script>

<style scoped>
 .school{
  background-color: skyblue;
  padding: 5px;
 }
</style>

Student.vue

<template>
 <div class="student">
  <h2>学生姓名：{{name}}</h2>
  <h2>学生性别：{{sex}}</h2>
  <button @click="sendStudentlName">把学生名给App</button>
 </div>
</template>

<script>
 export default {
  name:'Student',
  data() {
   return {
    name:'张三',
    sex:'男',
   }
  },
  methods: {
   sendStudentlName(){
    //触发Student组件实例身上的getStudentName事件
    this.$emit('getStudentName',this.name)
   }
  },
 }
</script>

<style lang="less" scoped>
 .student{
  background-color: pink;
  padding: 5px;
  margin-top: 30px;
 }
</style>

自定义事件的触发本质还是由html的原生事件触发后，我们自己决定触发哪一个自定义事件的

props实现和自定义事件实现的区别：props需要手动接收

解绑事件

1	this.$off('getStudentName') //解绑一个自定义事件

组件使用js原生事件

1	<Student ref="student" @click.native="show"/>

组件间通信

我们发现，组件之间的通信十分地重要，我们来理一理到现在我们学会了那些组件之间通信的方法，

1
2
3

1.props			===》适用于父给子传递数据和函数			===》特点：需要手动接收，并且传递地如果是数据则不能修改

2.自定义事件		===》适用于子给父传递数据			===》特点：使用$emit调用

我们发现如果两个兄弟之间想要通信

则只能将数据状态提升

将数据放到两者共同地父组件上面去

然后父组件使用上述方法向两者传递信息

如果嵌套层级比较多，则需要多次多层传递数据，会比较麻烦

难道就只能这样了吗？NO！接下来我会讲解三种强大的方法实现任意组件之间的通信

全局事件总线

全局事件总线其实十分简单，就是使用自定义事件来实现的

只不过我们事件全部绑定在vm对象上

安装全局事件总线

//创建vm
new Vue({
   el:'#app',
   render: h => h(App),
   beforeCreate() {
      Vue.prototype.$bus = this //安装全局事件总线
   },
})

不是一定要叫$bus

绑定事件

1
2
3

this.$bus.$on('hello',(data)=>{
 console.log('我是School组件，收到了数据',data)
})

触发事件

1	this.$bus.$emit('hello',this.name)

解绑事件

在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

1
2
3

beforeDestroy() {
    this.$bus.$off('hello')
}

原理：

1、自定义事件

2、VueComponent.prototype.__proto__ === Vue.prototype

消息订阅与发布

消息发布与订阅是一种思想，具体实现有很多种，我们这里选用pubsub-js库

1	npm i pubsub-js

订阅和取消订阅消息

即设置事件和回调

即需要数据的组件

mounted() {
    this.pubId = pubsub.subscribe('hello',(msgName,data)=>{
        console.log(this)
        // console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data)
    })
},
beforeDestroy() {
   pubsub.unsubscribe(this.pubId)
},

发布消息

即发送数据的组件

1	pubsub.publish('hello',666)

Vuex

它是专门在Vue中实现集中式状态管理的一个插件，对Vue应用中多个组件的共享状态进行集中式的管理，也是一种任意组件间通信的方式

状态其实指的就是数据

x是所有组件都需要使用的，所以我们将x存入Vuex中

Vuex原理图

此图摘自官网

我们可以看到该图被虚线包起来的部分即Vuex的三大重要的工具，Actions，Mutations，State

State译为状态，我们将需要共享的数据放入其中

Actions译为行为，我们会将对于数据的前置操作放入其中，比如条件判断，发出Ajax请求等

Mutations译为加工，我们真正对于数据的修改就是在这里进行的

Vue组件和Vuex工具之间的通信，有以下API，dispatch，commit，mutate，render

只有dispatch和commit是我们手动调用的，其他两个都是由Vuex帮我们调用的，无需我们操心

dispatch是我们在组件内调用的，发出对数据操作的请求

commit是我们在actions或者Vue组件中调用的，让其对数据做出真正的改变

接下来我们直接使用案例来驱动

求和案例

效果图

我们先将这个功能实现

因为还没有到组件共享的时候，所以现在先不使用Vuex

<template>
<div style="padding: 20px">
  <h2>当前求和为{{sum}}</h2>
  <div>
    <select name="step" id="stepSelect" v-model="step">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="add">+</button>
    <button @click="sub">-</button>
    <button @click="addOnCondition">当前为奇数再加</button>
    <button @click="addAfter">过一秒再加</button>
  </div>
</div>
</template>

<script>
export default {
  name: "Count",
  data(){
    return {
      sum: 0,
      step: 1
    }
  },
  methods:{
    add(){
      this.sum+=this.step;
    },
    sub(){
      this.sum-=this.step;
    },
    addOnCondition(){
      if(this.sum % 2){
        this.add();
      }
    },
    addAfter(){
      setTimeout(()=>{
        this.add();
      },1000);
    },
  }
}
</script>

<style scoped>
button {
  margin-left: 10px;
}
</style>

准备

接下来我们做些使用Vuex前的准备

创建store/index.js文件

import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)

export default new Vuex.Store({
    actions: {

    },
    mutations:{

    },
    state:{

    },
})

在main.js中引入该文件并并在创建vm的时候传入

import Vue from 'vue'
import App from './App.vue'
import store from "./store";
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store
}).$mount('#app')

使用

接下来我们新建一个组件ShowSum组件，该组件的功能就是用来展示Count组件中的sum，现在我们就使用Vuex来实现此功能

先将数据都交给Vuex管理

Count.vue

<template>
<div style="padding: 20px">
  <h2>当前求和为{{$store.state.sum}}</h2>
  <div>
    <select name="step" id="stepSelect" v-model="step">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="add">+</button>
    <button @click="sub">-</button>
    <button @click="addOnCondition">当前为奇数再加</button>
    <button @click="addAfter">过一秒再加</button>
  </div>
</div>
</template>

<script>
export default {
  name: "Count",
  data(){
    return {
      step: 1
    }
  },
  methods:{
    add(){
      this.$store.dispatch('add',this.step);
    },
    sub(){
      this.$store.dispatch('sub',this.step)
    },
    addOnCondition(){
      this.$store.dispatch('addOnCondition',this.step)
    },
    addAfter(){
      this.$store.dispatch('addAfter',this.step)
    },
  }
}
</script>

<style scoped>
button {
  margin-left: 10px;
}
</style>

store/index.js

import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)

export default new Vuex.Store({
    actions: {
        add(context,value){
            context.commit('INCREASE',value);
        },
        sub(context,value){
            context.commit('DECREASE',value)
        },
        addOnCondition(context,value){
            if(value%2!==0){
                context.commit('INCREASE',value)
            }
        },
        addAfter(context,value){
            setTimeout(()=>{
                context.commit('INCREASE',value)
            },1000);
        },
    },
    mutations:{
        INCREASE(state,value){
            state.sum+=value;
        },
        DECREASE(state,value){
            state.sum-=value;
        }
    },
    state:{
        sum: 0,
    },
})

ShowSum.vue

<template>
<div style="padding: 20px">
  Count组件的sum值是：{{$store.state.sum}}
</div>
</template>

<script>
export default {
  name: "ShowSum"
}
</script>

当我们想要拿到state中的数据的时候，需要使用$store.state.xxx，十分麻烦，所以Vuex就为我们提供了工具mapState

<template>
<div style="padding: 20px">
  Count组件的sum值是：{{sum}}
</div>
</template>

<script>

import {mapState} from "vuex";

export default {
  name: "ShowSum",
  computed:{
    ...mapState(['sum'])
  }
}
</script>

拓展

1、getters的使用

getters我们可以理解为计算属性，就是将state中的数据加工后返回给用户

import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)

export default new Vuex.Store({
    actions: {

    },
    mutations:{

    },
    getters:{
        bigSum(state){
            return state.sum*10
        }
    },
    state:{

    },
})

2、mapGetters，mapActions，mapMutations工具

我们对于state中的数据可以使用mapState来将其方便地从Vuex中拿出来

对于getters、actions、mutations中的方法和数据我们也有对应的工具将其从Vuex中拿出

3、模块化开发

如果数据还有分类，我们就可以使用模块化开发

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

import teacher from "@/store/roles/teacher";
import student from "@/store/roles/student";
import enterprise from "@/store/roles/enterprise";
import log from '@/store/log'
import constant from "@/store/constant";
import common from "@/store/common";

const store = new Vuex.Store({
   modules: {
      log,
      constant,
      common,
      teacher,
      student,
      enterprise
   }
})

export default store;

使用模块化开发要注意一个点，就是在各个文件中需要开启命名空间

采用模块化开发使用后，mapXXX工具的使用方法就发生了改变，改变如下

...mapState('模块名',['state参数名']),
...mapGetters('模块名',['getters参数名']),
...mapActions('模块名',['actions函数名']),
...mapMutations('模块名',['mutations函数名']),

Vue2-基础3

发表于 2022-06-22 | 分类于前端， Vue2 |

字数统计: 5.5k

Vue2基础3

条件渲染

案例：如图

使用v-if

<div id="app">
    <span>现在的n值是{{n}}</span><br>
    <button @click="n++">点我n自增1</button><br>
    <button @click="n--">点我n自减1</button><br>
    <div v-if="n<3">我在n小于3的时候出现</div>
    <div v-else-if="n<7">我在n大于3小于7的时候出现</div>
    <div v-else>我在n>7的时候显示</div>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data(){
            return {
                n: 0
            }
        }

    })
</script>

使用v-show

<div id="app">
    <span>现在的n值是{{n}}</span><br>
    <button @click="n++">点我n自增1</button><br>
    <button @click="n--">点我n自减1</button><br>
    <div v-show="n<3">我在n小于3的时候出现</div>
    <div v-show="n>=3">我在n大于3的时候出现</div>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data(){
            return {
                n: 0
            }
        }

    })
</script>

区别

1.	v-show的原理是将被此指令标记的DOM元素的display属性设置为none，从而实现隐藏的效果
	v-if的原理是直接将此DOM元素直接从DOM树中删除
2.	如果这个元素会频繁切换显示隐藏，则使用v-show，不需要频繁创建节点
	如果这个元素不会频繁切换显示隐藏，只是在初始化的时候进行判断显示隐藏，则使用v-if

列表渲染

案例：将数组数据展示在页面上

data(){
    return {
        people: [
            {id: '001',name: '张三',age: 18,sex: '男'},
            {id: '002',name: '芝麻',age: 20,sex: '男'},
            {id: '003',name: '李四',age: 17,sex: '女'}
        ]
    }
}

使用v-for指令

<ul>
    <li v-for="item in people">
        {{item.name}}-{{item.age}}-{{item.sex}}
    </li>
</ul>

这样就完成了最基本的遍历，如果我需要得到每一次遍历的索引，只需要加入一个形参即可

<ul>
    <li v-for="(item,index) in people">
        {{index}}-{{item.name}}-{{item.age}}-{{item.sex}}
    </li>
</ul>

OK，这里其实遗漏了一个很重要很重要的一个属性key，这个key就是每一个节点的标识，所以可以直接使用数组每一个对象的id属性，或者是index

<ul>
    <!--<li v-for="(item,index) in people" :key="index">-->
    <li v-for="(item,index) in people" :key="item.id">
        {{index}}-{{item.name}}-{{item.age}}-{{item.sex}}
    </li>
</ul>

这个key是干嘛的呢？这就要好好扒一扒了，来吧，整活！

虚拟DOM的DIFF算法

啥啊这是，怎么从key直接跳到了什么虚拟DOM的DIFF算法了？走错片场了？

没有没有，要解释key就要先知道这个知识

现在的代码，很简单，就是比刚刚多了一个添加一个人的按钮和一个input框

<div id="app">
    <button @click.once="addPerson">添加一个人</button>
    <ul>
        <li v-for="(item,index) in people" :key="index">
            {{item.name}}-{{item.age}}-{{item.sex}}<input type="text" v-model="item.name">
        </li>
    </ul>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data(){
            return {
                people: [
                    {id: '001',name: '张三',age: 18,sex: '男'},
                    {id: '002',name: '芝麻',age: 20,sex: '男'},
                    {id: '003',name: '李四',age: 17,sex: '女'}
                ]
            }
        },
        methods: {
            addPerson(){
                this.people.unshift({id: '002',name: '小马',age: 21,sex: '男'})
            }
        }
    })
</script>

说明问题

然后点击添加一个人，你会发现一个很严重的错误，输入塌陷

加入:key="index"之后，一样出现这个错误

加入:key="item.id"之后，我们发现，这个错误就消失了

既然意识到了错误和解决错误的方法，那我们就来好好捋一下为什么，下面看图，图有点乱，请仔细观看

key为index的情况

解释几个点吧：

1、粉色的×表示匹配失败，不可以复用，蓝色的√表示匹配成功，可以复用

2、左下角的橙色的删除号表示该元素直接删除

3、下半部分的橙色箭头表示直接复用之前生成的真实DOM节点

4、左半部分的绿色箭头表示需要从虚拟节点重新生成真实DOM节点

key为id的情况

key不写的情况

如果不写key的话，Vue默认将index作为key，所以这种情况和key为index的情况是一样的

总结

1、key的作用
	作为每一个DOM虚拟节点的唯一性标识，当数据发生改变的时
	在Diff算法时，新虚拟DOM节点找到与自身key相同的旧虚拟DOM节点进行比较
	如果相同，则直接将旧虚拟DOM节点生成的真实DOM节点直接拿来复用
	如果不同，则将新虚拟DOM节点生成新真实DOM节点

2、用index做key会出现的问题
	(1)如果出现了对顺序改变的操作，则会导致旧真实DOM无法复用，效率降低
	(2)如果有输入类控件，则会出现输入塌陷的问题

3、如何设置key
	(1)如果只是展示，不会产生逆序插入，逆序删除等会影响顺序的情况，则使用index即可
	(2)如果会对顺序造成影响，则不能使用index作为key，而是需要使用唯一性标识

列表过滤

需求：输入姓关键词，回车出现名字中带有该关键词的

<div id="app">
    <input type="text" v-model="keyword" placeholder="请输入姓关键词" @keyup.enter="filterData">
    <ul>
        <li v-for="(item,index) in people" :key="index">
            {{item.name}}-{{item.age}}-{{item.sex}}<input type="text">
        </li>
    </ul>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data(){
            return {
                keyword: '',
                people: [
                    {id: '001',name: '张三',age: 18,sex: '男'},
                    {id: '002',name: '芝麻',age: 20,sex: '男'},
                    {id: '003',name: '李四',age: 17,sex: '女'},
                ],
                showData: people
            }
        },
        methods: {
            filterData(){
                this.showData = this.people.filter(p=>p.name.indexOf(this.keyword)!==-1);
            }
        }
    })
</script>

列表排序

<button @click="sortByAge">按年龄排序</button>

methods: {
    sortByAge(){
    	this.showData = this.people.sort((p1,p2)=>p2.age-p1.age);
    }
}

修改列表第一个人的信息(奏效)

<button @click="updatePerson">修改第一个人的年龄为20</button>

methods: {
    updatePerson(){
    	this.people[0].age = 20;
		this.showData = this.people;
    }
}

彻底修改列表一个人的信息(失效)

<button @click="updatePersonComplete">彻底修改一个人的信息</button>

updatePersonComplete(){
    this.people[0] = {id: '004',name: '老马',age: 18,sex: '女'};
	this.showData = this.people;
}

为什么这种方式修改数据，Vue没有检测到呢？

这就要讲到Vue监测数据变化(响应式)的原理了

响应式原理

之前我在讲数据代理的时候，其实已经讲到了Vue响应式的原理，现在我们来正式给小伙伴讲一讲

Vue监测数据分为两种，一种是数组，还有一种是对象。我们先从监测对象开始，然后再讲监测数组。

监测对象

前期准备

<div id="app">
    <div>姓名：{{name}}</div>
    <div>性别：{{sex}}</div>
    <div>年龄：{{age}}</div>
    <div>学校：{{school}}</div>
</div>
<script type="text/javascript">
    let data = {
        name: 'zhima',
        sex: '男',
        age: 19,
        hobbies: ['王者','原神','睡觉','干饭'],
        school: {
            name: '南京某高校',
            address: '南京'
        }
    }
    let vm = new Vue({
        el: '#app',
        data
    });
</script>

我们先来回顾一下数据代理是什么

先输出一下vm对象

我们在data中配置的对象先经过Vue加工变成Observer对象

然后将其放到vm对象上的_data属性中

然后将_data中的数据全部代理到vm对象上

让我们可以直接使用{{}}读取vm身上的属性

这就是数据代理

我们修改了vm身上的属性实际上修改的是_data中的数据 , 然后页面就更新成了修改后的新的数据

或者直接修改_data中的数据,页面也会更新为修改后的数据

这样看来,响应式数据的原理是在_data中.还记得我之前提到的数据劫持吗?

Vue的响应式就是通过数据劫持来实现的,而数据劫持又是通过Object.defineProperty实现的,_data的每一个属性都有一个setter函数,当_data中任何一个数据

发生了改变,都会走这个setter方法,那么在这个时候,我就可以执行一遍重新渲染页面的方法,从而使得页面数据更新

监测数组

我们先来观察一下_data中的hobbies数组的样子,我们发现它没有给每一个元素设置一个getter/setter,那它是怎么实现响应式的呢

这里就不绕弯了

Vue里面对于数组的监测是

通过包装数组方法,先对页面进行更新,然后再调用原生的数组上的方法对数组进行更改

有以下这几种

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

Vue中的push不是原生的push

所以只有当你使用以上这些方法的时候,Vue才会监测到,然后对页面进行更新,这就解释了先前的那个案例,直接将数组第一个元素替换的时候,Vue并没有监测到.

但如果数组元素是对象,它一样还是会有getter/setter

过滤器

功能：先将数据作出处理再将数据进行显示

案例：显示格式化后的时间

<div id="app">
    <div>
        时间戳：{{nowTime}}
    </div>
    <div>
        计算属性格式化后的时间是：{{fmtTime}}
    </div>
    <div>
        方法格式化后的时间是:{{getFmtTime()}}
    </div>
    <div>
        过滤器格式化后的时间：{{nowTime | timeFormatter}}
    </div>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data(){
            return {
                nowTime: Date.now()
            }
        },
        computed:{
            fmtTime() {
                return dayjs(this.nowTime).format('YYYY-MM-DD HH:mm:ss');
            }
        },
        methods: {
            getFmtTime(value) {
                return dayjs(value).format('YYYY-MM-DD HH:mm:ss');
            }
        },
        filters:{
            timeFormatter(value){
                return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
            }
        }
    })

</script>

以上这个过滤器叫局部过滤器，还有一种过滤器，叫全局过滤器

<div id="app">
    <div>
        <!--这里的过滤器第一个传入的参数永远是待处理的数据，这里传入的就直接是第二个参数第三个第四个参数-->
        过滤器格式化后的时间：{{nowTime | globalTimeFormatter('YYYY-MM-DD')}}
    </div>
</div>
<script type="text/javascript">
    //全局过滤器
    Vue.filter('globalTimeFormatter',(value,formatStr='YYYY-MM-DD HH:mm:ss')=>{
        return dayjs(value).format(formatStr);
    })
</script>

注意点：过滤器不是必要的，因为我们使用计算属性或者方法都可以实现，这只是一种方式

自定义指令

指令是什么？

指令就是v-on开头的一些语法，就是自己封装一些逻辑

需求1：定义一个v-big指令，会把绑定的数值放大10倍。

<div id="app">
    <h2>当前的n值是：<span v-text="n"></span> </h2>
    <h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
    <button @click="n++">点我n+1</button>
</div>
<script type="text/javascript">
    new Vue({
        el:'#app',
        data() {
            return {
                n: 1
            }
        },
        directives:{
            // big函数何时会被调用？
            // 1.指令与元素成功绑定时。
            // 2.指令所在的模板被重新解析时。
            big(element,binding){
                console.log('big',this) //注意此处的this是window
                element.innerText = binding.value * 10
            }
        }
    }
</script>

需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。

<div id="app">
    <input type="text" v-fbind:value="n">

</div>
<script type="text/javascript">

    new Vue({
        el:'#root',
        data() {
            return {
                n: 1
            }
        },
        directives:{
            fbind:{
                //指令与元素成功绑定时（一上来）
                bind(element,binding){
                    element.value = binding.value
                },
                //指令所在元素被插入页面时
                inserted(element,binding){
                    element.focus()
                },
                //指令所在的模板被重新解析时
                update(element,binding){
                    element.value = binding.value
                }
            }
        }
    }
</script>

这两个都是局部指令，我们来看看全局指令

 Vue.directive('fbind',{
   bind(element,binding){
      element.value = binding.value
   },
   inserted(element,binding){
      element.focus()
   },
   //指令所在的模板被重新解析时
   update(element,binding){
      element.value = binding.value
   }
})

注意点：

1
2
3

指令定义时不加v-，但使用时要加v-；

指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。

生命周期

定义：Vue中每一个生命周期都对应着一个钩子（函数），当Vue走到该生命周期阶段的时候，就会自己调用该钩子。

黄色的标签是我加的注释，其他的流程都是从Vue官网查看的

最常用的就是mounted和destoryed

一般在mounted钩子中初始化数据（Ajax请求），在destoryed钩子中删除定时器，解绑自定义事件等收尾工作

组件

模块化的概念

如果所有的js代码都在一个文件中，那么后期维护和更新会非常吃力。所以就有了模块化的概念了，这里可以看看我之前写的JavaScript的模块化规范

组件的定义

用来实现局部功能效果的所有代码和资源的集合（HTML、CSS、JavaScript）

传统开发

我们先来看看传统开发的结构

其存在的问题是

1、代码复用率不高

2、依赖关系混乱，后期难以维护

组件开发

我们来看看官网给我们的图

最上层的就是vm对象，它管理所有的组件对象

在Vue中有两种使用组件化开发的思路

1、非单文件组件

2、单文件组件

非单文件组件

定义组件

const hello = Vue.extend({
   template:`
      <div>  
         <h2>你好啊！{{name}}</h2>
      </div>
   `,
   data(){
      return {
         name:'Tom'
      }
   }
})

这里的data配置项我们说过可以写成两种形式

1、函数式

2、对象式

到了组件开发，这个data配置项就必须是函数式

避免组件被复用时，数据存在引用关系。

注册组件

局部注册

new Vue({
   el:'#app',
   //第二步：注册组件（局部注册）
   components:{
       hello
   }
})

全局注册

1	Vue.component('hello',hello)

使用组件

1
2
3

<div id="app">
    <hello></hello>
</div>

注意点：

1.关于组件名:
    一个单词组成：
        第一种写法(首字母小写)：school
        第二种写法(首字母大写)：School
    多个单词组成：
        第一种写法(kebab-case命名)：my-school
        第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
    备注：
        (1)组件名尽可能回避HTML中已有的元素名称
        (2)可以使用name配置项指定组件在开发者工具中呈现的名字

2.关于组件标签:
    第一种写法：<school></school>
    第二种写法：<school/>不用使用脚手架时，<school/>会导致后续组件不能渲染。

3.关于VueComponent：
	school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。

	我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。

4.关于this指向：
	(1).组件配置中：
		data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。
	(2).new Vue(options)配置中：
		data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。

5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。
Vue的实例对象，以后简称vm。

6.Vc和Vm的区别
	两者最大的差别就是vc没有el配置项，vc只能依附vm
	其他的配置项可以说是一样的
	
7.重要的内置关系
	函数上的prototype属性叫显示原型属性
	对象上的__proto__属性叫隐式原型属性
	两者指向的都是同一个原型对象
	实例对象的隐式原型属性指向自己缔造者的原型对象
	VueComponent.prototype.__proto__ === Vue.prototype
	让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。

单文件组件（脚手架）

这里我们就可以使用脚手架（Vue CLI）啦！

CLI（Command Line Interface）命令行接口，我们就叫它脚手架

首先，你必须要有node和gitbash的环境

在gitbash的命令行中输入以下命令

# 下载脚手架
npm i @vue/cli -g

# 创建Vue项目
vue create 项目名

# 启动Vue项目
npm run serve

注意

如果你是在idea中的终端运行的vue create 项目名报了以下错误，有以下两种解决方案

1、以管理员身份打开idea

2、使用命令行到当前目录下使用该命令

这是正常启动成功的界面

脚手架的HelloWorld案例界面

观察项目结构

main.js

// 引入Vue
import Vue from 'vue'
// 引入App根组件
import App from './App.vue'
// 关闭生产提示
Vue.config.productionTip = false
// 创建vm对象
new Vue({
  render: h => h(App),
}).$mount('#app')

我们之前是这么写的

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
    template: `<App></App>`,
    components: {App}
}).$mount('#app')

我们运行，发现报错了，报错如下

大概意思是脚手架使用的运行时版本的Vue，它没有模板解析器

你可以将模板放入render函数中，或者使用完整版的Vue

来解决问题

使用完整版Vue

1	import Vue from 'vue/dist/vue'

发现不报错了，页面也正常显示了

使用render函数

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
    render(createElement){
        return createElement(App)
    }
}).$mount('#app')

一个参数省略小括号

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
    render: createElement=>{
        return createElement(App)
    }
}).$mount('#app')

直接写返回语句省略花括号和return

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
    render: createElement => createElement(App)
}).$mount('#app')

换个参数名

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
    render: h => h(App)
}).$mount('#app')

为什么要使用残缺版的Vue呢？

模板解析器占了Vuejs源码的1/3的体积，为了减少打包后的体积，所以就将模板解析器删去，用更小的render函数来完成该任务

App.vue

<template>
<div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    </div>
</template>

<script>
    import HelloWorld from './components/HelloWorld.vue'

    export default {
        name: 'App',
        components: {
            HelloWorld
        }
    }
</script>

<style>
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>

我们可以看到一个vue文件可以分为三部分

第一部分是用来写HTML结构的

第二部分是用来写JavaScript的

第三部分是用来写样式的

index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
      <!--针对IE，让IE浏览器最高级别渲染页面-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <!--引入页面图标<%= BASE_URL %>可以拿到项目根路径，就是public文件夹-->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
      <!--设置网站名字，拿着package.json中配置的name作为网站名-->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
      <!--当网站不支持JavaScript的时候，显示noscript中的内容-->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
        <!--容器-->
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

Vue2-基础2

发表于 2022-06-21 | 分类于前端， Vue2 |

字数统计: 3.9k

Vue2基础2

事件处理

v-on

这里我们要接触一个全新的配置项methods和一个新的指令语法v-on，我们以需求为导向来学习这一节

需求一：点击按钮，控制台显示欢迎信息

HTML

<div id="app">
    {{msg}}
    <input type="text" v-model="name">
    <!--按钮绑定点击事件，回调函数是welcome-->
    <button v-on:click="welcome">欢迎</button>
</div>

JavaScript

new Vue({
    el: '#app',
    data(){
        return {
            name: 'kerwin',
            msg: '坚持很难，但很酷'
        }
    },
    methods:{
        welcome(){
            console.log(`Hello,${this.name}`)
        }
    }
})

这里有几个知识点

1、模板字符串

1	被``包裹的字符串被叫做模板字符串，它的特点是，在其中可以使用${}语法读取变量

2、methods中配置的函数，this指的应该是vm对象，这就对应着前面我说的一句话

所有被Vue管理的函数(不能是箭头函数)，其内部的this都是vm对象，所以可以使用this.xxx直接获取属性的值

3、观察vm对象，发现在methods中配置的函数，都出现在了vm身上

4、简写形式，常用

1	<button @click="welcome">欢迎</button>

需求二：点击按钮，提示当前鼠标位置

这就需要使用事件参数，其实在welcome方法的参数列表中，Vue默认为咱们传递了一个参数，只不过刚刚我们没有使用而已，我们接收打印一下看看

1
2
3

welcome($event){
    console.log($event)
}

既然有了这个对象($event)，那我获取当前鼠标位置，只需要读取该对象的pageX属性和pageY属性即可

这里也可以不叫$event，叫它a啊b啊都可以，但是习惯起见，我就以$event来接收它了

需求3：我想将name传参进去，而不是使用this去读取

HTML

1	<button @click="welcome($event,name)">欢迎</button>

JavaScript

1
2
3

welcome($event,name){
    console.log(`Hello,${name}`)
}

这里有个注意点，如果我在这里是这样写的<button v-on:click="welcome(name)">欢迎</button>

那么welcome函数只有一个入参，那就是name，点击事件对象就没了

事件修饰符

需求1：点击一个a标签，然后提示弹窗，但是不跳转页面

HTML

1
2
3

<div id="app">
    <a href="https://baidu.com" @click.prevent="showInfo">点我跳转百度</a>
</div>

JavaScript

let vm = new Vue({
    el: '#app',
    methods:{
        showInfo(){
            alert('Hello')
        }
    }
});

这里面的prevent就是事件修饰符。

Vue为我们提供了6种事件修饰符，用的都不是很多，大家过个眼就行

事件修饰符	作用
prevent	阻止默认事件（常用）
stop	阻止事件冒泡（常用）
once	事件只触发一次（常用）
capture	使用事件的捕获模式
self	只有event.target是当前操作的元素时才触发事件
passive	事件的默认行为立即执行，无需等待事件回调执行完毕

这里讲一下passive的作用

<style>
    .list{
        width: 200px;
        height: 200px;
        background-color: peru;
        overflow: auto;
    }
    li{
        height: 100px;
    }
</style>
<div id="app">
    <ul @wheel.passive="bigWork" class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <!--
    wheel事件
    当鼠标滚轮滚动，则触发该事件，并且当滚动条到达边界后，滚动也会触发该事件
    scroll事件
    当滚动条滚动则触发该事件，滚动条到了边界后，再滚动就不会触发该事件了
    -->
</div>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    new Vue({
        el:'#app',
        methods:{
            bigWork(){
                for (let i = 0; i < 100000; i++) {
                    console.log('===')
                }
                console.log('活终于干完了')
            }
        }
    })
</script>

现在滚动鼠标滚轮的时候，滚动条就会卡住不动，当我加上passive后，即变正常。这是为什么呢？

当触发滚轮事件后，先执行事件回调，然后再执行默认事件，如果任务量很大，则默认事件就会堆积，导致页面卡顿

但是当我换成scroll的时候，就算我不加passive修饰符，滚动条依旧正常。

passive在pc端用的很少，在移动端用的较多一点

键盘事件

键盘事件最常用的就两个事件keydown和keyup

前者是当按键按下后触发，后者是当按键回弹起来后触发

案例1：输入文字，当按下回车控制台打印

<div id="app">
    <input type="text" v-model="msg" v-on:keyup.enter="showInfo">
    <!--
        简写模式
        <input type="text" v-model="msg" @keyup.enter="showInfo">
    -->
</div>

<script type="text/javascript">
    let vm = new Vue({
        el: '#app',
        data(){
            return {
                msg: ''
            }
        },
        methods:{
            showInfo(){
                console.log(`输入框中的句子是${this.msg}`)
            }
        }
    });
</script>

总结：

1.Vue中常用的按键别名：
         回车 => enter
         删除 => delete、backspace  (包括“删除”和“退格”键)
         退出 => esc
         空格 => space
         换行 => tab (特殊，必须配合keydown去使用)
         上 => up
         下 => down
         左 => left
         右 => right

2.系统修饰键（用法特殊）：ctrl、alt、shift、meta(win)
         (1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
         (2).配合keydown使用：正常触发事件。

3.当按下Ctrl+y的时候，再触发事件
<input type="text" v-model="msg" @keyup.ctrl.y="showInfo">

计算属性与监视

案例：根据输入的姓和名展示姓名

插值语法实现

<div id="app">
    姓：<input type="text" v-model="firstName">
    </br>
    名：<input type="text" v-model="secondName">
    </br>
    <span>全名：{{firstName}}-{{secondName}}</span>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data(){
            return {
                firstName:'',
                secondName: ''
            }
        }
    })
</script>

methods实现

<div id="app">
    姓：<input type="text" v-model="firstName">
    </br>
	名：<input type="text" v-model="secondName">
	</br>
	<!--这里的方法必须加上小括号，不然读取的就是方法的源码-->
	<span>全名：{{fullName()}}</span>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data(){
            return {
                firstName:'',
                secondName: ''
            }
        },
        methods:{
            fullName(){
                return `${this.firstName}-${this.secondName}`
            }
        }
    })
</script>

这里需要注意一个点：当data中的数据发生了改变，就会重新解析模板，所以所有在插值语法中的函数都会再执行一遍

计算属性实现

全写

<div id="app">
    姓：<input type="text" v-model="firstName">
    </br>
    名：<input type="text" v-model="secondName">
    </br>
    <span>全名：{{fullName}}</span>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data(){
            return {
                firstName:'',
                secondName: ''
            }
        },
        computed:{
            fullName: {
                get(){
                    return `${this.firstName}-${this.secondName}`
                },
                set(value){
                    const arr = value.split('-')
                    this.firstName = arr[0]
                    this.lastName = arr[1]
                }
            }
        }
    })

总结：

1、get何时被调用？
	(1)页面加载好后，对此变量初次读取
	(2)get中使用到的任何变量发生变化的时候
2、set何时被调用
	(1)当fullName被修改时	
3、计算属性会被放到vm上

简写

在只读不写的情况下才可以使用简写模式

<div id="app">
    姓：<input type="text" v-model="firstName">
    </br>
    名：<input type="text" v-model="secondName">
    </br>
    <span>全名：{{fullName}}</span>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data(){
            return {
                firstName:'',
                secondName: ''
            }
        },
        computed:{
            fullName(){
                return `${this.firstName}-${this.secondName}`
            }
        }
    })
</script>

计算属性是一个名词，不是动词

这一点搞明白之后，就可以理解计算属性的作用其实就是拿着我现有的东西加工后再展示在页面上

既然插值语法和methods都可以实现该功能，为什么还要学一个计算属性呢？这不是经典白学吗？

NO！大NO特NO

计算属性的优势有两点

1、职责分明

2、与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

证明：计算属性有缓存

computed:{
    fullName(){
        console.log('我被读取了')
        return `${this.firstName}-${this.secondName}`
    }
}

页面上多次使用fullName

修改姓

由此可以证明计算属性具有缓存

缓存什么时候刷新呢？当get中使用到的任何变量发生变化的时候

监视实现

监视是一个全新的配置项，作用是监视一个属性的变化

<div id="app">
    姓：<input type="text" v-model="firstName">
    </br>
    名：<input type="text" v-model="secondName">
    </br>
    <span>全名：{{fullName}}</span>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data(){
            return {
                firstName:'李',
                secondName: '四',
                fullName: ''
            }
        },
        watch:{
            firstName:{
                handler(newValue,oldValue){
                    this.fullName = newValue + '-' + this.secondName
                }
            },
            secondName: {
                handler(newValue,oldValue){
                    this.fullName = this.firstName + '-' + newValue
                }
            }
        }
    })
</script>

这样写就有一个问题，当firstName和secondName有初始值的情况下，页面加载后，fullName是没有值的

这时候就需要使用一个配置项immediate，使得页面加载后立即执行一次监视的回调函数

watch:{
    firstName:{
        immediate: true,
            handler(newValue,oldValue){
            this.fullName = newValue + '-' + this.secondName
        }
    },
        secondName: {
            immediate: true,
                handler(newValue,oldValue){
                this.fullName = this.firstName + '-' + newValue
            }
        }
}

这时候小马觉得所有的数据直接写在data中不太好，他想使用一个对象来放这些数据，所以他把data改成了这样，然后他想监视person的变化

data(){
    return {
        person: {
            firstName:'李',
            secondName: '四',
            fullName: '',
            school: {
                name: '南京某大学',
                age: 18
            }
        }
    }
},

于是乎页面就成了这样

<div id="app">
    姓：<input type="text" v-model="person.firstName">
    </br>
    名：<input type="text" v-model="person.secondName">
    </br>
    学校名：<input type="text" v-model="person.school.name">
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data(){
            return {
                person: {
                    firstName:'李',
                    secondName: '四',
                    fullName: '',
                    school: {
                        name: '南京某大学',
                        age: 18
                    }
                }
            }
        },
        watch:{
            person:{
                handler(newValue,oldValue){
                    console.log('我被修改了');
                    console.log(newValue);
                }
            }
        }
    })
</script>

小马开心的修改了学校名，发现控制台啥也没有，又修改了姓和名，发现控制台都没有输出，

其实这不是小马的错，这时候就需要另一个配置项了deep，开启对对象的深度监视

watch:{
    person:{
        deep: true,
        handler(newValue,oldValue){
            console.log('我被修改了');
            console.log(newValue);
        }
    }
}

小马发现这样写完之后，就又可以监视这个person对象了

简写模式

<div id="app">
    姓：<input type="text" v-model="firstName">
    </br>
    名：<input type="text" v-model="secondName">
    </br>
    <span>全名：{{fullName}}</span>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data(){
            return {
                firstName:'',
                secondName: '',
                fullName: ''
            }
        },
        watch: {
            firstName(newValue,oldValue){
                this.fullName = newValue + '-' + this.secondName
            },
            secondName(newValue,oldValue){
                this.fullName = this.firstName + '-' + newValue
            }
        }
    })
</script>

另一种写法

 vm.$watch('firstName',{
   immediate:true,
   deep:true,
   handler(newValue,oldValue){
      console.log('firstName被修改了',newValue,oldValue)
   }
}) 

//简写形式，所有被vm所管理的函数，都不要写成箭头函数
 vm.$watch('secondName',function (newValue,oldValue){
   console.log('secondName被修改了',newValue,oldValue,this)
})

区别

计算属性和监视的区别

就按照这个案例看的话，好像计算属性比监视好多了，但是如果我再加一个需求：姓名输入防抖动

防抖动：就是一段时间内不展示结果，等到用户输入完毕后，再将结果放到页面中

<div id="app">
    姓：<input type="text" v-model="firstName">
    </br>
    名：<input type="text" v-model="secondName">
    </br>
    全名：<span>{{fullName}}</span>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data(){
            return {
                firstName:'李',
                secondName: '四',
                fullName: '',
                timer: '',
            }
        },
        watch:{
            firstName:{
                immediate: true,
                handler(newValue,oldValue){
                    clearTimeout(this.timer);
                    this.timer = setTimeout(()=>{
                        this.fullName = newValue + '-' + this.secondName;
                    },2000);
                }
            },
            secondName:{
                immediate: true,
                handler(newValue,oldValue){
                    clearTimeout(this.timer);
                    this.timer = setTimeout(()=>{
                        this.fullName = this.firstName + '-' + newValue;
                    },2000);
                }
            }
        }
    })
</script>

这里大家可能会有个疑惑

这里如果不写成箭头函数的话，函数里面的this就是window

但是写成箭头函数的话，在2s过后，vs引擎执行此回调的时候，就会在函数中找this，没有找到

然后向外找，就找到了handler函数，这里面的this就是vm，那么就可以找到data中的属性了

这时候就有人说了，那我也可以用计算属性啊

<div id="app">
    姓：<input type="text" v-model="firstName">
    </br>
    名：<input type="text" v-model="secondName">
    </br>
    全名：<span>{{fullName}}</span>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data(){
            return {
                firstName:'李',
                secondName: '四'
            }
        },
        computed: {
            fullName(){
                setTimeout(()=>{
                    return this.firstName + '-' + this.secondName;                    
                },2000);
            }
        }
    })
</script>

当你写下这个代码的时候，你得反思一下基本功了

这个函数的返回值会返回到哪里去？

所以，当需要使用异步计算的时候，就需要使用属性监视

小总结

computed和watch之间的区别：
    1.computed能完成的功能，watch都可以完成。
    2.watch能完成的功能，computed不一定能完成，例如：watch可以对数据进行异步的操作。
两个重要的小原则：
    1.所被Vue管理的函数，最好写成普通函数的形式，这样this的指向才是vm或组件实例对象。
    2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数）
    最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。

绑定style与class

这里就不写案例了

1. class样式
    写法:class="xxx" xxx可以是字符串、对象、数组。
    :class="" 	字符串写法适用于：类名不确定，要动态获取。
    :class="{classA:xxx,classB:xxx}" 对象写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用，xxx是布尔值
    :class="['classA']"数组写法适用于：要绑定多个样式，个数不确定，名字也不确定
2. style样式
    :style="{fontSize: xxx}"其中xxx是动态值。
    :style="[a,b]"其中a、b是样式对象。
    :style="obj"其中obj是样式对象或者数组

Vue2-基础1

发表于 2022-06-20 | 分类于前端， Vue2 |

字数统计: 3k

Vue2基础1

官网地址：https://cn.vuejs.org/

相信大家学习什么都是以HelloWorld开头的，那我们就以一个HelloWorld的栗子开启我们的Vue学习吧

HelloWorld案例

安装Vue

这里大家要注意，不要使用CLI创建Vue项目

新手阶段最好使用标签静态引入CDN的方式来安装Vue

这里补充一个知识点：

script标签的src属性可以写成./???.js的形式

也可以写成一个网址，为了使用这种方式引入的加载速度更快一点，所以使用了CDN加速

这是官网提供的两种Vue.js，两者有什么区别呢？

开发版本的体积比生产版本的体积大，其中包含了完整的警告和调试模式，在学习阶段，我们使用开发版本的即可

引入Vue.js

1	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

安装开发者工具

它是一个谷歌插件，如果你可以访问外网，可以直接在谷歌插件商场直接搜索下载，如果没有的话，我也在这里提供插件的文件，

1 2	链接：https://pan.baidu.com/s/18AFI8MpW397L6obmKnAZCw 提取码：iupu

点击开发者模式

如果使用的是我提供的文件的话，直接将crx文件拖入该页面即可安装开发者工具

使用Vue

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8" />
      <title>我的第一个Vue页面</title>
      <!-- 引入Vue -->
       <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
   </head>
   <body>
      <!-- 准备好一个容器 -->
      <div id="app">
          <!--这里的{{}}是Vue中的插值语法，可以读取data配置项中配置的数据-->
		{{msg}}
      </div>

      <script type="text/javascript" >
         Vue.config.productionTip = false //关闭vue的生产提示。
         //创建Vue实例
         new Vue({
            el:'#app', //el用于指定当前创建的Vue实例为哪个容器服务，值为css选择器。
            data:{ //data中用于存储我们需要用到的数据，数据供el所指定的容器去使用，值是一个对象。
               msg:'Hello World'
            }
         })
      </script>
   </body>
</html>

解释：

1、{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
    js表达式 VS js语句
    (1)js表达式是一个值
    (2)js语句是一个语句，控制代码走向
        if(){}
        for(){}
        switch(){}

2、容器和Vue实例的关系是一对一的

3、id为app的容器内部的代码就是模板

4、一旦data中的数据发生改变，页面中使用到该数据的地方都会自动更新

5、el的两种写法，该配置的作用叫挂载，就是将创建的Vue实例与HTML元素绑定在一起
	(1) el:'#app'
	(2) new Vue({
            data:{
               msg:'Hello World'
            }
         }).$mount('#app')
	这个$mount是Vue原型对象上提供的

6、data的两种写法
	(1) 对象式，data是一个对象
        data:{ 
            msg:'Hello World'
        }
	(2) 函数式，data是个函数，返回的是一个对象
		data(){
            return {
            	msg: 'Hello World'
            }
		}
	(3) 只要是Vue管理的函数，其中的this对象都是自己创建的Vue实例对象，**前提是不能是箭头函数**
	(4) 我们最常使用的是函数式的，大家要多写这种形式的，具体原因的话，这里埋个伏笔，以后在讲组件的时候解释

如果我们不使用new关键词创建Vue对象的话会怎么样呢？

控制台就会出现报错

开发版

生产版

这里可以体现生产版本和开发版本之间的区别

我们来看下Vue的构造函数

function Vue (options) {
  //先判断当前调用函数的是否是Vue的实例，如果不是，则在控制台报错
  if (!(this instanceof Vue)) {
    warn('Vue is a constructor and should be called with the `new` keyword');
  }
  this._init(options);
}

模板语法

刚刚我们在写HelloWorld案例的时候使用的{{}}叫插值语法

模板语法一共两种，插值语法就是其中的一种，另一种模板语法叫指令语法

插值语法：
      作用：解析标签体内的内容
      写法：{{xxx}}双括号内是js表达式，可以直接读取到data中的所有属性。
      
指令语法：
      功能：解析标签（包括：标签属性、标签体内容、绑定事件.....）。
      写法：v-xxx(xxx为具体指令)

我们来看看指令语法是个什么东东

为了节省代码量，这里只写核心代码

v-text

这个最简单，其作用就是插值语法，将其指定的内容替换标签体内的所有内容，不解析HTML

与之对应的还有一个指令v-html，那这个指令就是将内容放入标签体内后，如果内容有HTML元素，它也会解析

v-bind

主要使用在给HTML元素属性动态赋值的时候使用

HTML

<div id="app">
    <a v-bind:href="url">点我去{{name}}学习1</a>
    <!--这是v-bind的简写模式-->
    <a :href="url">点我去{{name}}学习2</a>
</div>

JavaScript

new Vue({
    el:'#app',
    data:{
        name:'百度',
        url:'http://www.baidu.com',
    }
})

bind的英文意思是绑定，这里先理解一下这个名词的意思，这里的v-bind是单向绑定

什么叫单向绑定？

就是我在Vue实例中的data中的数据发生了改变，页面中的数据就会跟着更新，

但是页面中的数据发送了改变，data中的数据不会发生改变

证明：

因为我们还没学其他可以修改data中的数据的方法，我们这里就使用开发者工具开帮我们完成该任务

修改data中数据，页面更新

修改页面数据，data不更新

1	document.getElementById('app').children[0].href='https://juejin.cn/'

这就是单向绑定了

既然有单向绑定，那肯定与之对应的还有一个双向绑定啦，下面我们来看看双向绑定

v-model

只使用在一些表单类的HTML标签

这个指令十分十分十分的重要，请一定要理解这个指令双向绑定的作用

HTML

<div id="app">
    <!--将input的value属性和data中的name属性双向绑定起来-->
    双向数据绑定：<input type="text" v-model:value="name">
</div>

JavaScript

new Vue({
   el:'#app',
   data:{
      name:'芝麻芝麻'
   }
})

单向绑定，是页面中的数据修改后，data中的数据不会更新

那双向绑定的情况下，是不是就会更新了？是的

我们来证明一下这一点

说明：

1、简写模式
	<input type="text" v-model="name">
2、作用范围
	只可以作用在表单元素上

MVVM模型

1
2
3

M:	模型(Model)对应data中的数据
V:	视图/模板(View)HTML元素
VM:	视图模型(ViewModel)托管数据的Vue实例，所以以后我们叫Vue的实例对象就叫vm对象

我们来输出一下vm来看看它长啥样

我们发现，橙色框中就是我们data中配置的数据，奇怪的是，它是三个点，但是点开看确实是我们刚刚配置的数据

Vue经过一些操作（我可不会告诉你这叫数据代理），将咱们在data中配置的数据直接放到了vm实例对象上

其实插值语法中可以看到vm身上所有的属性，所以可以直接写我们在data中配置的属性

数据代理

回顾Object.defineProperty()

在说这个之前，我们先来回顾一下Object上的一个方法defineProperty

1
2
3

let person={
    name: 'lisi'
}

现在我要给person对象上添加一个属性age

第一种写法

1	person.age=18

第二种写法

1
2
3

Object.defineProperty(person,'age',{
    value: 18
})

那有人就要说了，谁选第二种方式啊，第一种方式那么简单，此言差矣

第二种写的方式定义的age属性有两个特性

第一个，他无法被遍历，删除，修改

无法被遍历，是什么意思？

// 遍历person中的所有属性
for(p in person){
    console.log(p)
}
// 拿到person中的属性数组
console.log(Object.keys(person))
// 除了age属性，其他的属性都可以被遍历到

//用Object.defineProperty定义的数据有很多限制，但是可以通过一些配置项来使其解除限制
Object.defineProperty(person,'age',{
        value: 18,
        enumerable: true,//可被遍历，默认值是false
        writable:true, //可以被修改，默认值是false
        configurable:true //可以被删除，默认值是false
	}
})

第二个，它可以做数据劫持

这就需要一些其他的配置项了，即get和set

let number = 18;
Object.defineProperty(person,'age',{
    // 当有人读取person的age的时候，即点了那三个点的时候
    // 就会将这个函数的返回值作为person.age的值展示出来
    get(){
        console.log('嘿嘿，旧数据被我劫持了！！')
        return number
    },
    // 当有人修改person的age的时候
    set(newValue){
        console.log('嘿嘿，新数据被我劫持了！！我要做坏事了')
        number = newValue;
    }
})

定义

给数据代理下个定义：通过一个对象代理对另一个对象中属性的操作（R/W）

我们看一下Vue中的数据代理

vm实例对象代理了data中配置的属性

我们先来证明一个事情：我们传入的data配置项和vm身上的_data是同一个对象

let data = {
    name:'芝麻芝麻'
}
let vm = new Vue({
    el:'#app',
    data
})

这里我们观察到data已经不是原来的那个对象了，它已经被Vue加工过了

那么Vue中的数据代理就是vm代理了_data中的数据修改

当_data中的数据发生了修改，_data就会检测到这次的修改（数据劫持），页面中使用到该数据的地方都会发生更新

模拟Vue中的数据代理和数据劫持

<script type="text/javascript">
    // 我的Vue的构造函数
    function MyVue(options){
    	// 拿到配置项传入的data
        let data = options['data'];
        // 数据代理，将data中出现的属性代理给实例对象
        Object.keys(data).forEach((p)=>{
            Object.defineProperty(this,p,{
                get(){
                    return data[p];
                },
                set(newValue){
                    data[p] = newValue;
                }
            })
        })
        // 数据劫持
    	// 将data进行一些加工，使其可以检测属性的变化，当属性变化的时候，对页面做出更新
        function Observer(data){
            Object.keys(data).forEach((p)=>{
                Object.defineProperty(this,p,{
                    get(){
                        console.log('有人读取配置项中的数据');
                        return data[p];
                    },
                    set(newValue){
                        console.log('有人修改配置项中的数据，我要更新页面了');
                        data[p]=newValue;
                    }
                })
            })
        }
    	// 对传入的data数据进行加工，并将其赋值给_data
        this._data=new Observer(data);
    	options.data=this._data
    }
    const vm = new MyVue({
        data: {
            name: 'zhima'
        }
    })
</script>

证明：

// 问题一
// 对于嵌套类型的对象,是无效的,因为我没有写递归语句,源码是写了递归语句,将对象的每一层都加了getter/setter

// 问题二
// 这里的_data对象和传入的data对象是不一致的
// 这里我不知道怎么实现这一点，有会的大佬可以发一下评论区 
let data = {
    name: 'zhima'
}
const vm = new MyVue({
    data
})
//console
vm._data===data
false

这里的代码看不懂不要紧哦，我接下来还会再提一遍的，慢慢地会懂的

加油加油💪

Vue2-导言

发表于 2022-06-18 | 分类于前端， Vue2 |

字数统计: 770

Vue

学习Vue之前，我们先来看三个问题

导言

什么是Vue

这是官网的介绍

构建用户界面

即将数据展示在页面上，给用户看

渐进式框架

渐进即逐渐递进，简单来说就是

在简单应用中，可以只需要一个小巧的库

在复杂应用中，可以引入各种各样复杂的组件

就是一种可以从易到难开发的一种框架

谁开发的

它有什么特点

Angular.js的特点是模块化开发

React.js的特点是虚拟DOM

Vue则是集两家之长，它具有以下特点

组件化开发

提高代码复用率和维护性

每一个框就是一个组件，就是一个文件

当我需要修改哪一块的界面，我只需要到哪个文件去修改即可

声明式编程

让编码人员无需直接操作DOM，提高开发效率

需求：将下列数据显示在一个列表(<ul id="container"></ul>)中

let persons = 
[
    {
        id: '1',
        name: 'zhima'
    },
    {
        id: '2',
        name: 'lizhi'
    },
        {
        id: '3',
        name: 'kerwin'
    }
]

命令式编程

let list = document.getElementById('container')
persons.forEach(p=>{
    let li=document.createElement('li');
    li.innerHtml=`id:${p.id}-name:${name}`
    list.append(li);
})

声明式编程

<ul id="container">
	<li v-for="p in persons">
        id:{{p.id}}-name:{{p.name}}
    </li>
</ul>

虚拟DOM

优秀的DIFF算法，提高DOM的复用率

这就有点让人摸不着头脑了，DOM还有复用率？

还是刚才那个案例，如果我的数据变成了这样

let persons = 
[
    {
        id: '1',
        name: 'zhima'
    },
    {
        id: '2',
        name: 'lizhi'
    },
    {
        id: '4',
        name: 'txy'
    }
]

传统的使用JavaScript进行命令式操作的话，直接将数据转化为页面真实DOM（Real-DOM），确实和DOM的复用率没有啥关系

但是在Vue里面，在数据变成页面上的DOM节点的之前，它会在内存中生成虚拟DOM（Virtual-DOM）

然后使用DIFF算法，比较新旧虚拟DOM，如果有一样的，则直接复用之前已经生成好的虚拟DOM，从而提高了DOM的复用率。

那么通过什么来判断两个虚拟DOM是否相同呢？

这就要说说刚刚写的代码的一处错误了，下面看正确的代码

<ul id="container">
	<li v-for="p in persons" :key="p.id">
        id:{{p.id}}-name:{{p.name}}
    </li>
</ul>

我们看到，上面的代码就是加了一处地方，就是:key="p.id"，就是给每一个遍历的元素加上了唯一性标识

具体的DIFF算法，我们后面讲到虚拟DOM 的时候再说

学之前要掌握什么知识

ES6模块化开发规范
包管理器NPM
数组常用方法
axios
promise

算法-二叉树（纲领）

发表于 2022-05-07 | 分类于算法，技巧篇 |

字数统计: 1.1k

二叉树（纲领）

二叉树的解题思路有两个方向

通过遍历一棵树得到答案，即遍历的思想

通过递归，将整个问题分解为子问题推导出问题的答案，即分解的思想

首先我们来回顾以下二叉树的几种遍历方式

前序遍历
中序遍历
后序遍历
层次遍历

大家在课内学习的时候，应该是这么背的

前序是根左右，中序是左根右，后序是左右根，层次遍历就是一层一层写

前序遍历集合：ABDHIECFG

中序遍历集合：HDIBEAFCG

后序遍历集合：HIDEBFGCA

层次遍历集合：ABCDEFGHI

相信这个对于大家来说都没有难度，理解前中后序对于做二叉树问题十分重要，这里给出遍历二叉树的模板代码。

public void traverse(TreeNode root){
    if(root==null){
        return;
    }
    // 前序位置
    traverse(root.left);
    // 中序位置
    traverse(root.right);
    // 后序位置
}

下面请你对照这段模板，看下面这张图

你会发现，每个节点都会有唯一属于自己的前中后序位置，前中后序其实对应就是处理每一个节点的三个特殊时间点。

二叉树的问题，其实就是在这三个时间点注入自己的代码逻辑，只需要单独考虑每一个节点在每个时间点该做些什么，其他的交给二叉树遍历框架即可。

前序输出集合

我们来写一下前序遍历，方法签名如下public List<TreeNOde> getPreorderList(TreeNOde root){}

一、遍历

借助traverse函数和一个外部变量即可完成

在进入一个节点的时候将其加入到结果集中去，最后将结果集返回

List<TreeNode> res = new ArrayList<>();

public List<TreeNOde> getPreorderList(TreeNOde root) {
    traverse(root);
    return res;
}

public void traverse(TreeNode root) {
    if (root == null) {
        return;
    }
    res.add(root);
    traverse(root.left);
    traverse(root.right);
}

二、分解问题

求一整个树的前序遍历即求其子树的前序遍历集合

public List<TreeNode> getPreorderList(TreeNode root){
    List<TreeNode> res = new ArrayList<>();
    if(root==null){
        return res;
    }
    // 将当前节点放入集合
    res.add(root);
    // 将左节点的前序遍历放入集合
    res.addAll(getPreorderList(root.left));
    // 将右节点的前序遍历放入集合
    res.addAll(getPreorderList(root.right));
    // 讲结果集返回
    return res;
}

二叉树的最大深度

给定一个二叉树，找出其最大深度。

二叉树的深度为根节点到最远叶子节点的最长路径上的节点数。

说明: 叶子节点是指没有子节点的节点。

示例：

给定二叉树 [3,9,20,null,null,15,7]

返回它的最大深度 3 。

我们来使用两种上述思维来看这道题

一、遍历

如何得到最大深度，即得到每一个节点的深度，在叶子节点处将当前深度和当前最大深度取最大，然后将最大的深度返回即可

public class Solution {
    int depth = 0;
    int max = 0;

    public int maxDepth(TreeNode root) {
        traverse(root);
        return max;
    }

    public void traverse(TreeNode root) {
        if (root == null) {
            return;
        }
        // 前序位置
        depth++;
        // 在叶子节点处更新最大深度
        if (root.left == null && root.right == null) {
            max = Math.max(max, depth);
        }
        traverse(root.left);
        // 中序位置
        traverse(root.right);
        // 后序位置
        depth--;
    }
}

前序位置是进入一个节点的时候，中序位置是从左子树切到右子树的时候，后序位置是离开一个节点返回其父母节点的时候

depth记录着当前深度，max记录着最大深度

在进入一个新的节点的时候，depth自增1，在离开这个节点的时候，depth自减1

二、分解问题

求树的最大深度即求树的高度

求树的高度即可分解问题，分解到由子树高度推导出完整的树的高度

public int maxDepth(TreeNode root) {
    if (root == null) {
        return 0;
    }
    // 左子树的高度
    int left = maxDepth(root.left);
    // 右子树的高度
    int right = maxDepth(root.right);
    // 返回自身高度
    int max = Math.max(left, right) + 1;
    return max;
}

【19-Medium】删除链表的倒数第N个节点

发表于 2022-05-01 | 分类于算法，刷题篇 |

字数统计: 339

删除链表的倒数第N个节点

给你一个链表，删除链表的倒数第 n 个结点，并且返回链表的头结点。

示例 1：

1 2	输入：head = [1,2,3,4,5], n = 2 输出：[1,2,3,5]

示例 2：

1 2	输入：head = [1], n = 1 输出：[]

示例 3：

1 2	输入：head = [1,2], n = 1 输出：[1]

提示：

链表中结点的数目为 sz
1 <= sz <= 30
0 <= Node.val <= 100
1 <= n <= sz

进阶：你能尝试使用一趟扫描实现吗？

Related Topics
链表
双指针

双指针

这道题典型的用快慢指针法来解决

将slow和fast指向头部，将fast指针先往后走n步

然后两者齐头并进，当fast.next为null的时候，slow已经在倒数第n-1个节点的位置了，此时进行删除操作

该方法的原理是利用步长，fast先走的那几步，在fast到了链表末尾的null的时候，slow则表示的是倒数第n个节点，

因为这里需要执行删除操作，所以需要将fast走到链表末尾即可

示例代码

class Solution {
    public ListNode removeNthFromEnd(ListNode head, int n) {
        ListNode slow = head;
        ListNode fast = head;
        for (int i = 0; i < n; i++) {
            fast = fast.next;
        }
        if(fast == null){
            return head.next;
        }
        while(fast.next != null){
            slow = slow.next;
            fast = fast.next;
        }
        slow.next = slow.next.next;
        return head;
    }
}

JVM-内存分区

发表于 2022-03-18 | 分类于 javaEE ， JVM |

字数统计: 935

JVM内存分区

内存分区和内存模型是两个概念

操作系统内存分区

栈（Stack）
堆（Heap）
未初始化数据段（BSS）
数据段（Data Segment）
文本段（Literal Segment）
代码段（Code Segment）

JVM内存分区

程序计数器（PC）
虚拟机栈（JVM Stack）
本地方法栈（Native Method Stack）
堆（Heap）
方法区（Method Area）

橙色虚线包裹的就是线程共享的，被红色实现包裹的是线程隔离的

程序计数器

在硬件层面，程序计数器是寄存器，是用来存储指令地址给处理器执行，

在JVM中，它的作用就是用来存储字节码指令的地址，提供给执行引擎去执行

这里我们从侧面去查看该特新

public class Demo {
    public static void main(String[] args) {
        for (int i = 0; i < 10; i++) {
            System.out.println(i);
        }
    }
}

然后先编译javac Demo.java反编译javap -l -c Demo.class

得到以下字节码

Compiled from "Demo.java"
public class com.lizhi.Demo {
  public com.lizhi.Demo();
    descriptor: ()V
    Code:
       0: aload_0
       1: invokespecial #1                  // Method java/lang/Object."<init>":()V
       4: return
    LineNumberTable:
      line 3: 0

  public static void main(java.lang.String[]);
    descriptor: ([Ljava/lang/String;)V
    Code:
   	 	// 这里的数字就是字节码指令的偏移量
       0: iconst_0
       1: istore_1
       2: iload_1
       3: bipush        10
       5: if_icmpge     21
       8: getstatic     #2                  // Field java/lang/System.out:Ljava/io/PrintStream;
      11: iload_1
      12: invokevirtual #3                  // Method java/io/PrintStream.println:(I)V
      15: iinc          1, 1
      18: goto          2
      21: return
      // 这里可以解释断点的原理，将源码行数和字节码行数进行映射
    LineNumberTable:
      line 5: 0
      line 6: 8
      line 5: 15
      line 8: 21
}

虚拟机栈

也叫java方法栈，java方法的调用对应着栈帧的入栈与出栈。

3个重点：

栈帧
栈帧出现时机
栈帧的构成

栈帧

栈帧主要有四部分组成：局部变量表、操作数栈、动态连接、返回地址

局部变量表

主要存储方法的参数、定义在方法内的局部变量，包括基本数据类型（8大）对象的引用地址，返回值地址。
局部变量表中存储的基本单元为变量槽（Slot），32位（4字节）以内的数据类型占一个slot，64位（long，double）的占两个slot。
局部变量表是一个数字数组，byte、short、char都会被转化为int,boolean类型也会被转化为int，O代表false、非0代表true。局部变量表的大小是在编译期间决定下来的，所以在运行时它的大小是不会变的。
局部变量表中含有直接或者间接指向的引用类型变量时，不会被垃圾回收处理。

操作数栈

就是用来存储操作数的栈，这里的操作数大部分就是方法内的变量

作用：

存储操作数
操作数栈可以方便指令顺序读取操作数

指令	含义
iload	int型变量入栈
istore	栈顶数值存入局部变量
iadd	弹出栈顶两个操作数，并将求和的int值压入栈中

动态连接

java中的多态就是通过动态连接实现的

每个栈帧都包含一个指向运行时常量池中该栈帧所属方法的引用，持有这个引用都是为了支持方法调用过程中的动态连接

连接是将部分符号引用替换为直接引用，对于有些方法，JVM并不能判断它们的具体实现，只有在真正运行的时候，才可以根据实际类型进行连接，这就是动态连接

本地方法栈

本地方法是由非java语言实现的函数，一般是一些和操作系统底层相关的函数

JavaScript-模块化开发

发表于 2022-03-16 | 分类于前端， JavaScript |

字数统计: 1.5k

javaScript模块化

什么是模块化？

即将一个复杂的程序依据一定的规则(规范)封装成几个块(文件)，并用规定语法将其组合在一起，块的内部数据/实现是私有的,只是向外部暴露一些接口(方法)与外部其他模块通信

以前的代码

全局模式

function foo(){
    
}
function abc(){
    
}

问题：所有的函数都被绑定在了window上，容易产生命名冲突和产生对window的污染

namespace模式

将函数或者数据绑定在对象上

let obj = {
    k: 'asd',
    foo(){
        console.log(this.k)
    },
    abc(){
        
    }
}

问题：对象中的数据可以随意被修改，所以数据不安全

IIFE(Immedicately-invoked-function-expression)

该方法就是利用函数的作用域和即使函数的特性

(function(window){
    function foo(){
        console.log('ooo')
    }
    window.module={foo}
})(window);
-----------------------------
module.foo();

或者

(function(window){
    function foo(){
        console.log('ooo')
    }
    window.module=foo
})(window);
-----------------------------
module();

IIFE就是现代化模块化的基石

模块化的好处

避免命名冲突
根据功能点进行更好的分离
更高的复用性
高可维护性

但是以此同时就出现了问题

一个页面需要引入多个js文件，如果多个文件之间有依赖关系，先后顺序的错误就会导致报错
请求过多
依赖模糊
难以维护

这时候我们就需要引入一种模块化的规范来避免这种问题，下面我们来看看有哪些模块化规范

模块化的规范

CommonJS（nodejs就是基于这种规范）
AMD （用的少）
CMD（阿里的人写的。用的少）
ES6

CommonJS

说明：

每一个文件都是一个模块
服务器端：模块的加载是运行时同步加载的
浏览器端：需要自己编译打包将所有的模块js合并到一个js中

定义模块：

module.exports={}
---
expoets.foo = function(){
    
}
exports.n = 2

引入模块：

let module1 = require(..)
// 这里的..
// 引入第三方的包   直接写包名
// 引入自己写的js   写路径

服务器端例子：

先创建项目结构

-modules
 --module1.js
 --module2.js
 --module3.js
-app.js
-package.json

module1.js

module.exports = {
    foo(){
        console.log(`'module1's foo()`)
    }
}

module2.js

exports.foo = function(){
    console.log(`'module2's foo()`)
}
exports.abc = function(){
    console.log(`'module2's abc()`)
}

module3.js

1
2
3

module.exports = function(){
    console.log(`'module3's foo()`)
}

app.js

let module1 = require('./modules/module1.js')
let module2 = require('./modules/module2.js')
let module3 = require('./modules/module3.js')

module1.foo()
module2.foo()
module2.abc()
module3()

package.json

{
    name: 'applicationname',// 这里写项目名字，不能有大写字母，不能有中文
    version: '1.0.0'
}

可以使用npm init生成该文件

客户端例子：

结构树如下

-test
	--dist
    --src
    	---module1.js
    	---module2.js
    	---module3.js
    	---app.js
    --index.html
    --package.json

js代码如上

下载编译工具

1 2	npm install browserify -g # 全局安装 npm install browserify --save-dev # 开发依赖，在上线阶段不需要此工具了

使用该工具

1	browserify src/app.js -o dist/budle.js

index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <title>title</title>
  </head>
  <body>
      <script src='./dist/budle.js'></script>
  </body>
</html>

AMD

说明：AMD(（Asynchronous Module Definition）)专门用户浏览器端，模块的加载是异步的

此规范依赖于一个Require.js

基本语法：

定义模块：

// 没有依赖其他模块
define(function(){
    return 模块
})
// 定义有依赖的模块
define(['module1','module2'],function(m1,m2){
    return 模块
})

引入模块

require(['module1','module2'],function(m1,m2){
    使用m1/m2
})
requirejs(['module1','module2'],function(m1,m2){
    使用m1/m2
})

例子：

目录结构

-test
	--js
        ---libs
            ----require.js//这是引入的第三方js
        ---modules
            ----module1.js
            ----module2.js
            ----modlue3.js
        ---main.js
	--index.html

mudule1.js

define(function(){
    lett msg = 'module1';
    function foo(){
        console.log(msg)
    }
    return {foo}
})

module2.js

define(['module1'],function(m1){
    let msg = 'module2.js'
    function foo(){
        console.lopg(msg,m1.foo())
    }
    return {foo}
})

main.js

(function(){
    require.config({
        baseUrl: 'js/',
        path: {
            module1: './modules/module1.js',
            module2: './modules/module2.js'
            jquery: './libs/jquery.js'//引入第三方库，不是所有的第三方库都支持AMD语法
        }
    })
    requirejs(['module1','module2'],function(m1,m2){
        m1.foo();
    })
})()

页面中只要引入该标签即可

1	<script data-main="js/main.js" src=js/libs/require.js></script>

ES6规范

说明：该规范也需要编译打包处理，先使用babel将ES6转化为ES5，然后使用browserify将其并为一个js文件

基本语法：

导出模板：

export function foo(){
    
}
export function abc(){
    
}
------------------------------------------------------------------------------------------------------
function foo(){
    
}
function abc(){
    
}
export {foo,abc}
------------------------------------------------------------------------------------------------------
export default {
    function foo(){

    }
    function abc(){

    }
}

引入模块：

// 常规导出，这边用对象接
import {} from '路径' //自己的js

// 默认导出，这边用变量来接
impoet module from '路径'

例子：

项目结构

-test
	--js
		---dist
		---build
		---src
			----module1.js
			----module2.js
			----module3.js
			----main.js
	--index.html
	--.babelrc
	--package.json

安装依赖

npm install browserify --save-dev

npm install babel-cli -g

npm install babel-preset-es2015 --save-dev

创建.babelrc

rc就是run control运行时控制文件

1
2
3

{
	"presets":["es2015"]
}

module1.js

export function foo(){
    
}
export function abc(){
    
}

module2.js

function f1(){
    
}
function f2(){
    
}
export {f1,f2}

module3.js

export default {
    function d1(){

    }
    function d2(){

    }
}

main.js

import {foo,abc} from './module1.js'
import {f1,f2} from './module2.js'
import module3 from './module3.js'

foo();
abc();
f1();
module3.d1();
module3.d2();

es6转es5

1	babel js/src -d js/build

这里如果出现这个错误：

1	babel : 无法加载文件 C:\Users\win\AppData\Roaming\npm\babel.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/ go.micros

那么你输入以下命令一定是这样的

1 2	get-ExecutionPolicy # restricted

这时候，先使用管理员身份打开Windows Powershell然后输入以下命令

1 2	set-ExecutionPolicy RemoteSigned 然后输入y回车

合并文件

1	browserify js/build/main.js -o js/dist/bundle.js

index.html导入js

1	<script src="js/src/dist/bundle.js"></script>

JVM-内存模型

发表于 2022-03-12 | 分类于 javaEE ， JVM |

字数统计: 1.6k

内存模型

硬件的内存模型

在讲java内存模型之前，先来看看硬件的内存模型

CPU的处理速度和内存的读写不是一个数量级的，所以在CPU和主存之间加上了一层缓存

这种结构在单CPU的时候，处理的很好

但是当多CPU的时候，

这时候就会出现缓存一致性问题

当CPUA读取主存中的数据之后，对其进行修改，在将其刷新回主存的之前，CPUB读取主存中的数据，对其进行修改，将其刷新回主存，这时候CPUA也同时将其修改后的数据刷新回主存，那么这个数据到底以哪一个为准，这个就是缓存一致性问题

针对这个问题，就出现了缓存一致性协议

1、窥探性

2、目录型

有了这一层协议，在硬件层面，就解决了缓存一致性问题，即汇编语言能够运行在一个具有缓存一致性的内存视图中

Java的内存模型

设计编程语言的内存模型是为了能够该语言也可以拥有一个内存一致性的视图，于是在硬件内存模型之上，就有了高级语言的内存模型

Java内存模型就屏蔽了各种硬件的操作系统的内存差异，使得java可以正常的运行在各大操作系统上

虚拟机栈也可以叫做java方法栈，该栈中存放8大基础类型的数据和对象的引用

堆中存放着所有的java对象

内存读写指令

作用于主存	作用于工作内存
lock：锁定	load：加载数据
unlock：解锁	store：存储数据
read：读取	use：使用数据
write：写入	assign：赋值

上面的图只是一种理想状态，会出现以下两种问题

1、可见性

当线程A将本地内存中的数据修改后，刷新回主存后，线程B直接使用本地内存中的数据，没有使用刷新后的数据，这就是可见性问题

2、原子性

当线程A修改了数据，还没刷新回主存，线程B也修改了数据，也要刷新回主存，那么这时候主存中应该刷新成哪个线程修改后的值呢

线程通信之间的同步问题，当多个线程在并发操作同一个数据的时候，会引发很多的问题，这些问题被总结为并发三要素

1、可见性

2、原子性

3、有序性

可见性

当一个线程修改了共享变量的值之后，其他所有使用该变量的线程都应该立刻得知此修改

两层含义

第一种含义

线程A修改了数据X，线程B需要使用到最新的数据X（这是线程B没有重新读取主存导致的）

public class Demo {
    static int a =1;
    public static void main(String[] args) throws InterruptedException {
        Thread thread1 = new Thread(() -> {
            while (a == 1) {

            }
        });
        Thread thread2 = new Thread(() -> {
            a = 0;
        });
        thread1.start();
        TimeUnit.SECONDS.sleep(1);
        thread2.start();
    }
}

控制台不会返回响应码，而是一直死循环。

当thread1开始循环的时候，本地内存中a=1，当thread2修改了a为0的时候，thread1并不知道，而是一直使用着a=1，所以会一直循环

两种解决方法

1、将a变量加一个修饰词volatile

如果一个共享变量被volatile修饰，那么该共享变量被修改后，将会直接写入主存，当其他线程读取该共享变量的时候，也会直接从主存中读取

2、使用synchronized包裹，并使用该数据

synchronized块中读写变量会隐式调用lock和unlock指令

public class Demo {
    static int a =1;
    public static void main(String[] args) throws InterruptedException {
        Thread thread1 = new Thread(() -> {
            while (a == 1) {
                synchronized(this){
                    int b = a + 1;
                }
            }
        });
        Thread thread2 = new Thread(() -> {
            a = 0;
        });
        thread1.start();
        TimeUnit.SECONDS.sleep(1);
        thread2.start();
    }
}

第二层含义

线程B需要读取到线程A修改后的数据x，但是因为指令重排，在线程A未修改数据x之前，线程B读到了数据x

public class Demo2 {
    static int a =0;
    static boolean b =false;
    public static void main(String[] args) {
        Thread thread1 = new Thread(() -> {
            a = 1;//1
            b = true;//2
        });
        Thread thread2 = new Thread(() -> {
            if (b) {//3
                int x = a;// 4  // 这个x一定是1吗?
                System.out.println(x); // 5
            }
        });
        thread1.start();
        thread2.start();
    }
}

在硬件内存模型的时候就说过，在底层会存在指令重排的情况，

我们觉得的顺序应该是

1->2->3->4

但是在编译后顺序有可能就变成了

2->3->4->1

这也是一种可见性的问题

同样的这里我们也可以使用上述两种方法来解决这种问题

volatile是禁止了当前变量与之前的代码语句进行指令重排

synchronized就是将两段代码分别捆绑在一起，那么无论在thread1中怎么指令重排，都不会影响thread2对于变量的读取

Happens-Before原则

我们平时很少遇到可见性问题，因为我们站在了前人的肩膀上，设计内存模型的前辈已经帮我们解决了此问题，这就是Happens-Before原则

定义：对于两个操作A和操作B，这两个操作可以在不同的线程中执行，如果A Happens-Before B（即A先于B执行），那么可以保证当A操作执行完后，A操作的执行结果对B操作是可见的

程序顺序原则
锁定原则
volatile原则
线程启动原则
线程结束原则
中断规则
终结器规则
传递性原则

原子性

一个操作要么全部执行成功，要么全部执行失败

1、单指令原子操作

2、利用锁的组合指令原子操作

有序性

指令重排在单线程环境下不会出现什么问题，但是在多线程环境下，可能导致有的代码执行顺序修改后可能会导致与顺序执行的结果不同

这里可以使用Happens-Before原则来解决问题