-
阻止事件属性
-
父组件用子组件数据，子组件使用父组件数据方法
-
数组方法，
-
vuex的运作流程
-
methods和computed
-
渐进式
-
mvvm
Vue的数据监视
-
vue会监视data中所有层次的数据
-
如何监视对象中的数据
-
通过setter实现监视，且要在new Vue时就传入要监测的数据
-
对象中后追加的属性，Vue默认不做响应式处理
-
如需给后添加的属性做响应式，请使用下面方法：
Vue.set(target,propertyName/index,value)或者vm.$set(target,propertyName/index,value)
-
-
-
如何监测数组中的数据
- 通过包裹数组跟新元素的方法实现，本质就是zuole两件事：
- 调用原生对应的方法对数组进行更新
- 重新解析模板，进而更新页面
- 通过包裹数组跟新元素的方法实现，本质就是zuole两件事：
-
在Vue修改数组中的某个元素一定要用如下方法：
-
使用这些API：
push(),pop(),shift(),unshift(),splice(),sort(),reverse() -
Vue.set()或者vm.$set()特别注意:Vue.set(）和 vm.$set()不能给vm或 vm的根数据对象添加属性! ! !
vue中可以使用的数组方法
push()//往数组最后添加元素，返回新数组的长度 array.push(item1,item2...) pop()//删除数组中最后的一个元素，返回被删除的元素 array.pop() shift()//删除数组中第一个元素，返回被删除的元素 array.shift() unshift()//在数组最前面添加元素，返回新数组的长度 splice(start,length,元素)//插入删除替换数组元素 sort() //数组元素排序 reverse() //数组倒序翻转
-
收集表单数据
收集表单数据：
-
若:
<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。 -
若:
<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。 -
若:
<input type="checkbox"/>- 没有配置
input的value属性，那么收集的就是checked(勾选 or未勾选，是布尔值) v-model的初始值是数组．那么收集的的就是value组成的数组
- 没有配置
-
v-model 的三个修饰符：
lazy: (v-model.lazy)失去焦点后再收集数据number:输入字符串转化为有效的数字trim:输入首位空格过滤
指令
-
v-bind:单向绑定解析表达式,可简写为 :XXX -
v-model:双向数据绑定 -
v-for:遍历数组/对象/字符串 -
v-on:绑定事件监听，可简写为@ -
v-if:条件渲染，表达式的值用来确定元素是否存在，(动态控制节点是否存存在) -
v-else:条件渲染，(动态控制节点是否存存在) -
v-show:条件渲染，表达式的值用来确定元素的display值（动态控制节点是否展示) -
v-text:- 作用: 向其所在的节点中渲染文本内容，相当于
innerTEXT - 与插值语法的区别: v-text会替换掉节点中的内容，插值语法则不会。
- 作用: 向其所在的节点中渲染文本内容，相当于
-
v-html:向其所在的节点中渲染html内容，相当于
innerHTML与插值语法的区别: v-text会替换掉节点中的内容，插值语法则不会。
Vue全局API
Vue.use：
Vue.use(plugin)
//负责安装插件
Vue.mixin：
多个组件公用一个配置
//新建文件maxin.js:
export const mixin1={
methods:{
showName(){
alert(this.name)
}
}
}
在使用该配置的组件中引入并使用混合（局部配置）
import {mixin1} from '..路径'
mixins:[mixin1]
//该组件中即可使用minin1中的配置项了
或者在mian.js中引入并使用
import {mixin1,mixin2} from '..路径'
Vue.mixin(mixin1)
Vue.mixin(mixin2)
//引入并使用之后可以在所有组件中使用该配置项
Vue.filter：
//定义一个过滤器，作用是筛选字符串，只保留前5个字符
//定义在了vue实例身上
Vue.filter('filterName',function(value){
return value.slice(0,4);
})
<template>
<-- 直接使用在插值语法中,msg是data中的数据，作为参数传递给filterName过滤器 -->
{{ msg | filterName }}
</template>
Vue.directive:
内部指令
//自定义指令
//Vue实例中directives配置
directives:{
fun1(element,binding){
//步骤
element.innerText=binding.value*10
}
}
<-- 参数value传入自定义组件中 -->
<template>
<spon v-fun1="value"></spon>
</template>
使用vue.directives()
Vue.set：
添加或者修data中某个对象中的属性值
Vue.set(vm.student,'name','zhangsan')
//将data里面的数据name设置为zhangsan，并且实现响应式的效果
//或者vm.$set(vm.student,'name','zhangsan')效果相当
//修改的值只能是对象中的属性
data(){
return {
student:{
name:'lihua'
},
teacher:'lili'
}
}
Vue.delete:
参考set
生命周期：
beforeCreate：无法通过vm访问到data的数据、methods中的方法，事件和数据代理还未开始
created：可以通过vm访问到data的数据、methods中的方法，数据监测和数据代理已存在
beforeMount：生成的虚拟dom还没有显示在页面上
mounted：页面上面显示的是真实dom，一般在此阶段进行开启定时器，发送网络请求，订阅消息，绑定自定义事件，等初始化操作
beforeUpdate：数据是更新的，但是页面还没有进行同步更新
updated：页面已经根据新的数据进行了更新
activated：组件激活的时候调用，当被标签<keep-alive>包裹的缓存组件显示出来的时候调用此函数
deactivated：当被标签<keep-alive>包裹的缓存组件失活的时候调用
beforeDestory：vm中的data，methods，指令都处于可用状态，马上要执行销毁过程，一般再此阶段进行：定时器的关闭，取消订阅消息，解绑自定义事件
destory：vue实例销毁之后调用
组件间通信方法：
props：
通信方向：
子组件–>父组件
实现步骤：
-
在父组件中methods中定义函数
methods: { getSchoolName(schoolName) { //在此可以对父组件的数据进行修改，使用的参数school是从子组件中获取到的 //通过this.data修改数据 console.log(schoolName); } } -
在其子组件的标签中添加指令
:函数名="函数名"<School :getSchoolName="getSchoolName"></School> -
在子组件中的props配置项中接收：
props:['函数名']props: ['getSchoolName'],接收之后就可以使用该父组件中的函数，在methods中编写函数调用来自父组件的函数，然后在页面中触发函数
methods: { showName(schoolName) { this.getSchoolName(schoolName); } }<button @click="showName(schoolName)">点击我提示学校名</button>
对该通信方式原理的理解：
通过props将父组件的函数传递给子组件，子组件调用函数之后可以将子组件中的参数传递给父组件使用
组件自定义事件：
通信方向：
子组件–>父组件
实现步骤：
方法一：
-
在父组件中的子组件标签中定义自定义事件：
@自定义事件名="函数名"lili是自定义的事件名字getStudentName是父组件中的函数名Student是子组件名
<Student @lili="getStudentName"></Student>函数是在methods中的配执项
getStudentName(studentName) { //在此可以对父组件的数据进行修改，使用的参数school是从子组件中获取到的 //通过this.data修改数据 console.log(studentName); } -
在子组件中需要触发的位置编辑：
<button @click="sendStudentName">点击我提示学生姓名</button>在methods中编写函数：
methods: { sendStudentName() { //触发Student组件实例身上的lili事件 this.$emit('lili', this.name); } }
方法二：
-
使用自闭和标签中的ref属性：
<Student ref="student" /> -
使用mouted函数绑定自定义事件：
mounted() { //this.$refs.name获取到组件名为name的组件 //当事件自定义事件lili触发的时候，执行回调函数getStudentName //getStudentName是写在父组件所在vue文件的methods中的函数 this.$refs.student.$on('lili', this.getStudentName); } -
在子组件中需要触发的位置编辑：（和方法一中的步骤2一致）
<button @click="sendStudentName">点击我提示学生姓名</button>在methods中编写函数：
methods: { sendStudentName() { //触发Student组件实例身上的lili事件 this.$emit('lili', this.name); } }
对该通信方式原理的理解
全局事件总线：
通信方向：
适用于任意组件之间
实现步骤：
-
安装全局事件总线：在
mian.js中new Vue({ ...... beforeCreate() { Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm }, ...... }) -
使用事件总线：
如果通信的方向是组件A=>组件B，那么在组件A中给$bus绑定自定义事件，事件的回调写在组件A中
组件A：
methods：{ ... demo(data){ //事件回调 }, mounted(){ this.$bus.$on('xxx',this.demo)//自定义事件的名字xxx，回调名demo } }组件B：
<button @click="sendStudentName">把学生名字传递给School组件</button>methods: { sendStudentName() { this.$bus.$emit('xxx',data)//绑定自定义事件，传递的数据data } } -
在组件A中添加beforeDestory钩子中用$off解绑当前组件所用到的事件
beforeDestroy() { this.$bus.$off('hello'); }
Vuex
Vuex的安装：
使用Vue2需要使用Vuex3版本，安装方法：npm i vuex@3
Vuex环境的搭建：
├── src
│ ├── assets: 存放静态资源
│ │── component: 存放组件
│ │ └── HelloWorld.vue
| │── store
│ │ └── index.js
│ │── App.vue: 汇总所有组件
│ │── main.js: 入口文件
index.js文件：
//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)
//action用于响应组件中的动作
const actions={
//进行条件判断的方法
jiaOdd(context,value){
if(context.state.sum%2){
context.commit('JIA',value)
}
},
}
//mutations用于操作数据(state)
const mutations={
//fun(context,value){
// context.commit('FUN',value)
//}
JIA(state,value){
state.sum+=value
}
}
//state用于储存数据
const state={
//放入数据,在组件的模板中，获取到sum数据的方式是：$store.state.sum
sum:0
}
//创建并暴露store
export default new Vuex.Store({
actions,
mutations,
state
});
helloworld组件：
<template>
<div>
<!-- 在模板中获取到index.js中state对象中的数据-->
<h1>当前求和为：{{$store.state.sum}}</h1>
<button @click="increment">+</button>
<button @click="incrementOdd">当前求和为奇数再加</button>
</div>
</template>
<script>
//引入组件
export default {
name: 'Count',
data() {
return {
n: 1
}
},
methods: {
increment() {
//直接调用mutations中的方法
this.$store.commit('JIA', this.n)
},
incrementOdd() {
//调用
if (this.$store.state.sum % 2) {
this.$store.dispatch('jiaOdd', this.n)
}
}
}
}
</script>
App组件
<template>
<div>
<Count />
</div>
</template>
<script>
import Count from './components/Count.vue';
//引入组件
export default {
name: 'App',
components: {
Count,
}
}
</script>
vuex的工作流程：
-
在vue组件里面，通过dispatch来触发actions提交修改数据的操作
-
通过actions的commit来触发mutations来修改数据
-
mutations接收到commit的请求，就会自动通过Mutate来修改state里面的数据
-
最后由store触发每一个调用它的组件更新
vue-router
环境搭建：
src目录下面新建router目录，router目录下面新建index.js
├── src
│ ├── assets: 存放静态资源
│ │── component: 存放组件
│ │── pages: 存放路由组件
| │── router:路由文件夹
│ │ └── index.js ：创建整个应用的路由
│ │── App.vue: 汇总所有组件
│ │── main.js: 入口文件
index.js文件编写
//该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
//创建并暴露一个路由器
export default new VueRouter ({
routes:[
//一级路由
{
path:'/about', //path和component不同的路径匹配不同的组件
component:About
},
{
path:'/home',
component:Home,
children:[ //二级路由
{
path:'news',
component:News
},
{
path:'message',
component:Message,
children:[
{
path:'detail',
component:Detail,
}
]
}
]
}
]
})
vue组件中编写的<router-link>标签将编译成为链接，属性to将定义跳转的路径，active-class属性将显示点击后的<router-link>的样式
<router-link active-class="active" to="/about">About</router-link>
对应链接显示触发之后组件挂载的位置
<router-view></router-view>
传参
参数从<router-link>所在的组件传到<router-view>组件
1. query参数：
在path后面，以?开始键值对的形式，可以添加上js变量
参数传递：
<!-- to的字符串写法 -->
<router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">
</router-link>
<!-- to的对象写法 -->
<router-link :to="{
path:'/home/message/detail',
query:{
id:m.id,
title:m.title
}
}">
</router-link>
参数接收：
<li>{{$route.query.id}}---{{$route.query.title}}</li>
2. params参数：
例如：/home/message/detail/id/title
参数传递：
-
携带params参数传递时，路由配置中的path应该配置参数的格式
-
携带的params参数中的
<router-link>标签参数的对象写法不能使用path，必须配置name属性
<!-- to的字符串写法 -->
<router-link :to="`/home/message/detail/${m.id}/${m.title}`">
</router-link>
<!-- to的对象写法 -->
<router-link :to="{
name:'detail',
query:{
id:m.id,
title:m.title
}
}">
</router-link>
参数接收：
<li>{{$route.params.id}}---{{$route.psrams.title}}</li>
使用params参数的路由配置：
{
path:'message',
component:Message,
children:[
{
name:'detail'
path:'detail/:id/:title',
component:Detail,
}
]
}
扫一扫
545
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
