《－－－vue－－－》
vue双向绑定
- vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；
- 核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法；
什么情况下数组或对象不会在修改之后触发渲染页面
数组： 更改了数组长度，修改了数组的元素的值
对象：修改了对象的元素的值
变更方法 push pop shift unshift splice sort reverse
非变更方法 slice filter 过滤、concat 数组连接
-
可以使用 vue重写的函数
-
$set 三个参数 ：数组或对象，位置，新值
-
$forceUpdate 不建议使用
对象的合并
- Object.assign 三个参数：空对象，所要合并的对象，新添加的对象键值对
v-if v-show 的区别：
- v-if 修改了dom节点，开销比较大，切换不频繁时使用
- v-show 修改了css样式，display:none ,开销比较小，切换频繁
v-model
- .lazy 失去焦点时触发操作
- .number 强制转换为数值型数据
- .trim 去掉左右空格
计算属性和watch
- 计算属性computed ：将复杂运算都写在计算属性中，计算属性可以一次监听多个数据 ，返回一个计算结果
- 计算属性有缓存结果，如果数据不发生变化，就不会触发计算属性的函数，直接调用缓存结果就可以了
- watch ：一次只能监听一个数据，没缓存，watch 可以进行深度监听，大数量或异步操作时使用
计算属性和普通函数的区别
- 普通函数调用一次就执行一次函数体
- 计算属性，如果值没有发生变化，会直接使用 缓存的结果，而不会重新计算
生命周期
- beforeCreate －－$el没有挂载，data数据不存在
- created －－data 存在 $el还没绑定，对节点操作还不可以 ；属性和方法都可以使用了，watch回调已经存在了
- beforeMount －－$el绑定，dom节点的数据渲染未解析
- mounted －－$el 挂载了，data的数据已经解析了，dom节点的数据渲染已解析
- beforeUpdate
- updated
- beforedestroy －－进行垃圾回收的 ，定时器，绑定的事件
- destroyed
数据获取方式mounted中使用
- XMLHttpRequest
- jquery-ajax
- axios
- fetch
组件传参
-
父传子－－通过属性传参，在子组件中使用props接收
-
子传父：
子组件：this.$emit('自定义事件的名称',要传的参数)
父组件：
<child @自定义事件的名称="绑定的父组件的函数"></child>
在函数中接收数据
子组件 child
//手动触发自定义事件`
`this.$emit("myinput",100);
父组件
<child @myinput="change"></child>
js
methods:{
change(value){}
}
vue数据是双向绑定，vue组件传参是单向
- 在子组件中不建议修改父组件传过来的 props的值
- 如果想要 更改 props的值，需要将 props的值赋值给子组件的本地变量，然后再进行改变
vue上不可以使用原生js的事件，如有需要－需要在原生js事件上加.native的修饰符
props对象形式的写法
<body>
<div id="app">
<one :a="num" b='test' c="success"></one>
</div>
</body>
</html>
<script src="../day/vue.js"></script>
<script>
var one ={
props:{
a:[String,Number,Object],
b:{
type:String,
required:true // 参数为必选项
},
d:{
type:Number,
default:1000 //参数为默认值
},
// 默认返回函数
e:{
type:Object,
default:function(){
return {"msg":0}
}
},
// 自定义验证
c:{
validator:function(value){
return ["success","ok"].indexOf(value) !==-1
}
}
},
template:`
<div>
子组件
a:{{a}}
b:{{b}}
c:{{c}}
d:{{d}}
e:{{e}}
</div>
`
}
var app = new Vue({
el:"#app",
data:{
// type:true,
num:10
},
components: {
one
}
})
</script>
兄弟节点间传参 eventbus
1.创建bus var bus = new Vue();
methods: {
goContent(type) {
//2.发送数据
//参数：1.自定义事件名；2.要传递的参数
bus.$emit('myevent', type);
}
}
//挂载后的钩子
mounted() {
//3. 接收数据
bus.$on('myevent', (data) => {
this.text = data;
});
}
refs
- refs使用 ，是在 js原生组件或 自定义组件上写 ref 属性
- 不建议使用，没有虚拟ｄｏｍ性能稍差
nextTick
解决 refs数据还未获取完，就获取到了dom节点的信息，nextTick数据获取完以后，获取到了dom节点的信息
nextTick 有一个参数 ，是回调函数，作用是，等待 视图更新后，在执行 回调函数中的代码
this.$nextTick(() => {
this.$refs.myinput.focus();
})
root
可以获取到根节点的所有属性
mounted() {
this.$root.放法();
this.mm = this.$root.属性;
}
parent-children
- 子组件使用$parent
- 父组件使用$children
- 注意：$children 的使用你必须知道子组件的下标，否则没有办法使用
provide-inject
<body>
<div id="app">
<child2></child2>
</div>
<script src="./js/vue.js"></script>
<script>
//孙子组件
var child = {
template: `<div>子组件{{msg}}</div>`,
//子组件中使用 inject接收
inject: ['msg']
}
//子组件
var child2 = {
template: `<div><child></child> </div>`,
components: {
child
}
}
var app = new Vue({
el: "#app",
data: {
msg: 'hello world'
},
//父组件中 使用 provide 传参
//对象的写法只能传常量
//provide: { msg: 'hhhh' },
//如果想要传变量，provide必须写成函数的形式
provide() {
return {
msg: this.msg
}
},
components: {
child2
}
})
</script>
</body>
动态组件
<component :is="type"></component>
keep-alive
keep-alive 作用：组件缓存，组件缓存可以增加性能
组件缓存后，组件不需要重新创建，也没有销毁，直接使用缓存中的组件实例就可以了
keep-alive 缓存的组件，在第二次及以后每次进入时，beforeCreate created beforeMount mounted
keep-alive的钩子函数：
activated 进入时触发的钩子
deactivated 离开时触发的钩子
<keep-alive include="list,cart">
<component :is="type"></component>
</keep-alive>
基本路由
<div id="app">
<!-- 7.路由跳转 -->
<!-- router-link 解析为a标签，和a的区别是，a标签会整体刷新页面，router-link 不会 -->
<router-link to="/">首页</router-link> |
<router-link to="/about">关于我们</router-link> |
<router-view></router-view>
</div>
<script src="./js/vue.js"></script>
<!-- 0.引入路由插件 -->
<script src="./js/vue-router.js"></script>
<script>
//1.创建子组件
//首页
var main = {
template: `<div>首页</div>`,
mounted() {
//当前路由对象 ，path 路径，params 传参 ，query 传参
console.log(this.$route);
//所有路由
console.log(this.$router);
}
}
//关于我们
var about = {
template: `<div>关于我们</div>`
}
//3.配置路由表
var routes = [
//参数：1.路由的路径，2.路由到的组件的名字
{ "path": "/", "component": main },
{ "path": "/about", "component": about },
]
//4.创建路由对象
var router = new VueRouter({
routes: routes
})
/********************/
var app = new Vue({
// el: "#app",//挂载
data: {
},
//2.注册
components: {
main, about
},
//5.将路由对象注册到根节点
router: router
}).$mount('#app')
</script>
</body>
动态路由
{path:"/user/:userid",component:"User"}
页面中获取传到的参数
this.$route.params.userid
命名视图
<router-link to="/abouttest">关于我们-别名</router-link>
{ path: "/about", component: about, alias: "/abouttest" },
守卫
路由守卫：在进入组件之前验证一下，有没有权限进入该组件，如果有权限则放行；进入组件，如果没有权限，需要做特殊处理，比如：跳到登录页登陆
路由守卫有三种：
全局守卫
router.beforeEach 全局前置守卫 to from next
router.beforeResolve 全局解析守卫 to from next
router.afterEach 全局后置钩子 to from
路由独享守卫
写在路由表中 ，哪一个路由需要守卫就在那个里面写入
beforeEnter to from next
路由的组件级守卫
写在相对应的组件中
beforeRouteEnter 组件进入 this是不存在的，因为是在组件创建前执行的钩子函数
beforeRouteUpdate 组件更新
beforeRouteLeave 组件离开
路由元信息
在路由表中 写法：
{
path:"/about",
component:about,
meta:{show:true}
}
使用时，可以在 路由守卫中
to.meta.***
可以在 this.$router.options.routes 这里面可以看到 meta的内容
导航钩子中获取数据
beforeRouteEnter 进入路由前的导航钩子不能使用 this，组件还没创建
beforeRouteEnter(to, from, next) {
axios.get("http://www.51houniao.com/product/product/guessYouLike")
.then((res) => {
console.log(this); //beforeRouteEnter 中是调用不到 组件的实例，
//因为在 这个钩子函数执行时，组件还没创建
//可以将 vue的实例对象 在 next的回调中使用
//我们可以在 next的回调函数中 使用 vue组件的实例对象
next((vm) => {
vm.list = res.data;
});
});
},
滚动行为 scrollBehavior
一般情况下使用他可以滚动到 顶部
//to 去到哪个页面，from从哪个页面来，savedPosition滚动的位置
//需求：点击按钮到某一页，需要滚动到顶部
//如果按历史纪录的回退按钮，保留网页原来的位置
scrollBehavior(to, from, savedPosition) {
console.log("滚动行为触发了");
console.log(savedPosition);
if (savedPosition) {
return savedPosition;
} else {
//返回顶部
return { x: 0, y: 0 };
}
}
返回锚点处
if (to.hash == "锚点标签名") {
return { x: 0, y: 对应的位置 };
} else {
//返回顶部
return { x: 0, y: 0 };
}
vue 路由懒加载的三种方式
使用路由懒加载的原因：因为没使用路由懒加载时，显示首页时，其实其余的页面组件也已经加载了，多个组件加载会拖慢首页加载速度，所以我们需要使用 路由懒加载，路由懒加载的作用是当页面展示时再加载页面组件，性能更加，速度更快。属于性能优化！
18.1 . vue异步组件技术 ==== 异步加载
{ path: ‘/home’, name: ‘home’, component: resolve => require([’@/components/home’],resolve) },
18.2 组件懒加载方案二 路由懒加载(使用import)
const Home = () => import(/* webpackChunkName: ‘ImportFuncDemo’ */ ‘@/components/home’)
18.3 webpack提供的require.ensure()
{ path: ‘/home’, name: ‘home’, component: r => require.ensure([], () => r(require(’@/components/home’)), ‘demo’) },
《－－－vuex－－－》
vuex定义和特点
-
vuex 叫做统一状态管理器，如果项目中有组件间的复杂传参，或者多个组件公用同一个状态值时，我们使用 vuex统一管理
-
vuex使用： 简单项目 ，不建议使用，只能增加复杂度
-
复杂项目，或者是大型项目，建议使用vuex对状态值做统一管理
vuex流程
2.1 在组件中触发事件，在事件的绑定函数中 使用 dispatch 触发vuex中的动作（action），
2.2 在动作action中 可以commit 提交 状态值到mutation ,
2.3 在mutation 中修改 store (仓库)中的state的数据
2.4 store中的数据发生变化后，会自动触发 render函数重新渲染页面
注意：action 可以是异步的 ，操作比较多的时候 ，不是所有的vuex操作都调用 action，看用户需求
mutation 中不可以使用异步操作，只能在里面修改 store中的state的值
vuex的五大金刚
- state －－状态值
- mutations －－修改状态值
- actions －－异步和大数据量操作
- gettters －－state的派生状态
- modules －－模块
辅助函数
- mapState －－在 computed中调用
- mapMutations －－在 methods 中调用
- mpActions －－在 methods 中调用
- mapGetters －－在 computed中调用
vuex 和缓存的区别
-
vuex: 是响应式的，刷新后，修改的数据会还原
-
localStorage:不是响应式的，设置了值之后必须再获取一次，刷新后数据还在
##### vuex中不允许直接更改store中的state的值—因为不好追踪
- 需要更改数据时需要使用 commit提交到mutations
- mutations 同步操作
computed中使用mapState
- store中的state里面的count的值映射到 组件里的data
computed中使用getters
- getters 完成 store中的state的派生状态，避免了在组件中重复的利用 computed计算state的派生值
action 执行异步操作
- actions里面一般执行异步操作，和大数据量的处理
- 将数据通过dispatch提交到actions处理
241
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
