[JavaScript知识库] Vue基础笔记脚手架、指令、语法

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Vue基础笔记脚手架、指令、语法 -> 正文阅读

[JavaScript知识库]Vue基础笔记脚手架、指令、语法

Vue简介

Vue，渐进式jsvasript框架，一套拥有自己规则的语法
渐进式: 逐渐进步, 想用什么就用什么, 不必全都使用
库: 封装的属性或方法 (例jquery.js)
框架: 拥有自己的规则和元素, 比库强大的多 (例vue.js)

脚手架

脚手架，一套固定标准的，文件夹+文件+webpack配置
好处：开箱即用，0配置webpack，babel支持，css, less支持，开发服务器支持
使用，需要下载，yarn global add @vue/cli

脚手架创建项目

创建项目：vue create 项目名称
修改自定义配置：

/* 覆盖webpack的配置 */
module.exports = {
  devServer: { // 自定义服务配置
    open: true, // 自动打开浏览器
    port: 3000
  }
}

eslint：脚手架内置代码检查工具，可以设置关闭

module.exports = {
	lintOnSave:false;//关闭eslint检查
}

App.vue文件是整个应用的根组件，写在这里面的代码才会运行
template里面写html，script里面写js，style里面写css
脚手架里的vue文件，是独立模块，互不影响

Vue语法

插值表达式，可以在dom标签中插入内容
语法：{{ 表达式 }}
这个表达式是vue数据变量，要在data函数中声明
代码说明：

<template>
  <div>
    <h1>{{ msg }}</h1>
    <h2>{{ obj.name }}</h2>
  </div>
</template>

<script>
export default {
  data() { // 格式固定, 定义vue数据之处
    return {  // key相当于变量名
      msg: "hello, vue",
      obj: {
        name: "小vue"
      }
    }
  }
}
</script>

Vue指令

1.在data函数里声明

1.1动态属性

动态属性，语法：v-bind:属性名 = “vue变量”
简写：:属性名=“vue变量”
代码示例：

<template>
  <div>
    <!-- v-bind:属性名="变量" -->
    <a v-bind:href="url">去百度</a>
    <a :href="heimaurl">去黑马</a>
  </div>
</template>
<script>
export default {//Vue 组件中的固定写法，专门用于定义变量
  data(){
    return {
      url:"http://www.baidu.com",
      heimaurl:"http://www.itheima.com"
    }
  }
}
</script>

1.2动态class

用v-bind给标签class设置动态的值
语法：:class="{类名: 布尔值}"
代码示例：

<template>
  <div>
    <!-- 动态class ，让类名根据 Boolean 值决定是否添加
    语法： ：class="{类名：布尔值}"-->
    <p :class="{ pinkStr: bl }">我是一个p标签</p>
  </div>
</template>
<script>
export default {
  name: "VueBasicApp",
  data() {
    return {
      bl: false,
    };
  },
};
</script>
<style scoped>
.pinkStr {
  color: pink;
}
</style>

1.3动态style

给标签动态设置style的值
语法：:style="{css属性: 值}"
代码示例：

<template>
  <div>
    <!-- 动态style ，让类名根据 Boolean 值决定是否添加
    语法： ：style="{css属性名：css属性值}"-->
    <p :style="{ color: color }">我是一个p标签</p>
  </div>
</template>
<script>
export default {
  name: "VueBasicApp",
  data() {
    return {
      bl: false,
      color: "green",
    };
  },
};
</script>
<style scoped>
.pinkStr {
  color: pink;
}
</style>

2.在methods对象里定义方法

2.1事件绑定

语法：v-on:事件名=“methods中的函数”
简写：@事件名=“methods中的函数”
代码示例：

<template>
  <div>
    <p>你要购买商品的数量:{{ count }}</p>
    <!-- v-on事件绑定，语法： v-on:事件名=" methods 中的函数名"-->
    <button v-on:click="addFn">点我加一</button>
    <!-- 在 v-on 指令绑定时间时，事件处理函数后加括号，表示传参，不是调用 -->
  </div>
</template>
<script>
export default {
  data(){
    return {
      count:0
    }
  },
  methods:{
    addFn(){
      //在 methods 中访问 data 的数据只需要在前面加 this 即可
      this.count++
    }
  }
}
</script>

2.2事件对象

语法：无传参, 通过形参直接接收；传参, 通过$event指代事件对象传给事件处理函数
代码示例：

<template>
  <div>
    <a @click="one" href="http://www.baidu.com">阻止百度</a>
    <hr>
    <a @click="two(10, $event)" href="http://www.baidu.com">阻止去百度</a>
  </div>
</template>
<script>
export default {
  methods: {
    one(e){
      e.preventDefault()
    },
    two(num, e){
      e.preventDefault()
    }
  }
}
</script>

2.3事件修饰符

语法：@事件名.修饰符=“methods里函数”
.stop，阻止事件冒泡
.prevent，阻止默认行为
代码示例：

