Vue基础的学习

Vue3学习笔记

一，Vue指令

1.内容渲染指令

• v-text

  • 该指令会覆盖元素内默认的值

  • <p v-text="username"></p>
    

• {{ }}

  • 插值语法

  • <p>姓名：{{username}}</p>
    

• v-html

  • 可以把包含HTML标签的字符串渲染为页面的HTML元素，不常用。

2.属性绑定指令

想要动态响应式的绑定一个属性attribute，可以使用v-bind指令

<div v-bind:id="dynamicId"></div>

v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicId 属性保持一致。如果绑定的值是 null 或者 undefined，那么该 attribute 将会从渲染的元素上移除。

因为属性绑定比较常用，提供了特定的简写语法：

<div :id="dynamicId"></div>

开头为 : 的 attribute 可能和一般的 HTML attribute 看起来不太一样，但它的确是合法的 attribute 名称字符，并且所有支持 Vue 的浏览器都能正确解析它。此外，他们不会出现在最终渲染的 DOM 中。简写语法是可选的，但相信在你了解了它更多的用处后，你应该会更喜欢它。

此外，v-bind支持JavaScript表达式，不过也仅仅支持表达式

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div :id="`list-${id}`"></div>

3.事件绑定指令

• 语法

vue提供了v-on事件绑定指令，用来辅助程序员为DOM元素绑定事件监听

const vm = new Vue({
	el:'#app',
	data:{count:0},
	methods:{
		addCount(){
			this.count++;
		}
	}
})

<button v-on:click="addCount">+1</button>

v-on使用频率也很高，提供了简写形式@

完整的指令语法：

• 事件修饰符
  • .stop 阻止事件冒泡
  • .prevent 阻止默认行为
  • .self 只有在event.target是当前元素自身时触发事件处理函数
  • .capture 以捕获模式触发当前的事件处理函数
  • .once 绑定的事件只触发一次

4.双向绑定指令

vue 提供了 v-model 双向数据绑定指令，用来辅助开发者在不操作 DOM 的前提下，快速获取表单的数据。

<p>用户名：{{username}}</p>
<input type="text" v-model="username"/>

<p>选中的身份是：{{province}}</p>
<select v-model="province">
	<option value="">请选择</option>
	<option value="1">北京</option>
	<option value="2">上海</option>
	<option value="3">河北</option>
</select>

• v-model指令修饰符

5.条件渲染指令

条件渲染指令用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个，分别是：

• v-if
• v-show

v-if 和 v-show 的区别 实现原理不同：

• v-if 指令会动态地创建或移除 DOM 元素，从而控制元素在页面上的显示与隐藏；

• v-show 指令会动态为元素添加或移除 style=“display: none;” 样式，从而控制元素的显示与隐藏；

性能消耗不同： v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。

• 如果需要非常频繁地切换，则使用 v-show 较好
• 如果在运行时条件很少改变，则使用 v-if 较好

v-else

v-if 可以单独使用，或配合 v-else 指令一起使用

v-else-if

v-else-if 指令，顾名思义，充当 v-if 的“else-if 块”，可以连续使用

<div v-if="type === 'A'">优秀</div>
<div v-else-if="type === 'B'">良好</div>
<div v-else-if="type === 'C'">一般</div>
<div v-else>不及格</div>

6.列表渲染指令

• v-for

我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名：

data() {
  return {
    items: [{ message: 'Foo' }, { message: 'Bar' }]
  }
}
<li v-for="item in items">
  {{ item.message }}
</li>

• v-for索引

v-for 指令还支持一个可选的第二个参数，即当前项的索引。语法格式为 (item, index) in items，示例代码如下：

具体参考列表渲染 | Vue.js (vuejs.org)

data() {
  return {
    myObject: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
}
<ul>
  <li v-for="value in myObject">
    {{ value }}
  </li>
</ul>
<!-- 可以通过提供第二个参数表示属性名 (例如 key)： -->
<li v-for="(value, key) in myObject">
  {{ key }}: {{ value }}
</li>
<!-- 第三个参数表示位置索引： -->
<li v-for="(value, key, index) in myObject">
  {{ index }}. {{ key }}: {{ value }}
</li>

• 在 v-for 里使用范围值

v-for 可以直接接受一个整数值。在这种用例中，会将该模板基于 1...n 的取值范围重复多次。

<span v-for="n in 10">{{ n }}</span>

注意此处 n 的初值是从 1 开始而非 0。

• v-for与v-if

同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。请转阅风格指南查看更多细节。

<!--
 这会抛出一个错误，因为属性 todo 此时
 没有在该实例上定义
-->
<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo.name }}
</li>

在外新包装一层 <template> 再在其上使用 v-for 可以解决这个问题 (这也更加明显易读)：

<template v-for="todo in todos">
  <li v-if="!todo.isComplete">
    {{ todo.name }}
  </li>
</template>

• 使用 key 维护列表的状态

当列表的数据变化时，默认情况下，vue 会尽可能的复用已存在的 DOM 元素，从而提升渲染的性能。但这种 默认的性能优化策略，会导致有状态的列表无法被正确更新。

为了给 vue 一个提示，以便它能跟踪每个节点的身份，从而在保证有状态的列表被正确更新的前提下，提升渲 染的性能。此时，需要为每项提供一个唯一的 key 属性：

<ul>
	<li v-for="user in list" :key="user.id">
        	<input type="checkedbox"/>
        	姓名：{{user.name}}
    </li>
</ul>

key 的注意事项

① key 的值只能是字符串或数字类型

② key 的值必须具有唯一性（即：key 的值不能重复）

③ 建议把数据项 id 属性的值作为 key 的值（因为 id 属性的值具有唯一性）

④ 使用 index 的值当作 key 的值没有任何意义（因为 index 的值不具有唯一性）

⑤ 建议使用 v-for 指令时一定要指定 key 的值（既提升性能、又防止列表状态紊乱）

二，过滤器

过滤器（Filters）常用于文本的格式化。例如： hello -> Hello

过滤器应该被添加在 JavaScript 表达式的尾部，由“管道符”进行调用，示例代码如下：

<!-- 在插值表达式中通过“管道符”调用过滤器 -->
<p>{{text | capitalize}}</p>

<!-- 在v-bind中通过“管道符”调用过滤器 -->
<div v-bind:id="message | capitalize">  </div>

过滤器的两个常用位置为，插值表达式和v-bind属性绑定

• 过滤器定义

const vm = new Vue({
	el:'#app',
	data:{
		message:'hello vue.js',
		info:'title info'
	},
	filters:{
		capitalize(str){
			return str.charAt(0).toUpperCase() + str.slice(1) 	
		}
	}

})

1.私有过滤器和全局过滤器

在 filters 节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前 vm 实例所控制的 el 区域内使用。

如果希望在多个 vue 实例之间共享过滤器，则可以按照如下的格式定义全局过滤器：

//全局过滤器，独立于每个VM实例之外
//两个参数
//一个过滤器的名字
//第二个是过滤器的处理函数
Vue.filter('capitalize',(str) => {
	return str.charAt(0).toUpperCase() + str.slice(1) 	
})

• 当然也可以连续调用多个过滤器

<p>{{text | capitalize | maxLength}}</p>

//全局过滤器 - 首字母大写
Vue.filter('capitalize',(str)=>{
    return str.charAt(0).toUpperCase() + str.slice(1) + '~~'  	
})
//全局过滤器 - 控制文本的最大长度
Vue.filter('maxLength',(str)=>{
    if(str.length <= 10) return str
    return str.slice(0,10)+'...'
})