vue.js
1.关闭生成提示
Vue.config.productionTip = false //阻止提示
2.Vue实例中data和el的两种写法
var vm = new Vue({
el: "#app", //el的一中写法
})
vm.$mount('#app') //el的第二种写法
data的两种写法
var v = new Vue({
data() { //data的函数形式这里的函数不能使用箭头函数
return {
title: "hello"
}
},
//第二中方式
data: {
title: 'hello'
}
})
3.vue中的MVVM模型
-
M(model)模型 ：是data中的的数据
-
V(view)视图：是模板代码
-
VM(view Model)视图模型：就是VM实例
观察发现data中的所有属性都在VM实例中出现，VM中所有的属性以及vue原型上的所有属性，在vue实例中都可以使用
4.vue中的数据代理（需要了解javascript中的Object.defineProperty()）
数据代理：通过一个对象代理对另一对象的数据进行（读/写操作）
let obj1 = {
x: 100
}
let obj2 = {
y: 100
}
//通过代理obj2中
Object.defineProperty(obj1, 'y', {
get: function () {
return obj2.y
},
set: function (value) {
return obj2.y = value
}
})
console.log(obj1)
vue中的_data中的数据 === vue中data
5.事件修饰符
- 阻止默认事件：.prevent 表单提交可以阻止事件的刷新
- 阻止冒泡事件：.stop
.passive修饰符尤其能够提升移动端的性能。常用在滚动条上
6.键盘修饰符
- 键盘事件 v-on.keyup或是v-on.keydown
- 自定义键盘事件 Vue.config.keyCodes.f1 = 112
- 常用的键盘别名：
.enter.tab.delete(捕获“删除”和“退格”键)，.esc，.space，.up，.down，.left，.right，，.ctrl，.alt，.shift，.meta
7.vue中事件总结
1.vue中事件 使用v-on.xxx或者@xxx绑定事件，其中xxx是事件名
- 事件的回调要配置在methods中，最终会在vue实例中，
- methods中配置的函数不要是箭头函数，否则this指向的就不是vue的实例了。
- methods中的函数都是被vue实例管理的。
8.vue的计算属性(computed)
计算属性是需要的属性不存在，通过已经有的属性计算得到,如果计算属性要修改，必须写成set函数去响应的修改对象的属性
监听属性watch(用于响应数据的变化)
vue中的watch默认是不进行深度监测的。如果要深度监测属性需要将deep的值设置为true,深度监视要根据数据的进行监视
watch: {
Number: {
deep: true, //深度监听
immediate: true, //立即监听
handler(newValue, oldValue) {
console.log(newValue, oldValue)
}
},
//watch的简写形式
number(newValue,oldValue){
console.log(newValue,oldValue)
}
}
9.计算属性和侦听属性的区别
computed能完成的功能watch都能完成，但是watch能完成的功能computed不一定能完成，比如异步函数。
两个重要的小原则：1.所被vm管理的函数都要写成正常的函数，不被vm管理的函数要写为箭头函数（例如：定时器，ajax回调函数，promise的回调函数）这样this指向才是MV
10.样式的绑定
- 字符方式绑定样式适用于样式名不确定的情况下
- 数组样式的绑定适用于在样式名和样式的个数不确定的情况下使用，
- 样式的对象形式的绑定，样的名和个数都确定但是样式是动态绑定的。
11. vue中的for循环 :key的作用和原理
- key是虚拟DOM对象的标识，当数据发生变法时，当数据发生变化时，vue会根据【新数据】生成【新的虚拟DOM】,随后vue进行【新虚拟DOM 】与【旧虚拟DOM】的差异比较。
- observer的观察者模式 用于监测vue中data的数据变化，
- vue监视数据的原理
- vue会监测data中所有层次的数据，
- vue是怎样监测对象中的数据了？
- 通过setter实现监视，并且要在new Vue 是就传入要监测的数据
- 对象中后添加的对象vue默认不是响应是的。如果要变为响应式的就要使用以下两个API
- Vue.set()
- 或者是vm.$set()
- 注意Vue.set()和vm.$set()方法不能对根元素添加属性
- vue是如何监测data中的数组的？
- 通过包裹数组更新元素的方法。本质就是做了两件事，
- 调用数组中原生的方法进行更新（
push()，pop()，shift()，unshift()，splice()，sort()，reverse()） - 重新更新模板更新数据
12 vue的表单搜集数据
- 若
input type="text" >则v-model收集的是value的值，用户输入的就是value值 - 若
<input type="radio">则v-model收集的是value的值，并且要个标签配置value值 - 若
<input type="checkbox" >如果没有给input配置value值收集的是一个布尔值，若要收集多个input的value值。则要个input配置value值。v-model绑定的是一个数据， - input的三个修饰符：1：
.lazy在change事件_之后_进行同步,2:.number收集的数据是number类型，3：.trim清除首尾的空格
13.vue的内置指令
vue的内置指令有：v-text, v-html,v-once,v-cloak:隐藏没有解析的元素,v-pre:可以利用它跳过没有编译的元素
13 自定义指令
-
自定义指令用directives注册一下自定指令
directives: { big(ele, bind) { ele.innerText = bind.value * 10 }, focus: { inserted(e) { e.focus() } } } -
自定义指令的三个钩子
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前- 指令调用时要用v-开头
14.生命周期
- beforeCreate：此时无法通过vm访问data中的数据，methods中的方法，
- created:此时可以通过vm访问data中的数据，methods中的方法
- beforeMount：页面呈现的是未经Vue编译的DOM结构，所以DOM的操作都不凑效。
- mounted：此时页面中呈现的都是Vue编译后的DOM，对DOM的操作都有效。至此页面的初始化完成了。一般在此进行：开启定时器，发送网络请求，发送订阅消息，绑定自定义事件等
- beforeUpdate:此时vue中的数据已经更新了。但是DOM的数据还没更新。
- update:DOM中的数据更新完毕
- beforeDestroy:vue实例销毁之前调用。在这一步，实例仍然完全可用
- destroy：销毁实例
15Vue的组件
关于VueComponent：
1. 组件本质上是一个VueComponent 的构成函数，但不是程序员定义的，是Vue.extend()生成的。
2. 我们只要调养组件，Vue解析是就会创建一个组件实例，即Vue内部帮我们调用了一下new VueComponent()
3. 每次调用vue.extend就会生成一个全新的VueComponent
16.vue的cli的使用
vue的CLI需要修改的配置项要参考vue的cli的配置。需要配置的都在vue.config.js中。
如果需要查看 配置文件，输入vue inspect > output.js 这个文件是不能修改的，
17.vue的Prop组件给子组件传递参数
18.vue的混入[mixin]
来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
//定义个混入
export default {
methods: {
showName() {
console.log(this.name)
}
},
}
//局部引入
import mixin from "../js/mixin.js";
export default {
mixins: [mixin],
name: "School",
data() {
return {
address: "上海",
name: "张三",
sex: "男",
age: 18,
};
},
};
//全局引入
Vue.mixin('mixin')
19.插件
功能：用于增强Vue.
本子：包含一个有install方法的对象，install方法的第一参数是Vue，第二个以后的参数都是插件使用者传递的参数
//定义一个插件
对象.install = function(Vue,options){
Vue.filter(){}
....
}
//使用插件
在main.js中添加
import plugins form '...'
Vue.use(plugins)
20自定义事件，
21组件之间值的传递方式
1.通过绑定属性方式
1.父组件向子组件传递 通过绑定属性值的方式，子组件通过props接受传递过来的属性
<my-foot :todos="todos"></my-foot> //父传子
//子组件接受
export default {
name: "MyFoot",
props: ["todos"],
data() {
return {
visibility: "all",
};
},
- 子组件向父子传值
1.父组件先定义一个方法，通过绑定属性方式发传递个子组件，子组件通过事件触发父组件的方式把子组件的值传递个父组件
<template>
<div id="app">
<h2>父组件</h2>
<Stu :showStuName="showStuName"></Stu>
</div>
</template>
<script>
import Stu from "./components/Stu.vue";
import School from "./components/School.vue";
export default {
name: "App",
components: {
Stu,
School,
},
methods: {
//父组件的方法
showStuName(name) {
console.log(name);
},
demo(name) {
console.log("学校名", name);
},
},
mounted() {
this.$refs.school.$on("sendSchoolName", this.demo);
},
};
</script>
//子组件
<template>
<div class="stu">
<h3>学生姓名：{{ name }}</h3>
<h3>学生年龄：{{ age }}</h3>
<button @click="sendData">向父组件传值</button>
</div>
</template>
<script>
export default {
data() {
return {
name: "zhangsan",
age: 18,
};
},
props: ["showStuName"], //接受父子组件的方法
methods: {
//通过事件触发父子传递的方法
sendData() {
console.log("向父组件传值");
this.showStuName(this.name);
},
},
};
</script>
3.子组件向父组件传值通过自定方法和$emit()
1.在子组件实例上绑定一个自定方法
<template>
<div id="app">
<h2>父组件</h2>
< <school @sendSchoolName="demo"></school>
</div>
</template>
<script>
import Stu from "./components/Stu.vue";
import School from "./components/School.vue";
export default {
name: "App",
components: {
Stu,
School,
},
methods: {
demo(name) {
console.log("学校名", name);
},
},
mounted() {
this.$refs.school.$on("sendSchoolName", this.demo);
},
};
</script>
2.子组件通过事件触发自定方法
//子组件
<template>
<div class="sch">
<h3>学校名：{{ name }}</h3>
<h3>地址：{{ address }}</h3>
<button @click="sendName">传输学校名</button>
</div>
</template>
<script>
export default {
data() {
return {
name: "xxxx学校",
address: "上海",
};
},
methods: {
//点击事件
sendName() {
//触发在父组件绑定的自定方法
this.$emit("sendSchoolName", this.name);
},
},
};
</script>
4.父组件通过$refs获取子组件再绑定一个回调函数
<template>
<div id="app">
<h2>父组件</h2>
<school ref="school"></school>
</div>
</template>
<script>
import Stu from "./components/Stu.vue";
import School from "./components/School.vue";
export default {
name: "App",
components: {
Stu,
School,
},
methods: {
showStuName(name) {
console.log(name);
},
demo(name) {
console.log("学校名", name);
},
},
mounted() {
//给子组件绑定事件
this.$refs.school.$on("sendSchoolName", this.demo);
},
};
</script>
子组件通过$emit()来触发这个方法
<template>
<div class="sch">
<h3>学校名：{{ name }}</h3>
<h3>地址：{{ address }}</h3>
<button @click="sendName">传输学校名</button>
</div>
</template>
<script>
export default {
data() {
return {
name: "xxxx学校",
address: "上海",
};
},
methods: {
sendName() {
this.$emit("sendSchoolName", this.name);
},
},
};
</script>
20.组件的自定义事件
-
是组件间的一中通信方式，适用于 子组件 ===>父组件通信
-
使用场景 A是父组件，B是子组件。B想给A传递数据，那么就要在A中给B绑定一个自定义事件（事件得回调在A中）
-
绑定自定义事件。
(1):在父组件中：
< <school @sendSchoolName="demo"></school>或者<school v-on:sendSchoolName="demo"></school>(2):方式：
``` methods: { ... demo(name) { console.log("学校名", name); this.name = name; }, }, mounted() { this.$refs.school.$on("sendSchoolName", this.demo); }, ``` -
自定义事件的触发 `this.$emit(“sendSchoolName”, ‘数据’);
-
解绑自定事件
this.$off('sendSchoolName') -
在父组件上也可以给子组件绑定原生事件 ，但是需要使用
.native例如：<Stu :showStuName="showStuName" @click.native="demo"></Stu> -
注意：通过
this.$refs.school.$on("sendSchoolName", this.demo);中的回调要么使用methods中的方法，或者是箭头函数mounted() { this.$refs.school.$on("sendSchoolName", (name, ...arg) => { console.log(name); }); },
21.全局事件总线
-
全局事件总线是一种组件间通信方式，适用于任意组件间的通信。
-
安装全局事件总线
new Vue({ ... beforeCreate() { Vue.prototype.$bus = this //事件总线 }, }). -
使用事件总线
-
接受数据：例如A组件向接受数据，则在A组件中给$bus绑定自定事件，事件的回调留着在A组件自身。
methods: { demo(name) { console.log("学校名字是", name); }, }, mounted() { //通过事件总线向兄弟节点发送数据 this.$bus.$on("showSchoolName", this.demo); //this.demo是事件的回调 }, -
提供数据
methods: { sendSchoolName() { this.$bus.$emit("showSchoolName", this.name); //提供数据 }, }, -
要手动关闭 绑定的事件一般是在destroy(){}这个周期关闭
destroy() { this.$bus.$off(["changeId", "removeId"]); },
-
22消息的订阅和发布
-
这是一直组件间的通信方式
-
使用步骤：
-
安装一个pubsub插件
cnpm install pubsub-js --save -
在需要发布消息和订阅消息的组件中分别引入
import PubSub from "pubsub-js"; -
发布消息
sendData() { //点击是发布一个消息 PubSub.publish("hello", this.name); //hello是消息名，this.name是参数 }, -
订阅消息
mounted() { this.pubId = PubSub.subscribe("hello", (msgName, data) => { //msgName消息的名字，data 消息的参数， this.pubId是这个消息的id console.log("订阅了一个消息"); console.log(arg); }); }, -
取消消息订阅
destroy() { PubSub.unsubscribe(this.pubId); //取消订阅 },
23.$nextTick()的使用
- 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
24Vue封装的过渡与动画
-
作用：在插入，更新或移除DOM元素，在适当的时候添加样式类名。
-
图示：
3.写法：
-
元素进入时的样式：
- v-enter:进入的起点
- v-enter-to:进入的终点
- v-enter-active:进入过程中
-
元素离开是的样式：
- v-leave:离开的起点
- v-leave-to:离开的终点
- v-leave-active:离开的过程
-
如果有多个元素请使用
<transition-group>每个元素要一个唯一的Key值 -
使用第三方动画库
-
安装动画库
cnpm install animate.css --save -
在组件中引入动画样式
import "animate.css"; -
在元素中使用
<transition name="animate__animated animate__bounce" enter-active-class="animate__backInDown" leave-active-class="animate__backOutUp" appear > <h1 v-show="isShow">使用动画库的动画</h1> </transition>
25. vue中的配置代理（多数情况下vue中的ajax请求是用axios）
- 配置一个代理服务器
-
-
个元素要一个唯一的Key值
4. 使用第三方动画库
1. 安装动画库 `cnpm install animate.css --save`
2. 在组件中引入动画样式 `import "animate.css";`
3. 在元素中使用
```js
<transition
name="animate__animated animate__bounce"
enter-active-class="animate__backInDown"
leave-active-class="animate__backOutUp"
appear
>
<h1 v-show="isShow">使用动画库的动画</h1>
</transition>
```
###### 25. vue中的配置代理（多数情况下vue中的ajax请求是用axios）
待续…
2284
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
