正文
vue开发知识点总结
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
一、vue介绍
Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架，是一个轻量级MVVM（model-view-viewModel）框架。
二、数据绑定
-
最常用的方式：
Mustache(插值语法)，也就是{{}}语法 -
解释：
{{}}从数据对象data中获取数据 - 说明：数据对象的属性值发生了改变，插值处的内容都会更新
-
说明：
{{}}中只能出现JavaScript表达式 而不能解析js语句 - 注意： Mustache 语法不能作用在 HTML 元素的属性上
双向数据绑定：将DOM与Vue实例的data数据绑定到一起，彼此之间相互影响
- 数据的改变会引起DOM的改变
- DOM的改变也会引起数据的变化
原理：
Object.defineProperty
中的
get
和
set
方法
-
getter和setter：访问器 -
作用：指定
读取或设置对象属性值的时候，执行的操作
三、vue指令
v-text、v-html、v-if、v-show、v-for、v-bind（绑定标签属性）、v-on(绑定事件)、v-model（绑定表单）
-
在监听键盘事件时，Vue 允许为
v-on在监听键盘事件时添加关键修饰符，eg：@keyup.enter="add"
四、过滤器filters
1.全局过滤器
<div>{{ dateStr | date }}</div>
<div>{{ dateStr | date('YYYY-MM-DD hh:mm:ss') }}</div>
<script>
Vue.filter('date', function(value, format) {
// value 要过滤的字符串内容，比如：dateStr
// format 过滤器的参数，比如：'YYYY-MM-DD hh:mm:ss'
})
</script>
2.局部过滤器
{
data: {},
// 通过 filters 属性创建局部过滤器
// 注意：此处为 filters
filters: {
filterName: function(value, format) {}
}
}
五、监听数据变化watch
watch
是一个对象，键是需要观察的表达式，值是对应回调函数
new Vue({
data: { a: 1, b: { age: 10 } },
watch: {
a: function(val, oldVal) {
// val 表示当前值
// oldVal 表示旧值
console.log('当前值为：' + val, '旧值为：' + oldVal)
},
// 监听对象属性的变化
b: {
handler: function (val, oldVal) { /* ... */ },
// deep : true表示是否监听对象内部属性值的变化
deep: true
},
// 只监视user对象中age属性的变化
'user.age': function (val, oldVal) {
},
}
})
六、计算属性computed
var vm = new Vue({
el: '#app',
data: {
firstname: 'jack',
lastname: 'rose'
},
computed: {
fullname() {
return this.firstname + '.' + this.lastname
}//注意不能和data里面重名
}
})
七、vue生命周期
- 介绍： 一个组件从开始到最后消亡所经历的各种状态，就是一个组件的生命周期
- 生命周期钩子函数：从组件被创建，到组件挂载到页面上运行，再到页面关闭组件被卸载，这三个阶段总是伴随着组件各种各样的事件，这些事件，统称为组件的生命周期函数！
beforeCreate()
- 说明：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用
- 注意：此时，无法获取 data中的数据、methods中的方法
created()
- 注意：这是一个常用的生命周期，可以调用methods中的方法、改变data中的数据
- 使用场景：发送请求获取数据
beforeMounted()
- 说明：在挂载开始之前被调用
mounted()
- 说明：此时，vue实例已经挂载到页面中，可以获取到el中的DOM元素，进行DOM操作
beforeUpdated()
- 说明：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
updated()
- 说明：组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
beforeDestroy()
- 说明：实例销毁之前调用。在这一步，实例仍然完全可用。
- 使用场景：实例销毁之前，执行清理任务，比如：清除定时器等
destroyed()
- 说明：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
八、axios
- 以Promise为基础的HTTP客户端，适用于：浏览器和node.js
- 封装ajax，用来发送请求，异步获取数据
-
安装：
npm i -S axios
1、创建axios文件
import axios from "axios";
import qs from "qs";
import { Indicator, Toast } from "mint-ui"; const Axios = axios.create({
baseURL: "",//接口域名
timeout: 5000,
responseType: "json",
// withCredentials: true, // 是否允许带cookie这些
headers: {
"Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
}
}); Axios.interceptors.request.use( // POST传参序列化(添加请求拦截器)
config => {
// 在发送请求之前做某件事
if (
config.method === "post" ||
config.method === "put" ||
config.method === "delete"
) {
// 序列化
config.data = qs.stringify(config.data);
} // 若是有做鉴权token , 就给头部带上token
// if (localStorage.token) {
// config.headers.Authorization = localStorage.token;
// } Indicator.open({
// text: '加载中...',
spinnerType: 'fading-circle'
});//mint-ui加载动画 return config;
},
error => {
console.log(error)
Toast({
message: error,
position: 'middle',
duration: -1
});
Indicator.close();
return Promise.reject(error);
}
); Axios.interceptors.response.use( // 响应拦截器
response => {
Indicator.close();
// if (res.status != 200) {
// alert(res.statusText);
// return Promise.reject(res);
// }
if (response.data == null && response.config.responseType === 'json' && response.request.responseText != null) {
try {
// eslint-disable-next-line no-param-reassign
response.data = JSON.parse(response.request.responseText);
} catch (e) {
// ignored
}
}
return response;
},
error => {
Indicator.close();
if (error.response) {
// 请求已发出，但服务器响应的状态码不在 2xx 范围内 } else {
//一些错误是在设置请求的时候触发 console.log('Error', error.message);
} Toast({
message: error.message,
position: 'middle',
duration: -1
}); return Promise.reject(error);
}
); export default {
install: function (Vue, Option) {
Object.defineProperty(Vue.prototype, "$axios", { value: Axios });
}
};
---
// 在组件中使用：
methods: {
getData() {
this.$axios.get('url')
.then(res => {})
.catch(err => {})
}
}九、组件之间通讯
父组件到子组件 （通过props）
-
注意：属性的值必须在组件中通过
props属性显示指定，否则，不会生效 -
说明：传递过来的
props属性的用法与data属性的用法相同
<div id="app">
<!-- 如果需要往子组件总传递父组件data中的数据 需要加v-bind="数据名称" -->
<hello v-bind:msg="info"></hello>
<!-- 如果传递的是字面量 那么直接写-->
<hello my-msg="abc"></hello>
</div> <!-- js -->
<script>
new Vue({
el: "#app",
data : {
info : 15
},
components: {
hello: {
// 创建props及其传递过来的属性
props: ['msg', 'myMsg'],
template: '<h1>这是 hello 组件，这是消息：{{msg}} --- {{myMsg}}</h1>'
}
}
})
</script>
子组件到父组件
- 1、在父组件中定义方法 parentFn
- 2、在子组件 组件引入标签 中绑定自定义事件 v-on:自定义事件名="父组件中的方法" ==> @pfn="parentFn"
-
3、子组件中通过
$emit()触发自定义事件事件 this.$emit(pfn,参数列表。。。)
<hello @pfn="parentFn"></hello> <script>
Vue.component('hello', {
template: '<button @click="fn">按钮</button>',
methods: {
// 子组件：通过$emit调用
fn() {
this.$emit('pfn', '这是子组件传递给父组件的数据')
}
}
})
new Vue({
methods: {
// 父组件：提供方法
parentFn(data) {
console.log('父组件：', data)
}
}
})
</script>
非父子组件通讯
- 在简单的场景下，可以使用一个空的 Vue 实例作为事件总线，创建eventBus.js文件
import Vue from 'Vue' export const Event = new Vue() // 注册单一事件管理组件通信
- 示例：组件A ---> 组件B
<!-- 组件A： -->
<com-a></com-a>
<!-- 组件B： -->
<com-b></com-b> <script>
import Event from '../assets/js/eventBus'
// 通信组件
var vm = new Vue({
el: '#app',
components: {
comB: {
template: '<p>组件A告诉我：{{msg}}</p>',
data() {
return {
msg: ''
}
},
created() {
// 给中间组件绑定自定义事件 注意:如果用到this 需要用箭头函数
bus.$on('tellComB', (msg) => {
this.msg = msg
})
}
},
comA: {
template: '<button @click="emitFn">告诉B</button>',
methods: {
emitFn() {
// 触发中间组件中的自定义事件
bus.$emit('tellComB', '土豆土豆我是南瓜')
}
}
}
}
})
</script>
十、内容分发
- 通过<slot></slot> 标签指定内容展示区域
十一、获取组件（或元素） - refs
-
说明：
vm.$refs一个对象，持有已注册过 ref 的所有子组件（或HTML元素） -
使用：在 HTML元素 中，添加
ref属性，然后在JS中通过vm.$refs.属性来获取 - 注意：如果获取的是一个子组件，那么通过ref就能获取到子组件中的data和methods
<div id="app">
<div ref="dv"></div>
<my res="my"></my>
</div> <!-- js -->
<script>
new Vue({
el : "#app",
mounted() {
this.$refs.dv //获取到元素
this.$refs.my //获取到组件
},
components : {
my : {
template: `<a>sss</a>`
}
}
})
</script>
