v-model的原理
v-model只是一个语法糖，真正的实现还是通过v-bind绑定响应式数据，并触发change事件传递数据。@change="value = $event.target.value"
data数据源中的数据名与方法名同名问题
首先说一下initState函数初始化的顺序Props、methods、data、computed、watch，本质上这些都是要挂载到this上面的。如果重名的话，后面出现的属性自然而然的会覆盖之前挂载的属性。
怎么给vue定义全局的方法
- 第一种：挂载到vue的prototype上。在main文件中定义，在组件中直接通过this调用但是没有提示。
Vue.prototype.msg = function(text) {
console.log(text)
}
this.msg("这是一个全局的方法")
*第二种：利用全局混入mixin。
const myMixin = {
created() {},
data() {
return {
isData: "我是混入式组件",
}
},
beforeMount() {},
mounted() {},
methods: {}
}
export default myMixin;
//单页面引入
import myMixin from "./mixins"
mixins:[myMixin],
//全局混入
Vue.mixin(myMixin)
//或是
Vue.mixin({
data() {
return {
isData: "我是混入式组件",
}
}
})
与keep-alive相关的生命周期
- activated： 页面第一次进入的时候，钩子触发的顺序是created->mounted->activated
- deactivated: 页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated
keep-alive是Vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在页面渲染完毕后不会被渲染成一个DOM元素。通俗的讲就是当页面跳转后再返回时页面的状态不变。代码就不贴了太简单了，就是通过动态组件来回切换看是否切换回去值是否保持原状。
<keep-alive>
<component :is="compon"></component>
</keep-alive>
结果
重置data
//获取当前状态下的data
this.$data
//获取当前组件初始的data
this.$options.data.call(this)
//浅拷贝进行值重置
Object.assign(this.$data, { txt: "改变值", name: "lishi", age: 8 });
data() {
return {
txt: "初始值",
name: "张三",
age: 10
};
}
deactivated() {
console.log(this.$data);
console.log(this.$options.data.call(this));
},
methods: {
connet() {
Object.assign(this.$data, { txt: "改变值", name: "lishi", age: 8 });
}
}
结果
直白的this.$nextTick
在created()和beforeMounted()中想要操作DOM时你会发现是无法获取到DOM的，这便可以用到this.$nextTick对DOM进行异步更新。
<div v-for="(item,index) in formData" :key="index" ref="labelDiv">{{item}}</div>
beforeMount() {
this.axios({
url: "http://127.0.0.1:8888",
method: "get",
withCredentials: true
}).then(response => {
this.formData = response.data.label;
this.$nextTick(() => {
response.data.color.forEach((item, index) => {
debugger;
this.$refs.labelDiv[index].style.color = item;
}, this);
});
});
},
app.get("/", function (req, res, next) {
let verStr = {
color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae'],
label: [1, 2, 3, 4, 5]
}
res.send(JSON.stringify(verStr));
});
嵌套路由
{
path: '/keepTwo',
name: 'keepTwo',
component: keepTwo,
children: [{
path: "/keepTwoC1",
name: 'keepTwoC1',
component: keepTwoC1,
}, {
path: "/keepTwoC2",
name: 'keepTwoC2',
component: keepTwoC2,
}],
redirect: "/keepTwoC1"
}
<template>
<div>
<input type="button" @click="connet" value="返回1" />
<input type="button" @click="connet2" value="返回2" />
<div class="right">
<router-view></router-view>
</div>
</div>
</template>
methods: {
connet() {
this.$router.push({ path: "keepTwoC1" });
},
connet2() {
this.$router.push({ path: "keepTwoC2" });
}
}
子路由切换
vue-router路由有几种模式
- hash: 使用变更hash不会刷新页面的特性, 来变更路由, 做到单页面无刷新(默认)
即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。比如这个 URL：http://127.0.0.1:8080/#/keepTwoC1，hash 的值为 #/keepTwoC1。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。这个可以在控制台的network中看到只改变的时候Request URL是不变的。 - history: 使用html5的history方法。
利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'keep',
component: keep
}
]
})
vue异步组件
vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .
但是,这种情况下一个组件生成一个js文件。
{
path: '/home',
name: 'home',
component: resolve => require(['@/components/home'],resolve)
}
路由懒加载
// 下面2行代码，没有指定webpackChunkName，每个组件打包成一个js文件。
const keepTwoC1m = () =>
import ('@/components/keepAlive/keepTwoC1')
const keepTwoC2m = () =>
import ('@/components/keepAlive/keepTwoC2')
// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。
// const keepTwoC1m = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/keepTwoC1')
// const keepTwoC2m = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/keepTwoC2')
export default new Router({
routes: [{
path: '/keepTwoC1',
name: 'keepTwoC1',
component: keepTwoC1m
},
{
path: '/keepTwoC2',
name: 'keepTwoC2',
component: keepTwoC2m
}
]
})
webpack提供的require.ensure()
{
path: '/keepTwoC1',
name: 'keepTwoC1',
component: r => require.ensure([], () => r(require('@/components/keepAlive/keepTwoC1')), 'demo')
}, {
path: '/keepTwoC2',
name: 'keepTwoC2',
component: r => require.ensure([], () => r(require('@/components/keepAlive/keepTwoC2')), 'demo')
}
路由间的跳转
- router-link 标签法
<router-link :to="{name:'keepTwoC1',params:{id:1}}">keepTwoC1</router-link>
//query方式相当于接口的get请求参数会在路径中显示
<router-link :to="{path:'keepTwoC2',query:{id:2}}">keepTwoC2</router-link>
//数据获取
this.$route.params.id
this.$route.query.id
route 与router
route 是路由参数对象，所有路由中的参数，params，query 都属于它。
router 是一个路由导航对象，用它可以方便使用 js 代码，实现路由的前进后退、跳转到新的URL 地址
- this.$router.push() (函数里面调用)
this.$router.push("keepTwoC1");
this.$router.push({ path: "keepTwoC1" });
this.$router.push({ name:'keepTwoC1',params: { id: 1 }})
this.$router.push({ name:'keepTwoC1',query: { id: 1 }})
this.$router.push({ path: "keepTwoC1",query: { id: 1 } });
//提供path时params是无效的。
- this.$router.replace() (用法同上,push)
- this.$router.go(n) ()
//向前或者向后跳转n个页面，n可为正整数或负整数
this.$router.go(n)
/*this.$router.push跳转到指定url路径，并在history栈中添加一个记录，点击后退会返回到上一个页面。
this.$router.replace跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面)。
this.$router.go(n)向前或者向后跳转n个页面，n可为正整数或负整数。*/
