vue基本使用1
vue基本使用1
1.什么是vue
官方给出的概念:Vue(读音/vju:/，类似于view)是一套用于构建用户界面的前端框架。
- 构建用户界面
- 用vue往html页面中填充数据，非常方便
- 框架
- 框架是一套现成的解决方案，程序员只能遵循框架的规范，去编写自己的业务功能
- 要学习vue，就是在学习vue框架中规定的用法
- vue的指令、组件(是对UI结构的复用)、路由、vuex、vue组件库
2.vue的特性
vue框架的特性,主要体现在如下两方面:
-
数据驱动视图
-
双向数据绑定
2.1 数据驱动视图
在使用了vue的页面中，vue 会监听数据的变化，从而自动重新渲染页面的结构。示意图如下;
好处:当页面数据发生变化时，页面会自动重新渲染
注意:数据驱动视图是单向的数据绑定。
2.2 双向数据绑定
在填写表单时，双向数据绑定可以辅助开发者在不操作DOM的前提下，自动把用户填写的内容同步到数据源中。示意图如下:
好处:开发者不再需要手动操作DOM元素，来获取表单元素最新的值!
- 在网页中，form表单负责采集数据，Ajax负责提交数据。
- js 数据的变化，会被自动渲染到页面上
- 页面上表单采集的数据发生变化的时候，会被vue自动获取到。并更新到js数据中
2.3.MVVM
MVVM是vue实现数据驱动视图和双向数据绑定的核心原理。MVVM指的是Model、View和ViewModel,它把每个HTML页面都拆分成了这三个部分，如图所示:
在MVVM概念中:
-
Model表示当前页面渲染时所依赖的数据源。
-
View表示当前页面所渲染的DOM结构。
-
ViewModel表示 vue 的实例，它是MVM的核心。
2.4MVVM的工作原理
ViewModel作为MWVM的核心，是它把当前页面的数据源（Model)和页面的结构（View）连接在了一起。
当数据源发生变化时，会被ViewModel监听到，VM会根据最新的数据源自动更新页面的结构
当表单元素的值发生变化时，也会被VM监听到，VM会把变化过后最新的值自动同步到 Model数据源中
注意:数据驱动视图和双向数据绑定的底层原理是MM(Mode数据源、View视图、ViewModel就是vue的实例)
vue的基本使用
1.基本使用步骤
- 导入vue.js 的script脚本文件
- 在页面中声明一个将要被vue所控制的DOM区域
- 创建vm 实例对象(vue 实例对象)
<body>
<div id="app">
{{username}}
div>
body>
<script src="./lib/vue.js">script>
<script>
//创建Vue的实例对象
const vm = new Vue({
//el属性是固定的写法 表示当前vm实例要控制页面上的那个区域 接收的值是一个选择器
el: '#app',
//data对象就是要渲染到页面上的数据
data: {
username: 'zhangsan',
}
})
script>
2.基本代码与MVVM的对应关系
vue的调试工具
1.安装vue-devtools调试工具
vue官方提供的vue-devtools调试工具，能够方便开发者对vue项目进行调试与开发。
Chrome浏览器在线安装vue-devtools :
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
FireFox浏览器在线安装vue-devtools :
https://addons.mozilla.org/zh-CN/firefox/addon/vue-js-devtools/
2.配置Chrome浏览器中的vue-devtools
点击Chrome浏览器右上角的目按钮，选择更多工具->扩展程序->Vue.js devtools详细信息，并勾选如下的两个选项:
注意:修改完配置项，须重启浏览器才能生效!
3.使用vue-devtools调试vue页面
vue 的指令与过滤器
1.指令的概念
指令(Directives)是 vue为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。
vue中的指令按照不同的用途可以分为如下6大类:
- 内容渲染指令
- 属性绑定指令
- 事件绑定指令
- 双向绑定指令
- 条件渲染指令
- 列表渲染指令
1.1内容渲染指令
内容渲染指令用来辅助开发者渲染DOM元素的文本内容。常用的内容渲染指令有如下3个:
- v-text
- {{}}
- v-html
1.1.1 v-text
用法示例：
<p v-text="username">p>
<p v-text="gender">
性别
p>
1.1.2{{}}语法
vue提供的语法，专门用来解决v-text 会覆盖默认文本内容的问题。这种{{f}}语法的专业名称是插值表达式（英文为:Mustache)。
<p>
姓名:{{username}}
p>
<p>
性别:{{gender}}
p>
1.1.3 v-html
v-text 指令和插值表达式只能渲染纯文本内容。如果要把包含HTML标签的字符串渲染为页面的HTML元素,则需要用到v-html这个指令:
<p v-html='disciption'>
p>
1.2属性绑定指令
注意：插值表达式只能在元素的内容节点中，不能在元素的属性节点
如果需要为元素的属性动态绑定属性值，则需要用到v-bind属性绑定指令，可以简写为英文的:。用法示例如下:
<div id="app">
<input type="text" v-bind:placeholder="tips">
<hr>
<img :src="photo" alt="" srcset="" style="width: 150px">
div>
1.2.1 使用Javascript表达式
在vue提供的模板渲染语法中，除了支持绑定简单的数据值之外，还支持Javascript 表达式的运算，例如:
{{numder+1}}
{{ok?'yes':'no'}}
{{message.split('').reverse().join('')}}
<div v-bind:id="'list-'+id">div>
在使用v-bind属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号
1.3事件绑定指令
vue提供了v-on事件绑定指令，用来辅助程序员为DOM元素绑定事件监听。语法格式如下:
<h3>count的值为:{{count}}h3>
<button v-on:click="addCount">
1
button>
注意:原生DOM对象有onclick、oninput、onkeyup等原生事件，替换为vue的事件绑定形式后，分别为:v-on:click、v-on:input、v-on:keyup
1.3.1事件修饰符
在事件处理函数中调用event.preventDefault()或 event.stopPropagation()是非常常见的需求。因此，vue 提供了事件修饰符的概念，来辅助程序员更方便的对事件的触发进行控制。常用的5个事件修饰符如下:
| 事件修饰符 | 说明 |
|---|---|
| .prevent | 阻止默认行为(阻止a链接的跳转、阻止表单的提交等) |
| .stop | 阻止事件冒泡 |
| .capture | 以捕获模式触发当前的事件处理函数 |
| .once | 绑定的事件只触发1次 |
| .self | 只有在event.target是当前元素自身时触发事件处理函数 |
1.3.2 按键修饰符
在监听键盘事件时，我们经常需要判断详细的按键。此时，可以为键盘相关的事件添加按键修饰符，例如:
<input @keyup.enter="submit">
<input @keyup.esc="clearInput">
1.4 双向绑定指令
vue提供了v-model双向数据绑定指令，用来辅助开发者在不操作DOM的前提下，快速获取表单的数据。
<p>用户名是:{{uscrname}}p>
<input type="text" v-model="username"/>
<p>选中的省份是: {{province}}P>
<select v-model="province">
<option value="">请选择option>
<option valuc="1">北京option>
<option valuc="2">河北option>
<coption valuc="3">黑龙江option>
select>
v-model指令适用
- input输入框
- type=“radio”
- type=“checkbox”
- type=“xxx”
- textarea
- select
1.4.1v-model指令的修饰符
为了方便对用户输入的内容进行处理，vue 为v-model指令提供了3个修饰符，分别是:
| 修饰符 | 作用 | 示例 |
|---|---|---|
| .number | 自动将用户的输入值转为数值类型 |
示例用法如下:
<input type="text" v-model.number="n1">
<input type="text" v-model.number="n2">
<spen>{{n1*n2}}spen>
1.5条件渲染指令
条件渲染指令用来辅助开发者按需控制DOM的显示与隐藏。条件渲染指令有如下两个，分别是:
- v-if
- v-show
示例用法如下：
<div id="app">
<p v-if="networkState === 200">
请求成功---被v-if拉制
p>
<p v-show="networkState === 200">
请求成功---被v-show 控制
p>
div>
-
v-show的原理是：动态元素添加或移除display:none样式 ，来实现元素的显示和隐藏
- 如果要频繁的切换元素的显示状态，用v-show性能会更好
-
v-if的原理是:每次动态创建或移除元素，实现元素的显示和隐藏
- 如果刚要进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来，此时v-if性能更好
1.5.1 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>
注意: v-else-if 指令必须配合v-if 指令一起使用，否则它将不会被识别!
1.5.2v-else
v-if 可以单独使用,或配合v-else指令一起使用:
<div v-if="Math.random()>0.5">
随机数大于0.5
div>
<div v-else>
随机数小于0.5
div>
注意:v-else指令必须配合v-if指令一起使用，否则它将不会被识别!
1.6 列表渲染指令
vue提供了v-for列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。v-for 指令需要使用item in items形式的特殊语法，其中:
- items是待循环的数组
- item是被循环的每一项
data:{
list:[
{id:1,name:'zs'},
{id:2,name:'ls'}
]
}
//_________________________
<ul>
<li v-for="item in list">姓名是:{{item.name}}li>
ul>
1.6.1 v-for中的索引
v-for指令还支持一个可选的第二个参数，即当前项的索引。语法格式为(item, index) in items，示例代码如下;
data:{
list:[
{id:1,name:'zs'},
{id:2,name:'ls'}
]
}
//_________________________
- 索引是:{{index}},姓名是:{{item.name}}
注意:v-for指令中的 item项和 index索引都是形参，可以根据需要进行重命名。例如(user, i) in userlist
1.6.2 key的注意项
- key的值只能是字符串或数字类型
- key 的值必须具有唯一性（即: key 的值不能重复)
- 建议把数据项id属性的值作为key的值（因为 id属性的值具有唯一性)
- 使用index的值当作 key 的值没有任何意义（因为index的值不具有唯一性)
- 建议使用v-for指令时一定要指定key 的值（既提升性能、又防止列表状态紊乱)
品牌列表案例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<link rel="stylesheet" href="./lib/bootstrap.css">
<link rel="stylesheet" href="./css/brandlist.css">
head>
<body>
<div id="app">
<div class="card">
<div class="card-header">
添加品牌
div>
<div class="card-body">
<form @submit.prevent="add">
<div class="form-row align-items-center">
<div class="col-auto">
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text">品牌名称div>
div>
<input type="text" class="form-control" placeholder="请输入品牌名称" v-model.trim="brand">
div>
div>
<div class="col-auto">
<button type="submit" class="btn btn-primary mb-2">添加button>
div>
div>
form>
div>
div>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th scope="col">#th>
<th scope="col">品牌名称th>
<th scope="col">状态th>
<th scope="col">创建时间th>
<th scope="col">操作th>
tr>
thead>
<tbody>
<tr v-for="item in list" :key="item.id">
<td>{{item.id}}td>
<td>{{item.name}}td>
<td>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" :id="'cd'+item.id" v-model="item.status">
<label class="custom-control-label" :for="'cd'+item.id" v-if="item.status">已起用label>
<label class="custom-control-label" :for="'cd'+item.id" v-else>已禁用label>
div>
td>
<td>{{item.time}}td>
<td>
<a href="javascript:;" @click="remove(item.id)">删除a>
td>
tr>
tbody>
table>
div>
body>
<script src="./lib/vue.js">script>
<script>
const vm = new Vue({
el: '#app',
data: {
//用户输入的品牌名称
brand: '',
//是下一个 可用的id
nextId:4,
// 品牌的列表数据
list: [
{id: 1, name: '宝马', status: true, time: new Date()},
{id: 2, name: '奔驰', status: false, time: new Date()},
{id: 3, name: '迪奥', status: true, time: new Date()},
]
},
methods: {
// 点击链接 删除对应的品牌
remove(id) {
this.list = this.list.filter(items => items.id !== id)
},
// 阻止表单的默认提交行为之后，触发add方法
add() {
// 如果判断到brand的值为空字符串,则return出去
if (this.brand === '') return alert('必须填品牌名称');
// 如果没被return 应该执行添加的逻辑
// 先把要添加的品牌对象，整理出来
const obj={
id:this.nextId,
name:this.brand,
status:false,
time:new Date()
}
// 往this.list数组中push品牌对象
this.list.push(obj);
// 清空this.brand 让this.nextId自增+1
this.brand='';
this.nextId+=1;
}
}
});
script>
html>
- brandlist.css
body {
padding: 15px;
user-select: none;
}
2.过滤器
过滤器（Filters)是vue为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方:插值表达式和v-bind属性绑定。
过滤器应该被添加在JavaScript表达式的尾部，由“管道符”进行调用，示例代码如下:
<p>
{{message|capitalist}}
p>
<div v-bind:id="rawId|formatId">
div>
2.1 定义过滤器
在创建 vue 实例期间，可以在 filters 节点中定义过滤器，示例代码如下：
const vm =new Vue({
el:'#app',
data:{
message:'hello vue.js'
},
//过滤器函数，必须被定义到filters节点下
//过滤器本质是函数
filters:{
//过滤器函数形参中val永远都是管道符前面的那个值
capi(val){
// 强调：过滤器中，一定要有一个返回值
// val.charAt(0) 字符串有charAt方法 这个方法接收索引 表示字符串中把索引对应的字符 获取出来
const first=val.charAt(0).toUpperCase();
// 字符串slicef方法 可以截取字符串 从指定索引开始
const other=val.slice(1);
//过滤器一定要有一个返回值
return first+other;
},
}
})
2.2 私有过滤器和全局过滤器
在 filters 节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前 vm 实例所控制的 el 区域内使用。 如果希望在多个 vue 实例之间共享过滤器，则可以按照如下的格式定义全局过滤器:
//全局过滤器–独立于每个vm实例之外
// Vue.filter()方法接收两个参数;
//第1个参数，是全局过滤器的"名字“
//第2个参数，是全局过滤器的"处理函数”
Vue.filter ( 'capitalize', (str) => {
return str.charAt(O).toUpperCase() + str.slice(1) + "~~"
})
如果全局过滤器和私有过滤器名字一致，此时按照‘就近原则’ 调用的是私有过滤器
2.3 连续调用多个过滤器
过滤器可以串联地进行调用，例如:
{{message | capitalize |maxLength}}
//全局过滤器–首字母大写
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，11) + '...';
})
2.4过滤器传参
过滤器的本质是JavaScript函数，因此可以接收参数，格式如下:
<p>
{{message | filterA(arg1,arg2)}}
p>
//过滤器处理函数的形参列表中
//第一个参数，永远都是"管道符"前面待处理的值
//从第二个参数开始，才是调用过滤器传递过来的arg1和arg2参数
Vue.filter('filter',(msg,arg1,arg2)=>{
//过滤器的代码逻辑
})
2.5 过滤器的兼容性
过滤器仅在 vue 2.x 和 1.x 中受支持，在 vue 3.x 的版本中剔除了过滤器相关的功能。 在企业级项目开发中：
-
如果使用的是 2.x 版本的 vue，则依然可以使用过滤器相关的功能
-
如果项目已经升级到了 3.x 版本的 vue，官方建议使用计算属性或方法代替被剔除的过滤器功能
rCase() + str.slice(1) + ‘~~’;
})
//全局过滤器–控制文本的最大长度
Vue.filter(‘maxLength’, (str) =>{
if(str.length <= 10) return str
return str.slice(0，11) + ‘…’;
})
#### 2.4过滤器传参
过滤器的本质是JavaScript函数，因此可以接收参数，格式如下:
```html
{{message | filterA(arg1,arg2)}}
//过滤器处理函数的形参列表中
//第一个参数，永远都是"管道符"前面待处理的值
//从第二个参数开始，才是调用过滤器传递过来的arg1和arg2参数
Vue.filter('filter',(msg,arg1,arg2)=>{
//过滤器的代码逻辑
})
2.5 过滤器的兼容性
过滤器仅在 vue 2.x 和 1.x 中受支持，在 vue 3.x 的版本中剔除了过滤器相关的功能。 在企业级项目开发中：
-
如果使用的是 2.x 版本的 vue，则依然可以使用过滤器相关的功能
-
如果项目已经升级到了 3.x 版本的 vue，官方建议使用计算属性或方法代替被剔除的过滤器功能
具体的迁移指南，请参考 vue 3.x 的官方文档给出的说明： https://v3.vuejs.org/guide/migration/filters.html#migration-strategy