<template>
  <div @click="fatherFn">
    <button @click.stop="sonFn">儿子阻止冒泡</button>
    <!-- .stop阻止冒泡     .prevent阻止事件默认行为 -->
    <a @click.prevent href="http://www.baidu.com">阻止默认行为,不去百度</a>
  </div>
</template>
<script>
export default {
  methods:{
    fatherFn(){
      console.log('爸爸被点了');
    },
    sonFn(){
      console.log('儿子被点了');
    }
  }
}
</script>

2.4按键修饰符

keyup、keydown、keypress都可以使用
@keyup.enter ，监测回车按键
@keyup.esc，监测返回按键
代码示例：

<template>
  <div>
    <!-- 按键修饰符：给键盘事件增加功能 -->
    <!-- 按下指定的按键才会触发事件 -->
    <input @keydown.enter="enterFn" type="text">
    <hr>
    <input @keydown.esc="escFn" type="text">
  </div>
</template>
<script>
export default {
  name: 'VuecliDemoApp',
  methods: {
    enterFn(){
      console.log('回车被按下了');
    },
    escFn(){
      console.log('esc被按下了');
    }
  },
};
</script>

2.5双向绑定

目前仅用于表单元素上，把表单值和Vue变量双向绑定
语法：v-model=“vue数据变量”
双向数据绑定：数据变化 -> 视图自动同步；视图变化 -> 数据自动同步
下拉菜单的 v-model 写在 select 上
复选框中，v-model 绑定的变量有两种情况：
1. 数组类型，将选中的表单元素 value 值加入到数组中
2. 非数组类型，绑定的是复选框的 checked 属性，复选框的勾选状态，选中为 true ，未选中为 false ，最终都会转为 boolean 类型,开发中常用
代码示例：

<template>
  <div>
    用户名:<input v-model="username" type="text"><br>
    来自于:<select v-model="from">
      <option value="bj">北京</option>
      <option value="sh">上海</option>
      <option value="wh">武汉</option>
    </select><br>
    爱好: 
    <input v-model="isChecked1" type="checkbox" value="smoke">唱歌
    <input v-model="isChecked2" type="checkbox" value="drink">跳舞<br>
    性别:<input v-model="gender" type="radio" name="gender" value="male">男
    <input v-model="gender" type="radio" name="gender" value="female">女
  </div>
</template>
<script>
export default {
  data(){
    return {
      username:'dd',
      from:'wh',
      isChecked1:'',
      isChecked2:'',
      gender:''
    }
  }
}
</script>

2.6v-model修饰符

语法：v-model.修饰符=“vue数据变量”
.number，以parseFloat转成数字类型
.trim，去除首尾空白字符
.lazy，在change时触发而非inupt时
代码示例：

<template>
  <div>
    <div>
      <span>年龄</span>
      <input v-model.number="age" type="text">
    </div>
    <div>
      <span>人生格言</span>
      <input v-model.trim="motto" type="text">
    </div>
    <div>
      <span>自我介绍</span>
      <textarea v-model.lazy="intro" name="" id="" cols="30" rows="10"></textarea>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      age:'',
      motto:'',
      intro:''
    };
  }
};
</script>

2.7v-html

语法：v-html=“vue数据变量”
此方法会覆盖插值表达式
代码示例：

<template>
  <div>
    <!-- v-html   v-text   设置标签显示的内容
    注意：标签内不要再写其他内容，会覆盖插值表达式
    -->
      <p v-html="content">{{ msg }}</p>
      <p v-text="content">{{ msg }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      content:'<strong>我是文字</strong>',
      msg:'你好啊'
    };
  }
};
</script>

2.8显示或隐藏

语法：v-show=“vue变量”
语法：v-if=“vue变量”
不同点：
1. v-show 是设置 display 为 none
2. v-if 是直接从 DOM 上移除和添加，可以配合 v-else 使用，构成 if…else… 语句
代码示例：

<template>
  <div>
    <!-- 显示隐藏，语法：v-show="vue变量（一般是 布尔值）" 
    v-if ：原理是直接从 DOM 树上移除和添加，支持 v-else-->
    <h2 v-show="isShow">我是用的v-show</h2>
    <h1 v-if="isShow">我是用的v-if</h1>
    <!-- v-else 所在的标签必须和 v-if 所在的标签同级，且连在一起 -->
    <p v-if="age >= 18">这些小孩子不能看</p>
    <p v-else>这些小孩子可以看</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShow:true,
      age:20
    };
  }
};
</script>

2.9v-for循环

用数据循环生成标签
语法：v-for="(值变量, 索引变量) in 目标结构"
可以遍历数组/对象/数字/字符串
v-for的临时变量名不能用到v-for范围外，同级标签的key值不能重复
注意：v-for和v-if不能一起使用
代码示例：

