VUE基础 - 把子之家

介绍

VUE

vue 是用于构建用户界面的渐进式 js 框架

（两种开发模式，引入文件（库的形式），框架式开发（生成一个项目，自己自己创建了一套文件夹））

（和前端的发展有关）

单页面应用（spa: single web application）,vue 哪个更新就改哪个，其他的不动

虚拟 dom

自底向上逐层应用

mvvm 模式

-m model -js 对象

-v view -页面

-vm 虚拟 dom -vue 操作

生态系统，配套使用的东西 vue + vuex + vue- router + elementui + axios (vue 全家桶，vue 技术栈)

Vue 常用 API 整理 => ** **https://zhuanlan.zhihu.com/p/42974849

主流三大框架

vue(小型项目) react angular

vue 的好处

1、渐进式容易上手只要会 HTML css js

2、小

3、虚拟 dom

4、国人开发，容易理解

vue 的核心思想

1 数据驱动，双向绑定 v-model

2 组件化好维护，可以复用

框架：按照别人的规定写，可以快速搭建一个架构，项目结构,维护方便。

库：作为一个文件引入(jQuery),引入就可以用，灵活

组件：任何一块内容。(包含 html,css,js)

**插件: **解决一类功能，比较有特点的（js,还可以有 css）

打断点在 vue 的 js 脚本中加入。可以快速定位到当前的 js。因为 vue 的 js 很难找到，所以需要 debugger。****

vscode 添加 vue 代码片段

https://www.cnblogs.com/susu-yee/p/11533546.html

生命周期

new Vue({
  el:'#app',
  data:{
    msg:'abc'
  },
  methods:{
    destroy(){
      this.$destroy() //用$ 调用销毁方法
    }
  },
  beforeCreate(){
    console.log('创建前');


  },
  created(){
    console.log(this.$el);
    console.log(this.msg);
    console.log('创建后')
  },
  beforeMount(){
    console.log(this.$el);
    console.log(this.msg);
    console.log('挂载前')
  },
  mounted(){
    console.log(this.$el);
    console.log(this.msg);
    console.log('挂载后')
  },
  beforeUpdate(){
    console.log(this.$el);
    console.log(this.msg);
    console.log('更新前')
  },
  updated(){
    console.log(this.$el);
    console.log(this.msg);
    console.log('更新后')
  },
  beforeDestroy(){
    console.log('销毁前')
  },
  //切换到了其他组件,就是销毁了当前组件
  // 使用 <keep-alive>缓存组件组件包裹。切换时就不会销毁和重新创建了。
  destroyed(){
  console.log('销毁后')
}


})

生命周期分为 8 个阶段，加上 keep-alive 的两个共 10 个。

生命函数，从出生到死亡, **钩子函数** 是被提前埋在程序中的函数，在特定的时间会被调用。

开始

1.引入

1.引入 vue.js

2.创建 vue 实例

new Vue({
  el:'id选择器' 挂载点 //不可以挂载到body或者html上
  data:{
  实例中的有效数据，在html中访问{{数据的名字}} json格式
        })
})

///
new Vue({
  data:{
    // 实例中的有效数据
  }
}).$mount('选择器') //挂载点

2.模板渲染

** html 中**

undefinedabc 简单的运算，三元运算，拼接.js

3.指令

v-once 只渲染一次

v-text=’msg’ 把 msg 的内容当作文本放在标签中

v-html=’msg’ 把 msg 的内容当作 html 放在标签中

v-bind:属性名=’msg’ 把 msg 的值传给 i 属性名

:属性名=’msg’ v-bind 可以省略 v-bind

属性的动态参数绑定 :[属性变量名]=’属性的变量值’

4.绑定事件

v-on:事件名=’函数名’ 简写：@事件名=’函数名(参数)’

函数的声明

new Vue({
  methods: {
    //这里声明所有的方法
    show() {
      alert("111");
    },
  },
});

方法内部，可以通过 this 访问 data 里面的值，也可访问 methods 中的值。

方法内部，可以直接访问 event，得到事件对象

事件对象作为参数传递： $event

阻止事件冒泡

** ** @事件名.stop 阻止自己身上的事件冒泡

@事件名.prevent=’fun’ 阻止默认事件，再让事件执行 fun

监听组件中根元素的原生事件

** **@事件名.native=’fun’

当我们需要监听一个组件的原生事件时，必须给对应的事件加上.native 修饰符，才能监听到。
（vue3.0 已删除，不用修饰符了。直接可以监听）

只能点击一次

@click.once 只能触发一次回调

键盘事件

@keyup

@keydown

@keypress

@键盘事件.keycode keycode 对应的键盘码（数字）

@键盘事件.keyname keyname 对应的键盘的名字(名字如下：)

enter

space 空格

up,down,left,right 上下左右键

