vue学习笔记 | 一锅炖不下的博客

创建`vue`实例：

const app = new vue({ // 数据挂在在app实例下，可通过app.count访问
	el: '#app', //关联容器
	data: { // 数据
        count: 100,
        num: 99
    },
    methods: { //函数
        fn () {
           console.log('')
           this.count++; // this指向当前实例
        } 
    }
})

插值表达式：

作用：动态渲染展示表达式的值
使用方法：

响应式特性：插值表达式中的值修改后，页面会动态刷新

vue指令：v-html等带有v-前缀的标签属性，会根据不同的指令，针对标签实现不同的功能

v-show：通过通过 CSS display 切换显示控制元素显示隐藏
v-if：通过动态添加/移除 DOM 节点的方式控制元素显示隐藏（条件渲染）

特性	`v-if`	`v-show`
渲染机制	动态添加/移除 DOM 节点	通过 CSS `display` 切换显示
初始渲染成本	更高（条件为假时不会渲染）	更低（无论条件如何都会渲染）
切换成本	更高（涉及 DOM 操作）	更低（仅修改 CSS）
适用场景	条件很少改变，或需要彻底销毁组件	频繁切换显示状态
生命周期	触发组件的 `created`/`destroyed`	无生命周期变化

v-else和v-else-if：辅助v-if判断渲染
v-on：注册事件
- 作用：注册事件=添加监听+提供处理逻辑
- 语法：
  - v-on:事件名=“内联语句”
    1
    2
    3
    <button v-on:click="count++">
    按钮
    </button>
    可以简化为：
    1
    2
    3
    <button @click="count++">
    按钮
    </button>
  - v-on:事件名=“methods中的函数名”
    1
    2
    3
    <button @click="fn(5)"> //可传参
    按钮
    </button>

v-bind：

作用：动态设置html的标签属性，如src，url，title等

语法：v-bind:属性名=“表达式”

1	<img v-bind: src="imgUrl" >

简化：

1	<img : src="imgUrl"

操作class：v-bind:属性名=“表达式”，通过以下方式可以动态控制样式

<style>
    .pink {
        
    }
    .big {
        
    }
</style>
<body>
    //对象 → 键就是类名，值是布尔值。如果值为 true，有这个类，否则没有这个类
    <div class="box" :class="pink: true, big: true"/>
    //数组 → 数组中所有的类，都会添加到盒子上，本质就是一个 class 列表
    <div class="box" :class=['pink', 'big']>
        
    </div>
</body>

动态控制行内样式：:style=”样式对象；适用场景:某个具体属性的动态设置
1
2
3
<div class="inner" :style="{ width: percent +'%'}">
{{ percent }}%</span>
</div><span>

v-for：
- 作用：基于数据循环，多次渲染元素，数据包括数组、对象、数字
- 遍历语法：v-for=“(item, index) in 数组”
  1
  2
  3
  <li v-for="(item, index) in list">
  {{ item }} - {{ index }}
  </li>
- key：
  - 语法：·如果不加key，在删除时默认原地修改元素，而不是直接删除元素
  1
  <li v-for=“(item, index) in 数组” :key="item.id"></li>
  1. key 的值只能是字符串或数字类型
  2. key 的值必须具有唯一性
  3. 推荐使用 id 作为 key(唯一)，不推荐使用 index作为 key(会变化，不对应)
v-model:
- 作用：作用:给 表单元素 使用，双向数据绑定 → 可以快速获取或设置表单元素内容，数据变化- 视图自动更新，视图变化>数据自动更新
- 语法：v-model=“变量”
- 输入框 input:text value
  文本域 textarea value
  复选框 input:checkbox checked
  单选框 input:radio checked
  下拉菜单 select value
指令修饰符
- 按键修饰符
  键盘回车监听@keyup.enter
- v-model修饰符
  v-model.trim→去除首尾空格
  v-model.number→转数字
- 事件修饰符
  @事件名.stop→阻止冒泡
  @事件名.prevent→阻止默认行为
computed计算属性
- 语法：在vue实例的computed属性中写类似函数的东西，使用时作为属性直接使用，不用加括号
- 与methods的区别：比methods中的方法好的地方在于，computed计算属性的值会缓存，第一次计算之后，后面只要属性值没变，不要再重新计算；methods侧重于业务逻辑，cpmputed负责计算属性
  1
  2
  3
  4
  5
  computed: {
  total() { // 计算list中item的num属性之和sum
  return this.list.reduce((sum, item) => sum + item.num);
  }
  }
- 计算属性完整写法：这样既能由各部分计算得出计算属性值，也能反向通过计算属性的修改影响各组成部分的值
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  computed:{
  计算属性名:{
  get(){
  一段代码逻辑(计算逻辑)return 结果
  },
  set(修改的值){
  一段代码逻辑(修改逻辑)
  }
  }
  }
watch监听器

创建vue实例：

插值表达式：

响应式特性：插值表达式中的值修改后，页面会动态刷新

创建`vue`实例：