配置
data - 数据
data: {
message: 'hello vue',
// 键 : 对象
user: {
name: '张三',
age: 18
},
// 键 : 数组
users: [
{
name: '李四',
age: 20
},
{
name: '王五',
age: 21
}
],
hello: () => {
console.log("hello world");
}
}调用方式（对象）：{{user.name}}，{{user.age}}
调用方式（数组）：{{users[0].name}}，{{users[0].age}}
调用方式（函数）：{{hello}}
数据里面是可以一直嵌套的，只要写在data中书写的属性都可以被调用
函数
<div id="app"></div>
<script>
const vm = new Vue({
el: "#app",
// data可以是一个函数，函数的返回值必须是一个对象
data() {
return {
name: "张三"
}
}
})
</script>computed - 计算属性
通过计算Vue的原有属性（data内属性）得到一个全新的属性，全新的属性和data没有关系它有自己的值和名，这个属性就是就是计算属性
这个计算属性和 methods 有些相似，不过计算属性的值会走缓存
<div id="app">
<h1>{{msg}}</h1>
<input type="text" v-model="content">
{{con}}
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
msg: "计算属性",
content: "",
},
computed: {
// 完整写法
con: {
get() {
// 反转字符串
return this.content.split("").reverse().join("");
},
// 一般set方法很少使用
set(val) {
this.content = val.split("").reverse().join("");
}
},
// 简写（不需要set）
con_j() {
return this.content.split("").reverse().join("");
}
}
})
</script>get/set调用时机：
- get：有两种调用时机，第一种是第一次访问这个方法的时候进行调用；第二次是绑定的原有属性的值发生改变会再次调用
- set：当修改计算属性的值的时候，调用set方法
当使用简写形式的时候，在插值语法中只需要写属性名，不需要带括号，因为他是属性不是方法
计算属性中的this是vm实例，箭头函数中的this是windows，
{{}}插值语法中可以使用Vue实例所管理的属性，包括计算属性
watch - 侦听属性
可以侦听原有属性和计算属性，作用为：当侦听的属性发生改变的时候进行一些操作
<div id="app">
<h1>{{msg}}</h1>
<input type="text" v-model="content">
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
msg: "侦听属性",
content: "",
con: {
c: ""
}
},
watch: {
content: {
immediate: true,
handler(newVal, oldVal) {
console.log(newVal, oldVal);
}
},
'con.c': {
handler(newVal, oldVal) {
console.log(newVal, oldVal);
}
},
// 当只有handler的时候可以写成以下形式
content(newVal, oldVal) {
console.log(newVal, oldVal);
}
}
})
</script>属性键为被监听的属性，如果监听的属性是多级结构，加上 '' 即可
immediate：初始化的时候调用一次handler
handler 方法包括里面的值是固定死的，每次侦听的值发生变化会调用这个方法
newVal：这个是属性更改后的值
oldVal：这个是属性更改前的值
深度监视
如果被镇定的数据是多级的，而业务需要监听全部内容，此时一个一个配置会很麻烦，可以使用 deep 属性来进行深度监视，属性默认关闭
<div id="app">
<h1>{{msg}}</h1>
<input type="text" v-model="content.a">
<input type="text" v-model="content.b">
<input type="text" v-model="content.c.d">
<input type="text" v-model="content.c.f">
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
msg: "侦听属性",
content: {
a: "",
b: "",
c: {
d: "",
e: ""
}
},
},
watch: {
content: {
// 开启深度监视
deep: true,
handler(newVal, oldVal) {
console.log(newVal, oldVal);
}
}
}
})
</script>后期添加
在需要达成某种条件的时候进行添加监听
<div id="app">
<h1>{{msg}}</h1>
<input type="text" v-model="content">
</div>
<script>
const vm = new Vue({...})
// 后期添加监听
vm.$watch("content", {
handler(newVal, oldVal) {
console.log(newVal, oldVal);
}
})
// 简写形式
vm.$watch("content", function(newVal, oldVal) {
console.log(newVal, oldVal);
})
</script>filters - 过滤器
一般用于处理简单的逻辑，比如后端传过来的时间戳转成正常的年月日格式等等
过滤器有局部过滤器和全局过滤器；过滤器只可以使用在插值语法和单向绑定（v-bind）中
使用方式：{{xxx | 过滤器 | ...}}
第一个时需要过滤的参数，后面的全部都是过滤器，可以有多个，第二个过滤器的参数时第一个过滤器过滤出来的值；可以往过滤器中手动传值，但过滤器的第一个参数永远时前一个的值
局部
<div id="app">
<input type="text" v-model="keyWord" placeholder="请输入数据">
{{ keyWord | filter1 | filter2("数据") }}
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
keyWord: "",
},
filters: {
filter1(val) {
return val.toUpperCase();
},
filter2(val, data) {
return val + data;
}
}
})
</script>全局
Vue.filter("filter", function (val) {
return val.toUpperCase();
});参数跟局部一样
directives - 自定义指令
官方文档：自定义指令 — Vue.js
指令的名字不需要写 v- ，名字建议全部小写对于多个单词来说中间使用 - 进行分割
在自定义指令中，会传两个参数，第一个是真实的dom，第二个是标签与指令绑定关系的对象
执行时机：标签和指令第一次绑定的时候；模板重新编译的时候
有两种写法：函数式和对象式
局部
<div id="app">
<div v-test-demo2="msg"></div>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
msg: "hello world"
},
directives: {
// 函数式
'test-demo1': function (element, binding) {
element.innerText = binding.value;
},
// 对象式
'test-demo2': {
// 元素与指令初次绑定的时候调用
bind(element, binding) { },
// 元素被插入到页面后自动调用
inserted(element, binding) { },
// 当模板被重新解析的时后自动调用
update(element, binding) { }
}
}
})
</script>全局
// 函数式
Vue.directives("test-demo1", function (element, binding) {
element.innerText = binding.value;
});
// 对象式
Vue.directives("test-demo2", {
// 元素与指令初次绑定的时候调用
bind(element, binding) { },
// 元素被插入到页面后自动调用
inserted(element, binding) { },
// 当模板被重新解析的时后自动调用
update(element, binding) { }
})props - 数据
这个用来做数据传递，当在组件标签上书写对应的属性，这些属性就会通过 props 配置映射到对应的数据中，实现组件之间的通信
样例：<User name="张三" sex="男" :age="18"></User>
如果添加上类型显示，传输数值型数据时需要使用单向绑定，因为直接使用 "" 传过去的是字符串
<template>
<div>
<p>{{ name }}</p>
<p>{{ sex }}</p>
<p>{{ age }}</p>
</div>
</template>
<script>
export default {
// 简单配置
props: ["name", "sex", "age"],
// 完整配置 - 加上数据类型验证
props: {
name: String,
sex: String,
age: Number,
},
// 完整默认配置 - 加上数据类型验证、是否是必要属性、默认值
props: {
name: { type: String, require: true, default: "王五" },
sex: { type: String, require: true, default: "男" },
age: { type: Number, require: true, default: 18 },
}
};
</script>以上三种配置选择其中一种即可
ref 属性
被该属性标记的内容标签可以通过 this.$refs.标记名 获取所有内容，如果对原生html标签标记会获得该标签的DOM元素，如果对Vue组件标签标记会获取该组件的信息
<h1 ref="h1">hello world</h1>
<User name="张三" sex="男" :age="12" ref="user"></User>
// 获取标记h1的内容
this.$refs.h1
// 获取标记user的内容
this.$refs.usermixins - 混入
Mixin（混入）是一种机制，允许在多个组件之间共享可重用的代码。可以将一组属性、方法或生命周期钩子等内容从一个地方定义，然后混入到一个或多个组件中，以实现代码的重用和组合，混入允许在不同组件之间共享相同的逻辑，避免重复编写相似的代码
一般为在src目录下创建一个 mixins.js 的文件里面存放混入的代码
export const 混入名1 = {
data() { ... },
methods: { ... },
}
export const 混入名1 = { ... }混入是通过引用相对的混入名来达到混入指定的内容
import { 混入名1 } from "../mixins.js";
export default {
mixins: [混入名1,混入名2],
};混入的内容是可以直接使用的
如果组件中有同名的方法，会优先调用自身的方法，可以理解为Java子继父中的重写
在混入中有局部混入和全局混入；局部混入是在组件内引入；全局是在 main.js 文件中引入并通过 Vue.mixin(xx) 进行引入（一次一个）
// 引入混入js文件
import { mix1, mix2 } from "./mixins.js";
// 全局混入
Vue.mixin(mix1)
Vue.mixin(mix2)插件
目的是给Vue做功能增强的，定义的时候需要遵守一定的限制，一般插件在一个 plugins.js 文件中定义
export const plugins1 = {
install(vue, d1, d2) { ... }
}
export const plugins2 = { ... }在定义插件的时候必须要有一个 install 方法，到时候会自己调用，参数有两部分：第一部分是vue的构造参数；第二部分是自定义的参数（可以有多个）
在 main.js 文件中引入，插件的使用通常放在vue实例之前
// 引入插件
import { plugins1, plugins2 } from './plugins.js'
// 插入插件
Vue.use(plugins1, 1, 2)
Vue.use(plugins2)