一个键代表两个意思，触发无效，可以通过键码的重命名

Vue.config.keyCodes.key1=49;//给键盘码重命名

5. 样式

class

1 :class=’.classname 对应的变量’ ;

2 :class=’[class1,class2]’ //class1,class2 都是 data 中的变量** **

3 :class=’{classname:boolean，classname2:boolean}’ //classname 不是变量！

boolean 是 true,添加类

boolean 是 false，不添加类

4 :class=’[{classname:boolean},class2]’ //数组套对象

5 :class=[p1,{‘text-color’:true}]

‘text-color’ 任何地方的连字符类型的必须加引号

6.支持三元运算符

style

style 写的对象的话就是用 v-bind 绑定一个对象。 key 是不加引号的。 value 要加。特别是如果 style 是个回调函数返回值必须是个对象，属性得 key 值为小驼峰写法。
比如：

** ** 1.值必须是对象 {color:’red’} 或 {color:data 变量}

2.对象可以是变量直接传 data 里的 css 对象 –style=”css”，**或者计算属性**。

6. 条件渲染

v-show 值是 boolean，不是 boolean 值会转成布尔值。

** ** v-if 同上（都是显示和隐藏）

区别

v-show, 节点都会渲染，只渲染一次，后面的切换靠，改变 display 样式切换的频率高才使用。

v-if，满足条件才渲染,每次切换都要渲染，dom 要改变。切换的频率不高情况下用

v-else-if 同 js - else if 语法

v-else 同 else 语法

7. 循环渲染

v-for=’v in arr’

v 代表数组的每个值，如果要再 html 标签之间访问

属性绑定： :属性名=’v’

写的位置：循环谁，就写在谁上面

** 对象的遍历**

** ****

===

//v 代表值 index 代表键名**

数组中 v 代表数据，i 代表下标

key 还有可以解决 vue 底层对相同组件复用的问题

在 v-for 循环中 key 一定要和 v(item)一一对应(key 需要使用 :key 动态绑定)。不能使用 index,因为 index 容易发生变化，达不到性能的高效利用。
一般实际开发中 key 都是绑定唯一值的，因为 item 重复，也会报错。

–v-for 优化

使用 key 或 track-by

vue1.0 中 track-by

数据修改时，只有数据改变了才会重新渲染 dom。不能显示重复数据
参数
- 使用数据中的唯一字段 u_id
- $index

>>vue2.0 中的 key

同上
建议尽量在使用 v-for 时提供 key，除非遍历结果不需更新。
理想的 track-by 和 key 是遍历对象每项都有且唯一的 id

8. v-model

数据双向绑定表单输入

是 :value 和 @input 两个事件一起实现的 <<

- v-bind:value="data(data中绑定的数据)" 
- @input="data=$event.target.value"

radio

v-model 可以给默认值，和 value 的值要对齐可以获取值

checkbox

v-model 绑定的值是个数组类型

可以给默认值，和 value 的值要对应

可以获取值

select

1
2
3

<select v-model="sel">
  <option v-for="v in hobby">{{v}}</option>
</select>

sel 代表当前选择的值

修饰符

v-model.lazy 不是实时更新绑定的数据，只有敲回车才更新
v-model.number 把输入的类型都转换为 number
v-model.trim 去除前后的空格

9. computed

计算属性

计算属性有缓存，只有当发生变化的时候，才会再次执行。而 methods 的只要调用就会执行。计算属性效率更高。

必须有返回值，直接用方法名调用。
访问直接用属性名访问 因为计算属本质性就个属性，调用是只是的调用了计算属性的 get 来读取

fullName:{
  //set百分之90的情况下都不会用
  set:function(newValue){
    const names = newValue.split(' ')
    this.message=names[0];
    this.message2=names[1]
  },
   get:function(){
      return this.message+' '+this.message2
    }
}

10. Watch

监听器 –监听实例 data 的变化

如果参与改变的数据比较多，每个都需要侦听，反而复杂化了，但是有异步任务时，侦听器更好用。

watch:{
  msg(v){ //需要和data里面的数据名一样，相当于监听对应数据变化
    // 方法有两个属性  newData,oldData。
    // 只写一个属性 默认 是newData （更新后数据）
      console.log(v); //v就是变化的值
  },
  arr:{ //代表监听data里面的 arr属性变量
    handler:function (v){
      console.log(v); //仅仅只能侦听到本来静态的数组，对数组的内容的改变检测不到
      let total=0;
      for(let i=0;i<v.length;i++){
        total += v[i].price*v[i].name
      }
    },
    deep:true, //检测数组内部内容的改变
    immediate:true //立刻执行
  }
}

99. Vue 中输入空格

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议，转载请注明出处！

Vuex 上一篇

vue cli3 less变量 undefinde解决下一篇