vue中如何声明组件
<template id="son">
<div>
111111
</div>
</template>
Vue.component("son",{
template:#son"
})
vue中如何父组件给子组件传值
在子组件props中接收
<div id='app'>
<father formapp="来自app传值" ></father>
</div>
Vue.component("father", {
template: "#father",
data() {
return {
msg:'hello'
}
},
// 接受父组件传值
props:{
// formapp:[String,Number],
formapp:{
type:[String,Number],
default:'fromappfather'
},
},
created() {
console.log(this.formapp);
},
})
vue中如何子组件给父组件传值
<template id="father">
<div>
子传父:{{fromsondata}}
<br>
<son @myson="fromson"></son>
</div>
</template>
Vue.component("father", {
template: "#father",
data() {
return {
msg:'hello',
fromsondata:""
}
},
methods:{
// data就是子组件传的值
fromson(data){
console.log(data);
this.fromsondata = data
}
}
})
Vue.component("son", {
template: "#son",
data() {
return {
}
},
created() {
// 触发子传父 this.$emit( ‘自定义事件’,传递参数)
// this.$emit('myson','这是来自子组件的参数')
},
methods:{
tofather(){
// 子传父
this.$emit('myson','这是来自子组件的参数')
}
},
})
vue中如何使用插槽,两种插槽的区别
插槽就是子组件中的提供给父组件使用的一个占位符,用<slot></slot> 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的<slot></slot>标签。
具名插槽 具名插槽其实就是给插槽取个名字。一个子组件可以放多个插槽,而且可以放在不同的地方,而父组件填充内容时,可以根据这个名字把内容填充到对应插槽中
<slot name=”header”></slot> <template v-slot:”header”><template>
前端路由和后端路由的区别
后端路由:不同的url对应服务器上相应的资源
前端路由:对于单页面,通过改边hash值来改变页面的切换
vue中如何使用路由
引入vue.router.js,放在vue.js后
创建vueRouter实例,new VueRouter
创建映射关系
将路由挂载到Vue实例上,和methods平级
展示<router-view></router-view>
路由跳转两种方式,声明式,函数式
<!-- 声明式跳转 -->
<router-link :to="{path:'/detail',query:{courseid:103,age:18}}">详情页</router-link>
<router-link :to="{name:'mine',params:{urseid:103}}">个人中心</router-link>
<!-- 函数式 -->
<button @click="todetail"> 页面跳转</button>
<button @click="todetail2"> 页面跳转2</button>
路由嵌套
const router = new VueRouter({
// 3.创建映射关系
routes: [
// 重定向
{
path: '/',
redirect: "/index"
},
{
// 路径
path: '/index',
// 对应组件
component: index,
// 嵌套
children: [
// 不加/ 注意,以 / 开头的嵌套路径将被视为根路径。这允许你利用组件嵌套,而不必使用嵌套的 URL。
{
path: "other",
component: other
}
]
},
{
path: "/detail",
component: detail
}
]
})
路由高亮
.router-link-active 默认样式
自定义 linkActiveClass 在new VueRouter实例中
路由重定向
// 重定向
{
path: '/',
redirect: "/index"
},
ref的使用
获取DOM,操作DOM
给DOM元素加ref=“自己起的名”
<div id="box" ref="refdiv"> haha</div>
this.$refs.refdiv.style.color = 'red'
获取组件,拿到组件上的数据和方法
<son id="son2" ref="son2"></son>
this.$refs.son2.log1()
son.component下methods:{
log1(){
console.log(1);
}
}
最早在mounted中 this.$refs.起的名
属性计算,属性监听
watch: {
// newVal: 当前最新值
// oldVal: 上一刻的值
变量名 (newVal, oldVal){
// 变量名对应值改变这里自动触发
}
}
watch: {
"firstname": function (newvalue,oldvalue) {
// console.log(newvalue);
// console.log(oldvalue);
this.name = this.firstname + this.lastname
},
"lastname": function (newvalue,oldvalue) {
this.name = this.firstname + this.lastname
}
},
Watch 监听,和methods平级
属性计算 不能和data里面数据冲突
// 计算属性中所依赖的任何一个 data 属性改变之后,都会重新触发 本计算属性 的重新计算,从而更新 fullName 的值
computed:{
name:{
get:function(){
return this.firstname + '-' + this.lastname
},
// 只有修改自身时会触发
set:function(value){
console.log(value);
this.firstname = value.split("-")[0]
this.lastname = value.split("-")[1]
}
}
}
vue-cli使用,如何创建和启动项目,项目文件结构
vuex状态刷新重置问题如何解决
什么是路由守卫,如何配置
主要用来通过跳转或取消的方式守卫导航。