学习目标：
Vue基础
学习内容：
Vue简介
什么是Vue
- Vue(读音/vju:/,类似于view)是一套用于构建用户界面的前端框架。
Vue的两个特性
数据驱动视图：vue会监听数据的变化，从而自动重新渲染页面的结构。
注意：数据驱动视图是单向的数据绑定。
- 双向数据绑定：在填写表单内容时，可以辅助开发者在不操作DOM的前提下，自动把用户填写的内容同步到数据源
好处：开发者不再需要手动操作DOM元素来获取表单元素最新的值。
MVVM
- MVVM是vue实现数据驱动和双向数据绑定的核心原理。
- MVVM指的是Model、View和ViewModel，它把每个HTML页面都拆分成了这三个部分。
- 在MVVM概念中，Model表示当前页面渲染时所依赖的数据源；View表示当前页面所渲染的DOM结构；ViewModel表示vue的实例，它是MVVM的核心。
MVVM的工作原理
- ViewModel作为MVVM的核心，是它把当前页面的数据源（Model）和页面的结构（View）连接在了一起。
- 当数据源发生变化时，会被ViewModel监听到，VM会根据最新的数据源自动更新页面的结构。
- 当表单元素的值发生变化时，也会被VM监听到，VM会把变化过后更新的值自动同步到Model数据源中。
Vue的基本使用
基本使用步骤
-
导入vue.js的script脚本文件。
-
在页面中声明一个将要被vue所控制的DOM区域。
-
创建vm实例对象（vue实例对象）。
-
实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app">{{ username }}</div> <!--1.导入Vue的库晚间，在window全局就有了Vue这个构造函数--> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <!--2.创建Vue的实例对象 --> <script> // 创建Vue的实例对象 const vm = new Vue({ // el属性时固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器 el: '#app' // data对象就是要渲染到页面上的数据 , data: { username: 'zhangsan' } }) </script> </body> </html>
Vue的指令与过滤器
指令的概念
- 指令是vue为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。
vue的六大类指令
- 内容渲染指令
- 属性绑定指令
- 事件绑定指令
- 双向绑定指令
- 条件渲染指令
- 列表渲染指令
注意：指令是vue开发中最基础、最常用、最简单的知识点。
内容渲染指令
内容渲染指令用来辅助开发者渲染DOM元素的文本内容。常用内容渲染指令有如下3个：
- v-text：
注意：v-text指令会覆盖元素内默认的值<!--显示username的值--> <p v-text="username"></p> <!--性别会被gender的值覆盖--> <p v-text="gender">性别：</p> - {{}}：vue提供的{{}}语法，专门用来解决v-text会覆盖默认文本内容的问题。这种{{}}语法的专业名称是插值表达式（Mustache）。
<!--使用插值表达式，将对应的值渲染到元素的内容节点中，--> <!--同时保留元素自身的默认值--> <p>姓名：{{username}}</p> <p>性别：{{gender}}</p> - v-html：v-text指令和插值表达式只能渲染纯文本，如果要把包含HTML标签的字符串渲染为页面的html元素则需要用到v-html这个指令。
<!--在data中定义名为doscription的数据，数据的值为包含HTML标签的字符串：--> <!--'<h4 style="color: red">Vue.js</h4>'--> <p v-html="description"></p>
属性绑定指令
-
如果需要为元素的属性动态绑定属性值，则需要用到v-bind属性绑定指令，可以简写为英文的:。用法示例如下：
<!--vue规定 v-bind指令可以简写为 :--> <input type="text" v-bind:placeholder="tips"> <input type="text" :placeholder="tips"> -
在使用v-bind 属性绑定期间，如果绑定内容需要进行动态拼接，则字符串外面应该包裹单引号，例如：
<div :title="'box'+tips">这是一个 div</div>
事件绑定指令
-
vue提供了v-on事件绑定指令，用来辅助程序员为DOM元素绑定事件监听，可以简写为@。语法格式如下：
<!--在绑定事件处理函数的时候，可以使用()传递参数--> <!--v-on:指令可以简写为 @--> <p>count的值：{{ count }} </p> <button v-on:click="add">+1</button> <button @click="sub(2)">-2</button>注意：原生DOM对象有onclick、oninput、onkeyup等原生事件，替换为vue的事件绑定形式后，分别为：v-on:click、v-on:input、v-on:keyup
-
vue 提供了内置变量，名字叫做$event，它是原生DOM的事件对象e
-
事件修饰符：在事件处理函数中调用event.prentDefault()或event.stopPropagation()是非常常见的需求。因此，vue提供了事件修饰符的概念，来辅助程序员更方便的对事件的触发进行控制。常用的5个事件修饰符如下：
.prevent:阻止默认行为（例如：阻止a链接的跳转、阻止表单的提交等）
.stop：阻止事件冒泡
.capture：以捕获模式触发当前的事件处理函数
.once：绑定事件只触发1次
.self：只有在event.target是当前元素自身时触发事件处理函数 -
按键修饰符：在监听键盘事件时，可以为键盘相关事件添加案件修饰符
双向绑定指令
-v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。它本质上是语法糖，负责监听用户的输入事件以更新数据，
-
.lazy:在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步：
<!-- 在“change”时而非“input”时更新 --> <input v-model.lazy="msg"> -
.number :自动将用户的输入值转为数值类型
<input v-model.number="age" type="number"> -
.trim:自动过滤用户输入的首尾空白字符
<input v-model.trim="msg">
条件渲染指令
条件渲染指令用来辅助开发者按需控制DOM的显示与隐藏。条件渲染指令有两个：v-if和v-show
- v-if：每次动态创建或移除元素，实现元素的显示和隐藏。v-if可以单独使用或配合v-else、v-else-if指令一起使用。
- v-show：动态为元素添加或移除display:none样式，来实现元素的显示和隐藏。
注意：如果频繁得到切换元素的显示状态，用v-show；如果刚进入页面的时候，某些默认不需要被展示，而且后期这个元素可能也不被展示出来，此时v-if性能更好；在实际开发过程中不需要考虑性能，可以直接使用v-if
列表渲染指令
- vue提供v-for指令，用来辅助开发者基于一个数组来循环渲染相似的 UI结构。
- v-for指令需要使用item in items的特殊语法，其中：items是待循环的数组，item是当前的循环项。
- v-for指令还支持一个可选的第二个参数，即当前项的索引。
注意：v-for指令中的item项和index索引都是形参，可以根据需要重命名。 - 列表数据变化时，vue会尽可能的复用已有DOM元素，从而提升渲染性能。但这种默认性能优化策略会导致有状态的列表无法被正确更新。为了保证正确更新，需要为每项提供唯一的key属性
注意：key值只能时字符串或数字类型；key值必须具有唯一性；使用index的值当作key的值没有任何意义；使用v-for指令必须指定key值
过滤器
过滤器常用于文本的格式话。例如 hello -> Hello。过滤器应该被添加在JavaScript表达式的尾部，由”管道符“进行调用。
过滤器可以用在两个地方：插值表达式和v-bind属性绑定。
定义过滤器
在创建vue实例期间，可以在filters节点中定义过滤器，示例代码如下：
filters: {
// 把首字母转为大写的过滤器
capitalize(str) {
return str.charAt(0).toUpperCase() + str.slice(1)
}
}
私有过滤器和全局过滤器
- 在filters节点下定义的过滤器称为私有过滤器，只能在当前vm实例所控制的el区域内使用。
- 如果希望在多个vue实例之间共享过滤器，则可以按照如下配置全局过滤器
// 全局过滤器 -独立于每个vm实例之外 // Vue.filter()方法接受两个参数： // 第一个参数为过滤器名称 // 第二个过滤器为过滤器的处理函数 Vue.filter('capitalize',(str) =>{ return str.charAt(0).toUpperCase() + str.slice(1) })
连续调用多个过滤器
按照执行顺序，依次添加过滤器
<p>姓名：{{ username | capitalize | maxLength}}</p>
过滤器传参
<script>
Vue.filter('capitalize',(str) =>{
return str.charAt(0).toUpperCase() + str.slice(1)
})
Vue.filter('maxLength',(str,maxLength) =>{
if(str.length <= maxLength) {
return str
} else {
return str.split(0,maxLength) + '...'
}
})
</script>
<p>姓名：{{ username | capitalize | maxLength(5)}}</p>
过滤器的兼容性
只有vue1.x和2.xz支持，如果使用vue3.x，则可以使用计算属性来替换过滤器
扫一扫
3508
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