<template>
  <div >
    <ul>
      <!-- v-for:循环创建元素 
      在循环的过程中会有一个循环变量，第一次循环 item 就是数组的第一个元素-->
      <li v-for="(item,index) in arr" :key="index">{{item}} </li>
    </ul>
    <ul>
      <li v-for="(item,index) in objArr" :key="index">
        姓名:{{ item.name }}
        年龄:{{item.age}}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr:[5,10,15,20,25,30],
      objArr:[
        {name:'zs',age:10},
        {name:'ww',age:20},
        {name:'dd',age:30},
        {name:'yy',age:40},
      ]
    };
  }
};
</script>

3.在computed定义计算属性

3.1计算属性基础写法

计算属性：一个数据, 依赖另外一些数据计算而来的结果
缓存：计算属性第一次获取结果后会将结果存入缓存中，直到下一次依赖的数据变化才会重新计算结果再次放入缓存
代码示例：

<template>
  <div>
    <p>单价:{{ price }}</p>
    <p>数量:{{ count }}</p>
    <!-- 计算属性的用法和data 中的数据一样，虽然是函数，但不要加括号调用 -->
    <!-- 计算属性相对于函数调用的优势在于 有缓存 -->
    <p>总价:{{ total }}</p>
  </div>
</template>
<script>
export default {
  name: "VueBasicApp",
  data() {
    return {
      price: 30,
      count: 5,
    };
  },
  //计算属性：依赖其他数据计算得来的结果
  computed: {
    //计算属性名（）{return 值}
    total() {
      return this.price * this.count;
    },
  },
};
</script>

3.2计算属性完整写法

计算属性也是变量, 如果想要直接赋值, 需要使用完整写法
代码示例：

<template>
  <div>全名: <input v-model="fullname" type="text" /></div>
</template>
<script>
export default {
  name: "VueBasicApp",
  data() {
    return {
      firstname: "爱新觉罗",
      lastname: "溥仪",
    };
  },
  computed: {
    //v-model 绑定后，用户修改文本框的内容。fullname 就会被重新赋值
    //计算属性被重新赋值时，会执行 set 函数，并且传入最新的数据
    fullname: {
      set(val) {
        console.log(val);
        let arr = val.split(".");
        this.firstname = arr[0];
        this.lastname = arr[1];
      },
      get() {
        return this.firstname + "." + this.lastname;
      },
    },
  },
};
</script>

4.在watch中定义侦听器

4.1侦听器基础使用

可以侦听data/computed属性值改变
代码示例：

<template>
  <div>用户名：<input v-model="username" type="text" /></div>
</template>
<script>
export default {
  name: "VueBasicApp",
  data() {
    return {
      username: "",
    };
  },
  watch: {
    //watch语法：watch:{"被侦听的属性名"(newval,oldval){}}
    //函数名就是要侦听的属性名
    //参数可以是一个或没有
    username() {
      // console.log(newval,oldval);
      console.log(this.username);
    },
  },
};
</script>

4.2侦听器的深度侦听

侦听复杂类型
代码示例：

<template>
  <div>
    <p>姓名:<input v-model="p1.name" type="text" /></p>
    <p>年龄:<input v-model="p1.age" type="text" /></p>
  </div>
</template>
<script>
export default {
  name: "VueBasicApp",
  data() {
    return {
      p1: {
        name: "dd",
        age: 20,
      },
    };
  },
  watch: {
    //watch语法：watch:{"被侦听的属性名"(newval,oldval){}}
    //默认情况下只能侦听基本数据类型，无法侦听引用类型的数据修改
    //函数名就是要侦听的属性名
    p1: {
      deep: true, //表示深度侦听，可以用于侦听引用数据类型  对象/数组
      handler(newval) {
        //如果使用 watch 监听引用类型的数据，newval 和oldval 是同一个对象，所以数据是一样的，都是最新的数据
        //一般不需要 oldval
        console.log(newval);
      },
    },
  },
};
</script>

5.关于v-for的更新及key

5.1v-for更新监测

目标结构变化, 触发v-for的更新
1. 会修改新数组的方法，会导致更新**（push()、pop()、shift()、unshify()、splice()、sort()、reverse()）**
2. 不会修改新数组的方法，不会导致更新**（filter()、concat()、slice()）,可采用覆盖数组或this.$set()**

5.2v-for的key

v-for就地更新,当数组改变后是如何更新的
虚拟DOM，在document对象上, 渲染到浏览器上显示的标签，本质是保存节点信息, 属性和内容的一个JS对象，在内存中比较变化部分, 然后给真实DOM打补丁(更新) 。将旧的虚拟Dom与新的虚拟Dom作比较，只有不同的地方才会产生变化，最后产生真实Dom。优点是：提高DOM更新的性能, 不频繁操作真实DOM
在v-for中的 key :
1. 无key，就地复用，逐层对比DOM元素，尽可能多的复用DOM元素
2. 有key，值为索引, 基于key来比较新旧虚拟DOM, 还是就地更新
3. 有key，值为id属性, 基于key的来比较新旧虚拟DOM, 只更新有变化的部分
4. key的值唯一不重复的字符串或者数字
5. 有id用id，无id用索引
6. key的好处是：可以提高更新的性能