Vue 基础入门 - 看这一篇就够了！！！
Vue 入门基础篇
·
少则得，多则惑，其出弥远，其知弥少！
小白眼中的前端开发：
◆ 会写 HTML+CSS+JavaScript 就会前端开发
◆ 需要美化页面样式，就拽一个bootstrap过来
◆ 需要操作DOM或发起Ajax请求，再拽一个jQuery过来
◆ 需要快速实现网页布局效果，就拽一个Layui过来实际前端开发：
◆ 模块化（js的模块化、css的模块化、资源的模块化）
◆ 组件化（复用现有的UI结构、样式、行为）
◆ 规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理）
◆ 自动化（自动化构建、自动部署、自动化测试
目录
Vue2.0-1 Vue简介
① 官方概念：Vue是一套用于构建用户界面的前端框架。
√1、构建用户界面：用vue往html页面中填充数据，非常方便。
√2、框架：我们要学习Vue的指令、组件（是对UI结构的复用）、路由、vuex、vue组件库。
② vue的特性：数据驱动视图和双向数据绑定
| 特性 | 作用 | 说明 |
|---|---|---|
| 数据驱动视图 | 数据的变化会驱动视图自动更新 | 页面结构会被vue自动渲染 |
| 双向数据绑定 | form表单负责采集数据，Ajax负责提交数据到js数据中 | vue自动获取表单数据 |
③ MVVM是vue实现数据驱动视图和双向数据绑定的MVVM核心原理，它把每个HTML页面拆分成了三部分：
√1、Model： 表示当前页面渲染时所依赖的数据源
√2、View： 表示当前页面所渲染的DOM结构
√3、ViewModel： 表示vue实例，它是MVVM的核心
Vue2.0-2 Vue基本用法 初体验
<body>
<!-- 3、希望vue控制下面的div，帮我们把数据填充到div内部 -->
<div id="app"> {{ message }} </div>
<!-- 1、导入vue库文件，在window全局就有了vue这个构造函数 -->
<script src="./lib/vue-2.6.12.js"></script>
<!-- 2、创建vue实例对象 -->
<script>
const vm = new Vue({
// el属性是固定写法，表示当前实例要绑定哪个区域
el: "#app",
// data对象就是要渲染到页面上的数据
data: {
message: "hello world !!"
}
})
</script>
</body>
Vue2.0-3 Vue六大指令
注意：指令是vue开发中最基础、最常用、最简单的知识点
| 序列 | 按照用途分类 | 命令 |
|---|---|---|
| ① | 内容渲染指令 | v-text="message"、{{ message }}、v-html="message" |
| ② | 属性绑定指令 | v-bind:value="message" 简写用冒号:value="message" |
| ③ | 事件绑定属性 | v-on:click 简写用@click |
| ④ | 双向绑定指令 | v-model="message" |
| ⑤ | 条件渲染指令 | v-if="true"移除元素 v-show="false"修改display:none |
| ⑥ | 列表渲染指令 | v-for="(item,index) in list" |
① 内容渲染指令
<body>
<div id="app">
<!-- v-text 指令缺点：会覆盖元素内部原有内容 -->
<p v-text="message"></p>
<!-- {{ }} 插值表达式，实际开发中最常用，不会覆盖原有内容 -->
<p> {{ message }} </p>
<!-- 可以将带标签的字符串渲染为页面的HTML元素 -->
<div v-html="info"></div>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
message: "hello world !!",
info: "<h4 style='color:red'> v-html语法 </h4>"
}
})
</script>
</body>
② 属性绑定指令
<!-- v-bind 为元素属性动态绑定值，简写用英文冒号: -->
<input type="text" v-bind:placeholder="message">
<input type="text" :placeholder="message">
<!-- Vue支持javascript表达式的运算 -->
{{ number + 1 }}
{{ ok ? 'yes' : 'no' }}
{{ message.split('').reverse().join('') }}
<div :id = "'list' + id"></div>
③ 事件绑定指令 事件修饰符 按键修饰符
<!-- v-on:为事件绑定指令，简写用@符号，原生DOM对象有onclick、oninput、onkeyup等 -->
<button v-on:click="sub">-1</button> <span> {{ count }} </span> <button @click="add(3)">+3</button>
<!-- 当不传参时，默认参数会存在event事件，同时vue也提供了内置变量叫$event，但不经常用 -->
<button @click="changeColor">虽不传参，但默认会含有event参数</button>
<button @click="changeColor1(2,$event)"> $event 是vue提供的内置变量 固定写法 </button>
<!-- vue提供的事件修饰符替代事件处理函数中调用了event.preventDefault()或event.stopPropagation() -->
<a href="http://www.baidu.com" @click.prevent="show">跳转到百度</a>
<!-- 按键修饰符 -->
<input type="text" @keyup.esc="clear" @keyup.enter="submit">
<script src="./lib/vue-2.6.12.js"></script>
<javascript>
const vm = new Vue({
el: "#app",
data: {count: 0},
methods: {
sub(){ this.count-- ; },
add(n){ this.count += n ; },
changeColor(e){ e.target.style.backgroundColor = 'red'; },
changeColor1(n,e){ e.target.style.backgroundColor = 'blue'; },
show(){ console.log("事件修饰符，阻止a标签跳转"); }
}
})
</javascript>
| 事件/按键修饰符 | 说明（ 红色为常用事件 ） |
|---|---|
| .prevent | 阻止默认行为（例如：阻止a连接的跳转、阻止表单的提交等）@click.prevent |
| .stop | 阻止事件冒泡 |
| .capture | 以捕捉模式触发当前的事件处理函数 |
| .once | 绑定的事件只触发一次 |
| .selt | 只有在event.target是当前元素自身时触发事件处理函数 |
| .enter（按键修饰符） | 按下Enter键时触发相应功能 例如:@keyup.enter = "submit" |
| .esc（按键修饰符） | 按下Esc键时触发功能 例如：@keyup.esc = "clearValue" |
④ 双向绑定指令
<!-- html代码 -->
<select v-model="city">
<option value="1">北京</option>
<option value="2">杭州</option>
<option value="3">苏州</option>
</select>
<!-- 当失去焦点时，实现数据更新 -->
<input type="text" v-model.lazy="message">
<!-- js代码 -->
data: {
city: 2
}
| v-model专用修饰符 | 作用 | 实例 |
|---|---|---|
| .number | 自动将用户的输入值转为数值类型 | <input v-model.number="age" /> |
| .trim | 自动过滤用户输入的首尾空白字符 | <input v-model.trim="msg" /> |
| .lazy | 在"change"时而非"input"时更新 | <input v-model.lazy="msg" /> |
⑤ 条件渲染指令
<!-- type值为A 实现if判断 -->
<div v-if = "type === 'C'">加油</div>
<div v-else-if = "type === 'B'">良好</div>
<div v-else = "type === 'A'">优秀</div>
<!-- v-show指令 flag为真显示 为false隐藏元素 -->
<div v-show = "flag">当flag为true时，显示该元素</div>
⑥ 列表渲染指令
<!-- html代码 -->
<!-- 官方建议使用循环要绑定:key属性，不要用索引做key值 key可以是字符串也可以是数字 -->
<div v-for="(item,index) in list" :key="item.id">
<p> {{"索引"+index}}: {{item.name}} </p>
</div>
<!-- data中数据内容 -->
data: {
list: [
{id:"A",name:"张三",age:"20"},
{id:"B",name:"李四",age:"80"}
]
}
Vue2.0-4 综合案例
① 案例界面
② 关键代码展示
<form >
// 5、实现v-model.trim功能 去除前后空格
<input type="text" placeholder="请输入品牌名称" v-model.trim="brand">
// 4、使用.prevent修饰符阻止表单默认提交，并触发add功能
<button type="submit" @click.prevent="add">添加</button>
</form>
<tbody>
// 1、渲染数据
<tr v-for="(item,index) in list" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>
<div>
// 2、动态生成checkbox的id属性值，添加v-mode 并做if判断
<input type="checkbox" :id="'customSwitch'+item.id" v-model="item.status">
<label :for="'customSwitch'+item.id" v-if="item.status">已启用</label>
<label :for="'customSwitch'+item.id" v-else>已禁用</label>
</div>
</td>
<td>{{ item.time }}</td>
<td>
// 3、传入id实现删除功能
<a href="javascript:;" @click="remove(item.id)">删除</a>
</td>
</tr>
</tbody>
<script src="./lib/vue-2.6.12.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
brand: "", // 接收录入的数据
maxId: 4, // 设定最大id
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: {
// 根据id删除list中数据，练习filter过滤器
remove(id){ this.list = this.list.filter(item => item.id != id) ; },
// 添加数据后 清空输入框内容同时让id自增1
add(){const obj={id: this.maxId,name: this.brand,status: true,time: new Date() };
this.list.push(obj);
this.brand = "";
this.maxId++;
}
}
})
</script>
Vue2.0-5 入门总结
① 能够知道vue的基本使用步骤
- 导入vue.js文件
- new Vue() 构造函数，得到vue实例对象
- 声明el和data数据节点
- MVVM的对应关系
② 掌握vue中常见指令的用法
- 插值表达式、v-bind、v-on、v-if和v-else
- v-for 和 :key、v-model
③ 掌握vue中过滤器的基本用法
- 全局过滤器Vue.filter('过滤器名称',function)
- 私有过滤器filters节点
Vue2.0-6 过滤器
① 私有过滤器
<!-- 过滤器常用于文本格式化 在双括号中通过"管道符"调用capi 过滤器 -->
<div id="app"> {{ message | capitalize }} </div>
<script src="./lib/vue-2.6.12.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "hello !!!"
},
// 过滤器定义在filters节点之下，过滤器本身是一个函数
filters: {
capitalize (val){
return val.charAt(0).toUpperCase()+val.slice(1)
}
}
})
</script>
② 全局过滤器
<!-- #app2 调用全局过滤器 -->
<div id="app2"> {{ message | capitalize }} </div>
<script src="./lib/vue-2.6.12.js"></script>
<script>
// 使用Vue.filter定义全局过滤器
Vue.filter('capitalize ',function(str){
// 首字母大写 返回：B：全局过滤器
return str.charAt(0).toUpperCase()+str.slice(1);
});
const vm2 = new Vue({
el: "#app2",
data: {
message: "b:全局过滤器"
}
});
</script>
③ 格式化时间过滤器
<!-- 使用过滤器格式化时间 Fri Sep 02 2022 12:09:47 GMT+0800 (中国标准时间) => 2022-09-02 12:10:13 -->
<div id="app"> {{ date | capitalize }} </div>
<script src="./lib/dayjs.min.js"></script>
<script src="./lib/vue-2.6.12.js"></script>
<script>
// 调用dayjs库 格式化时间
Vue.filter('capitalize',function(time){
return dayjs(time).format('YYYY-MM-DD HH:mm:ss');;
});
const vm = new Vue({
el: "#app",
data: {
date: new Date()
}
})
</script>
④ 调用多个过滤器 Vue 3.0 剔除了过滤器
<!-- 过滤器常用于文本格式化 在双括号中通过"管道符"调用capi 过滤器 -->
<p> {{ msg | capitalize(arg1,arg2) }} </p>
<script>
...
// 第一个参数永远是管道符前面的值，从第二个参数开始才是传递过去的arg1 arg2...
Vue.filters('capitalize',( msg,arg1,arg2 ) => {
//过滤器代码逻辑
})
...
</script>
Vue2.0-7 侦听器
| 侦听器格式 | 优缺点 |
|---|---|
| 方法格式侦听器 | 缺点①：无法自动触发。缺点②：如果侦听对象数据，是不会触发侦听 |
| 对象格式侦听器 | 优点①：使用immediate选项自动触发一次。优点②：通过deep选项，侦听对象数据。 |
① 侦听器基本语法
<input id="app" type="text" v-model="username">
<script src="./lib/dayjs.min.js"></script>
<script src="./lib/vue-2.6.12.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
username: "侦听器",
},
// 所有侦听器 都定义到watch节点下
watch: {
// 侦听器是一个函数，要监视哪条数据变化，就把数据名作为方法名 新值在前 旧值在后
username(newVal,oldVal){
console.log("监听username的变化:",newVal,oldVal);
}
}
})
</script>
② 判断用户名是否被占用
<script src="./lib/dayjs.min.js"></script>
<script src="./lib/jquery.min.js"></script>
<script>
const vm = new Vue({
el: "input",
data: {
username: "侦听器",
},
watch: {
username(newVal,oldVal){
if (newVal === "") return alert("不能为空");
$.get('https://www.escook.cn/api/finduser/'+newVal,function(result){
console.log(result);
})
}
}
})
</script>
③ immediate选项 侦听器自动执行一次
<script>
const vm = new Vue({
el: "input",
data: {
username: "侦听器",
},
watch: {
username: {
handler(newVal,oldVal){
console.log(newVal,oldVal);
},
// immediate 默认是false，控制侦听器是否自动执行一次
immediate: true
}
}
})
</script>
④ 开启deep深度监听对象数据的变化
<script>
const vm = new Vue({
el: "input",
data: {
info: {
username: "deep深度侦听"
}
},
watch: {
info: {
handler(newVal,oldVal){
console.log(newVal,oldVal);
},
// 开启deep深度监听，只要对象中任何一个属性发生变化，都会触发对象侦听器
deep:true
} ,
// 如果要侦听的是对象的子属性变化，则必须包裹一层单引号
'info.username': {
handler(newVal,oldVal){
console.log(newVal);
}
}
}
})
</script>
Vue2.0-8 computed计算属性(了解)
√特点：要被定义为方法，在使用计算时，当普通属性使用即可。
√好处：实现代码复用，只要计算属性依赖的数据源发生变化，则计算属性自动重新求值！
<div id = "app">
<input type="text" v-model = "a">
<input type="text" v-model = "b">
<input type="text" v-model = "c">
<!-- :style 代表动态绑定一个样式，它的值是一个 { } 样式对象，当前样式只包含 backgroundColor 背景颜色 -->
<div class="box" :style="{backgroundColor:rgb}"></div>
</div>
<script src="./lib/vue-2.6.12.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
a: 0,
b: 0,
c: 0
},
computed: {
// 这里用的 `${}` 表达式获取值
// rgb作为一个计算属性，被定义成方法，最终返回rgb(x,x,x)的字符串
rgb(){
return `rgb(${this.a},${this.b},${this.c})` ;
}
}
})
</script>
Vue2.0-9 axios专注数据请求
① 基本语法
<script src="./lib/axios.js"></script>
<script>
// 1、GET请求
axios({
method: 'get',
url: 'http://www.liulongbin.top:3006/api/getbooks',
// get 传参用params url中的参数
params: {
id: 1
},
}).then((result) => {
console.log(result);
})
// 2、POST请求
document.querySelector('#btn').addEventListener('click',function(){
axios({
method: 'post',
url: 'http://www.liulongbin.top:3006/api/post',
// post 传参用data 请求体参数
data: { name: 'zs', age: 19 }
}).then((result) => {
console.log(result);
})
})
</script>
② 结合 async 和 await 调用axios
// 如果调用的方法返回值是Promise实例，则前面可以添加 await
// await 还能用在 async 修饰的方法中
document.querySelector('#btn').addEventListener('click',async function(){
const result = await axios({
method: 'post',
url: 'http://www.liulongbin.top:3006/api/post',
data: {
name: 'zs',
age: 19
}
})
console.log(result);
})
③ 使用解构赋值
// 1、调用axios之后，使用async / await 进行简化
// 2、使用解构赋值，从axios封装的大对象中把 data 属性解构出来
// 3、把解构出来的 data 属性，使用冒号进行重命名，一般命名为 { data:res }
document.querySelector('#btnGet').addEventListener('click',async function(){
const { data:res } = await axios({
method: 'get',
url: 'http://www.liulongbin.top:3006/api/getbooks',
params: {
id: 1
}
})
console.log(res.data);
})
④ 基于axios发起get和post请求
// GET请求
document.querySelector('#btnGet').addEventListener('click',async function(){
const {data:res} = await axios.get('http://www.liulongbin.top:3006/api/getbooks?id=1')
console.log('get请求',res);
})
// POST请求
document.querySelector('#btnPost').addEventListener('click',async function(){
const {data:res} = await axios.post('http://www.liulongbin.top:3006/api/post',{username:'zs',age:19})
console.log('post请求',res);
})
Vue2.0-10 vue-cli
① vue-cli 简介与安装
√vue-cli是Vue.js开发的标准工具，简化了程序员基于webpack创建工程化的Vue项目过程。
√引用vue-cli官网上的一句话：程序员可以专注在撰写应用上，而不必花时间纠结webpack配置的问题。
// vue-cli 是 npm 上的一个全局包 用-g参数安装
E:\Demo\vue-cli>npm install -g @vue/cli
// 查看安装是否成功
E:\Demo\vue-cli>vue -v
// 注意：如果报错 一般是安装的位置不对 将vue-cli东西拷贝到nodejs文件夹内
E:\Demo\vue-cli>npm list --global
② 创建vue项目
// 1、vue create 项目名称
E:\Demo\vue-cli>vue create demo-test
// 2、选择手动安装功能
> Manually select features
// 3、选择babel 和 Css Pre-processors
(*) Babel -- 必须安装babel
( ) TypeScript -- 微软的脚步语言 比javascript更强大
( ) Progressive Web App (PWA) Support -- 渐进式web框架
( ) Router -- 路由
( ) Vuex -- vuex
>(*) CSS Pre-processors -- 选择CSS 预处理器
( ) Linter / Formatter -- 格式校验 约束团队使用固定格式，比方说用单引号还是双引号
( ) Unit Testing
( ) E2E Testing
// 4、选择2.0版本
> 2.x
// 5、选择less
> Less
// 6、选择独立的配置文件
> In dedicated config files -- 将babel、ESLint等插件放到独立配置文件
In package.json -- 将配置文件放到package.json文件中
// 7、选择Y创建成预设配置,然后输入预设名即可
// 8、在VSCode启动终端 访问主页
Terminal -> new Terminal 或 Ctrl + Shift + `
E:\Demo\vue-cli\demo-first> npm run serve
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.1.2:8080/
③ vue项目中src目录的构成
√assets 文件夹：存放项目静态资源，例如：CSS样式表，images图片资源
√components 文件夹：程序员封装的可复用的组件
④ vue项目的运行流程
在工程化的项目中，vue要做的事很单纯：通过main.js把App.vue渲染到index.html 的指定区域中
√1、App.vue 用来编写待渲染的模板结构
√2、index.html 中需要预留el区域
√3、main.js 把App.vue 渲染到了index.html 所预留的区域中
⑤ 基本使用
目录结构
|Demo
|----public
|--------index.html
|----src
|--------main.js
|--------Test.vue
<!-- 1、Test.vue 代码 -->
<template>
<div>
<p> 这是第一个vue工程项目 </p>
</div>
</template>
<!-- 2、main.js 代码 -->
import Vue from 'vue'
import Test from './Test.vue'
Vue.config.productionTip = false
new Vue({
// h(Test) 指向 import Test
render: h => h(Test),
}).$mount('#app')
Vue2.0-11 组件
① vue 组件的三个组成部分
√什么是组件化开发：根据封装思想，把页面上可重用的UI结构封装为组件，从而方便项目开发和维护
√vue中规定：组件的后缀名是.vue
√vue组件的三个组成部分：
| 内容 | 说明 |
|---|---|
| template | 组件的模板结构 |
| script | 组件的JavaScript行为 |
| style | 组件的样式 |
Test.vue中代码示例：
1、data必须是一个函数，用return返回数据
2、methods方法、watch侦听、computed计算、filters过滤器
3、style中启用less样式
<template>
<div class="lessTest" @click="btn">
<h2> 这是第一个 vue 工程项目 {{ msg }} </h2>
<p>要想使用less样式 必须在style中启用 lang="less"</p>
</div>
</template>
<script>
// 默认导出 这是固定写法！
export default {
// 组件中 data 数据源必须是一个函数
data(){
// 在这个 return 出去的 { } 中 定义数据
return {
msg: 'Hello !!!'
}
},
methods: {
btn(){
this.msg = "在vue组件中添加methods方法"
}
},
// 侦听器
watch: { },
// 计算属性
computed: { },
// 过滤器
filters: { },
}
</script>
// 启用less样式
<style lang = "less">
.lessTest {
background-color: pink;
h2 {
text-align: center;
color: white;
}
p {
color: blue;
}
}
</style>
② 使用组件的三个步骤
◆ 步骤1、使用import语法导入需要的组件
import Left from '@/components/left.vue'
import Right from '@/components/right.vue'
◆ 步骤2、使用 components 节点注册私有组件
export default {
components: {
Left,
Right
}
}
◆ 步骤3、以标签形式使用刚才注册的组件
<template>
<div>
<left></left>
<right></right>
</div>
</template>
③ 在main.js中通过Vue.component注册全局组件
import Vue from 'vue'
import App from './App.vue'
// 导入需要被全局注册的那个组件
import Count from '@/components/Count.vue'
Vue.component('MyCount',Count);
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
④ 常用的插件
- Auto Close Tag -- 自动闭合标签
- Chinese (Simplified) (简体中文) Langu… -- 中文支持
- open in browser -- 浏览器插件
- Path Autocomplete -- 路径补全
// 在VSCode配置文件settings.json中追加以下配置
// 导入文件时是否携带文件的扩展名
"path-autocomplete.extensionOnImport": true,
// 配置 @ 的路径提示
"path-autocomplete.pathMappings": {"@":"${folder}/src"}, - Vetur
- Vue 3 Snippets
Vue2.0-12 组件的props
① props 是组件的自定义属性，在封装通用组件的时候，合理使用props可以极大提高组件的复用性
# 父对象
<template>
<div>
<h3>{{ count }}</h3>
<button @click="add"> +1 </button>
</div>
</template>
<script>
export default {
props: ['init'],
data(){
return {
count: this.init
}
},
methods: {
add(){
this.count += 1;
}
}
}
</script>
#子对象引用
<template>
<div class="right">
// 结合v-bind使用自定义属性
<MyCount :init = "2"></MyCount>
</div>
</template>
② props 的 default 默认值，类型校验，必填校验
export default {
props: {
init: {
// 用default属性定义默认值
default: 0,
// init的值必须是指定类型 Number/String/Boolean/Array/Object...
type: Number,
// 必填校验项
require: true
}
}
}
Vue2.0-13 scoped属性解决 样式冲突
// 只要用到样式就要追加scoped属性，该属性表示样式只在当前文件生效
<style scoped>
.left {
border: 1px solid red;
}
// 使用deep修改子组件的样式，通常修改第三方组件样式会使用
/deep/ div {
border: 1px solid red;
}
</style>
Vue2.0-14 组件的声明周期
① 生命周期 & 生命周期函数
√生命周期(Life Cycle)是指一个组件从创建->运行->销毁的整个阶段，强调的是一个时间段。
√生命周期函数：是由vue框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行。
√created、mounted、undated 三个周期比较重要
② created生命周期函数很重要
<script>
export default {
data(){
return {
books: []
}
},
methods: {
initBooks(){
var xhr = new XMLHttpRequest();
xhr.addEventListener("load",() => {
var result = JSON.parse(xhr.responseText) ;
this.books = result.data ;
})
xhr.open("GET","http://www.liulongbin.top:3006/api/getbooks");
xhr.send();
}
},
// created生命周期函数，非常常用。调用methods的方法，然后将请求到的数据转存到data中，供template渲染使用
created(){
this.initBooks();
}
}
</script>
Vue2.0-15 数据间传值
① 父向子传值:父组件向子组件共享数据需要使用自定义属性
② 子向父传值:子组件向父组件共享数据使用自定义事件
③ 兄弟组件间数据共享：使用EventBus
√1、 创建eventBus.js模块，并向外共享一个Vue的实例对象
√2、 在数据发送方，调用bus.$emit('事件名称',要发送的数据)方法触发自定义事件
√3、 在数据接收方，调用bus.$on('事件名称',事件处理函数) 方法注册一个自定义事件
Vue2.0-16 $refs 引用
每个vue的组件实例上，都包含一个$refs对象，默认情况下$refs指向一个空对象
① 使用 ref 引用DOM元素
<template>
<div>
// 元素上使用ref属性
<h2 ref="refDom">App根节点</h2>
<button @click="btn">实验ref获取DOM元素</button>
</div>
</template>
<script>
export default {
methods: {
btn(){
// 通过this.$refs获取DOM元素
this.$refs.refDom.style.color = "red";
}
}
}
</script>
② 使用 ref 引用组件实例
<template>
<div>
<h2>App根节点</h2>
<button @click="sonRef">来自父组件的点击</button>
<hr>
<Left ref="son"></Left>
</div>
</template>
<script>
import Left from '@/components/Left.vue'
export default {
methods: {
// 使用ref直接调用子组件的reset方法
resetSon(){
this.$refs.sonRef.reset()
}
},
components: {
Left
}
}
</script>
③ this.$nextTick(cb)的应用场景：
<div>
// 显示输入框时 自动获取焦点
<input type="text" ref="inputRef" v-if="flag" @blur="hidden">
<button @click="btn" v-else>点击按钮获取输入框，同时获取焦点</button>
</div>
export default {
data(){
return {
flag: false
}
},
methods: {
btn(){
this.flag = true;
// this.$nextTick(cb)方法：在组件的DOM更新完后执行cb回调函数
this.$nextTick(()=>{
this.$refs.inputRef.focus();
})
},
hidden(){
this.flag = false;
}
}
}
④ some循环：满足条件退出循环 比forEach性能好
<script>
export default {
data(){
return {
arr: ['A','B','C','D','E']
}
},
methods: {
forEachBtn(){
this.arr.forEach((item,index) => {
if(item === 'B'){
console.log("forEach循环：",index,item);
return true;
}
console.log("forEach循环：",index,item);
});
},
someBtn(){
this.arr.some((item,index)=>{
if(item === 'B'){
console.log("some循环:",index,item);
// 当满足条件要退出时，必须写return true
return true;
}
console.log("some循环:",index,item);
})
}
}
}
</script>
⑤ every循环 判断是否全选中
export default {
data(){
return {
arr: [
{name: "A",status: true},
{name: "B",status: true},
{name: "C",status: true},
],
}
},
methods: {
ereryBtn(){
// 当所有数据为true返回true 否则返回false
const flag = this.arr.every(item=>item.status);
console.log(flag);
}
}
}
⑥ reduce汇总 用法和简写用法
methods: {
reduceBtn1(){
// 复杂reduce写法 arr.filter(item=>item.status).reduce((累加的结果,item)=>{},初始值)
const sum = this.arr.filter(item=>item.status).reduce((sum,item)=>{
return sum += item.price * item.count ;
},0)
console.log("reduce:"+sum);
},
reduceBtn2(){
// 简写reduce代码 建议用下面的代码
const sum = this.arr.filter(item=>item.status).reduce((sum,item)=>sum += item.price * item.count,0)
console.log("reduce:"+sum);
}
}
基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。
更多推荐
10
0- 0
已为社区贡献1条内容
所有评论(0)