vue基础总结

vue的作用

用更少的时间，干更多的活

vue是一个渐进式的JavaScript框架，一个mvvm框架

vue开发有两种方式

①传统开发模式：基于html/css/js文件开发vue

②工程化开发模式:在webpack环境中开发vue

vue脚手架

@vue/cli  可以帮助我们快速创建一个vue项目的基础架子

vue脚手架的特点

①开箱即用

②零配置

③内置babel等工具

vue脚手架的基本使用

①全局安装

npm i @vue/cli -g   或  yarn global add @vue/cli

②查看vue的版本

vue --version

③初始化一个vue项目

vue create 项目名（项目名不能用中文）

④启动项目，打包项目

yarn serve 或 npm run serve

yarn build 或 npm run build

一个vue文件就是一个组件

一个单文件组件由三部分组成

①template:结构（有且只能有一个根元素）

②script:js逻辑

③style：样式 如果需要less 那么就在style的属性里面添加 lang=“less” 

关于less的支持 脚手架内部已经配好了 只不过不会默认装这个包

原则是我们用到了less，再去安装这个包

安装命令

yarn add less-loader@7.2.1 less -D

vue如何提供数据

①通过data属性可以提供数据。data属性必须是一个函数

②这个函数需要返回一个对象，这个对象就代表vue提供的数据

例如

<script>
  data() {
    return {
      studentArr: [
        { id: 1, name: "zs", age: 16 },
        { id: 2, name: "ls", age: 18 },
        { id: 3, name: "ww", age: 17 },
        { id: 4, name: "cq", age: 17 },
        { id: 5, name: "ss", age: 19 },
      ],
    };
  },
};
</script>

插值表达式

小胡子语法{{}}

例如

//变量调用
<div>{{id}}</div>
//对象属性调用
<div>{{studentArr.id}}</div>
//字符串的方法调用
<div>{{msg.toUpperCase()}}</div>
//三元表达式调用
<div>{{obj.age>18?'成年' : '未成年'}}</div>

能使用三元表达式，但是不能使用if 和for

正常标签的内容部分可以使用{{}}

不能再标签属性中使用{{}}插值

vue指令

特殊的html标签属性。特点是v-开头

每一个v-开头的指令都有自己独立的功能

v-bind 

作用：动态设置html标签属性

用法

v-bind:标签属性名='变量'

简写语法     :标签属性名='变量'

v-on

作用：注册事件

用法

v-on:事件名='要执行的少量代码'

当逻辑只有一句话的就可以执行

例如

v-on:click='money++'

v-on:事件名='methods中的函数名'

值放在data中

方法放在methods中

例如

<script>
export default {
  methods:{
    getName(){
      return '大帅哥'
    }
  }
};
</script>

v-on: 可以简写成@

阻止默认行为

@click.prevent

阻止冒泡

@click.stop

可以串着使用 前后顺序没有影响 就是不能再事件名之前

@click.prevent.stop

按键修饰符

监听回车键

@keyup.enter

v-show 和 v-if 功能控制盒子的显示隐藏

v-show='true'  v-show='false' 

原理是 控制css中的 display：none

常用于需要频繁切换的场景

v-if="true" v-if="false" 

原理是 创建和删除节点

要么显示要么隐藏 v-if是惰性的

如果一开始就是 v-if='false'那么不会创建该节点 对于一直隐藏的元素， 可以提高性能

v-else  和v-else-if 使用的时候 需要紧贴着 才能被视为一组

例如

    <div v-if="arr.age > 14">14以上18一下</div>
    <div v-else-if="arr.age > 18">18了成年了</div>
    <div v-else>小孩子</div>

v-model 作用：给表单使用，双向绑定数据

v-model会忽略掉表单元素原本的value checked等初始值

v-model的修饰符

v-model.number

转数字 以 parse Float 转成数字类型

v-model.trim

去除首尾空白字符

v-model.lazy

在change时出发而非input时

v-for 作用可以遍历数组或者对象  用于渲染结构

遍历数组

 v-for ='item in 数组名'

v-for ='(item,index) in 数组名'

遍历对象

v-for='(value ,key) in 对象名'

遍历数字

v-for='item in 数字'

vue就地服用策略

vue会尽可能就地（同层级，同位置）对比虚拟dom，服用dom结构，进行差异化更新

虚拟dom：本质就是保持节点信息描述真实dom的js对象，可以用最少的属性结构，描述真实dom的js对象，提升了性能

diff算法

策略1：先同层级根元素比较，如果根元素变化，那么不考虑复用，整个dom树删除重建

策略2：对比同级兄弟元素时，默认按照下标进行对比复用，如果对比兄弟元素时，元素指定了key，那么就会按照相同的key元素来进行对比复用

【博学谷学习记录】超强总结，用心分享