1. props其他
"""
安装依赖(在打开别的vue文件时,肯能不会有node_modules目录,需要在根路径下执行):
cnpm install
"""
做成纯净的vue项目
-在router 的index.js 中删除about的路由
-删除所有小组件和about页面组件
-App.vue 只留
<template>
<div id="app">
<router-view/>
</div>
</template>
props自定义属性作用:自定义属性,接收父组件的数据
用法一:
HomeView.vue:
<template>
<div class="home">
<h1>props其他使用</h1>
<hr>
<Hello :myname="name"></Hello> <!--自定义属性,让后端能拿到数据-->
<hr>
</div>
</template>
<script>
import Hello from '@/components/Hello.vue'
export default {
name:'HomeView',
data(){
return {
name:'max' // vue中data中数据要return出去
}
},
components:{
Hello
}
}
</script>
Hello.Vue:
<template>
<div class="hello">
<button>后退</button>
<div>{{myname}}</div>
<button>前进</button>
</div>
</template>
<script>
export default {
name: "Hello",
props:['myname'] // 拿到父组件数据
}
</script>
<style scoped>
</style>
用法二:也可以通过字典的形式指定子组件收到数据的数据类型:
HelloView.vue:
<template>
<div class="hello">
<button>后退</button>
<div>{{myname}}</div>
<button>前进</button>
</div>
</template>
<script>
export default {
name: "Hello",
props:{myname:String}
}
</script>
用法三:如果不传会默认传default对应的值
props: {
myname: {
type: String, //类型
required: true, //必要性
default: '老王' //默认值
}
}
}
2.混入mixin
作用:把多个组件共用的配置兔子成一个混入对象,在组件中也能够使用其他组件的属性和方法
步骤:
1.定义混入对象,新建mixin报,下新建index.js
2.在index.js中写代码(组件中对用到的属性和方法)
mixin/index.js:(提供一些数据和方法,在其他组件中也能正常使用)
export const index1={
data(){
return {
age:19
}
},
methods:{
handAlert(){
alert('111')
}
},
mounted() {
console.log('页面正在执行')
}
}
router/index.js:(可访问的组件需要要添加路由)
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
},
{
path:'/index',
name:'index',
component:index
}
]
views.vue:(引入其他组件,使用其他组件中的属性和方法)
<template>
<div class="home">
<h1>混入的使用</h1>
<button @click="handAlert">点击</button>
{{age}} // 该组件中没有age属性,但是可以使用index组件中的
</div>
</template>
<script>
import {index1} from '@/mixin'
export default {
name:'HomeView',
data(){
return {
name:'彭于晏'
}
},
mixins:[index1]
}
</script>
<style scoped>
</style>
3.插件(功能和混入相同)
功能:用于增强Vue,
本质:包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据
使用步骤:
1.新建plugin包
2.在main.js中配置
应用一:固定代码放在插件中,统一调用
plugins/index.vue:(自定义指定在任意地方都可以使用)
export default {
install(vue){
console.log('插件执行了',vue)
}
}
main.js:
import plugin from '@/plugins'
Vue.use(plugin)
应用二:在插件中定义全局变量,定义全局变量需要借助Vue.prototype:
plugins/index.vue:(使用axios之前需要在pycharm终端下载)
import Vue from "vue";
import axios from "axios";
export default {
install(vue) {
Vue.prototype.$hobby = 'soccer'
Vue.prototype.$add = (a, b) => {
return a + b
}
Vue.prototype.$ajax=axios
}
}
views/index.vue:
<template>
<div class="home">
<h1>混入的使用</h1>
<button @click="handAlert">点击</button>
{{ age }}
<h1>插件定义全局变量</h1>
<button @click="handClick">点击发送ajax请求</button>
<button @click="getHobby">点击拿兴趣爱好</button>
</div>
</template>
<script>
import {index1} from '@/mixin'
import plugin from '@/plugins'
import Vue from "vue";
Vue.use(plugin)
export default {
name: 'HomeView',
data() {
return {
name: '彭于晏',
}
},
methods: {
handClick() {
this.$ajax('sss').then(res => {
console.log(res)
})
},
getHobby(){
console.log(this.$hobby)
}
},
mixins: [index1]
}
</script>
<style scoped>
</style>
4.elementui使用(重点)
1.在vue上,css样式,用的最多的是elementui,但是还有其他的
elementui:做网页端 样式用的多 vue2的 饿了吗团队开发的
elementui-plus:第三方团队继续基于vue3写的
vant:做app的样式
iview:pc端用www.iviewui.com
2.elementui的使用:
官网:https://element.eleme.cn/#/zh-CN/component/layout
1 安装
cnpm i element-ui -S
2 配置完整引入 在 main.js 中写入以下内容
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI) // 以后在咱们组件中直接使用elementui提供的全局组件即可
3 在组件中使用
-去官网看到好的,复制贴到你的项目中
5.vue Router
作用:第三方插件,用来实现SPA 的vue插件(路由控制)
1.创建vue项目时加入了,直接用即可.
2.配置路由跳转:只需要在routes数组中写对象即可
import index from '@/views/index.vue'
import VueRouter from 'vue-router'
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path:'/index',
name:'index', // 别名,反向解析用
component:index // 之前一定要先写index组件
}
]
6.页面跳转的两种方式
方式一:用js控制跳转
router/index.js:
import Vue from 'vue'
import HomeView from '../views/HomeView.vue'
import index from '@/views/index.vue'
import VueRouter from 'vue-router'
import login from "@/views/Login.vue";
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path:'/index',
name:'index',
component:index
},
{
path: '/login',
name:'login',
component: login
}
]
views/Login.vue:
<template>
<h1>登陆页面</h1>
</template>
<script>
export default {
name: "Login"
}
</script>
<style scoped>
</style>
views/index.vue:
<template>
<div class="home">
<el-row>
<el-button @click="handClick">默认按钮</el-button>
</el-row>
</div>
</template>
<script>
export default {
name:'index',
data(){
return {}
},
methods:{
handClick(){
this.$router.push('/login')
}
}
}
</script>
"""
this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
this.$router.back(): 请求(返回)上一个记录路由
this.$router.go(-1): 请求(返回)上一个记录路由
this.$router.go(1): 请求下一个记录路由
"""
方式二:在页面中利用<router-link>路由跳转:
<router-link to="/home">
<el-button>跳转home按钮</el-button>
</router-link>
7.路由跳转携带数据的两种方式
方式1:/course/?pk=1形式:
我们通过打印:
console.log('route',this.$route)
console.log('router',this.$router)
得到:
route是当前路径对象:{name: 'login', meta: {…}, path: '/login/', hash: '', query: {…}, …},我们在地址栏中携带的信息就在route中的query中
router是路由对象:VueRouter {app: Vue, apps: Array(1), options: {…}, beforeHooks: Array(0), resolveHooks: Array(0), …}
所以想通过地址栏携带信息需要通过:
this.$route.query.pk(route前面要加$)
方式2:/course/2形式:
如果选用这种路由方式我们需要在router/index.js中加入一个路由:
router/index.js:
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/login',
name:'login',
component: login
},
{
path: '/login/:pk',
name:'login',
component: login
}
]
通过打印console.log(this.$route)得知:信息在params中:
所以我们在取数据时需要从:this.$route.params.pk中取
8.localStorge系列
localStorge、sessionStorge、cookie都是在浏览器中存在数据的,它们有什么区别?
1.localStorage
-永久存储,除非清空缓存,手动删除,代码删除
-localStorage.setItem('userinfo', JSON.stringify(this.userInfo))
-localStorage.getItem('userinfo')
-localStorage.clear() // 清空全部
-localStorage.removeItem('userinfo')
2.sessionStorage
-关闭浏览器,自动清理
-sessionStorage.setItem('userinfo', JSON.stringify(this.userInfo))
-sessionStorage.getItem('userinfo')
-sessionStorage.clear() // 清空全部
-sessionStorage.removeItem('userinfo')
3.cookie
-有过期时间,到过期时间自动清理
-借助于第三方 vue-cookies
-cookies.set('userinfo', JSON.stringify(this.userInfo))
-cookies.get('userinfo')
-cookies.delete('userinfo')
9.vuex
在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信
# 使用步骤
1 安装,新建store/index.js
2 在index.js 中写
export default new Vuex.Store({
state: {
# 放数据
},
mutations: {
# 放方法,正常是让actions中来调用
# 组件也可以直接调用
},
actions: {
# 放方法,正常组件调用
}
})
3 在组件中
-显示state的变量
html中:
{{$store.state.变量名}}
js中:
this.$store.state.变量面
改state中的值
-推荐按正常步骤---》this.$store.dispatch('actions中的方法',参数)---》actions中的方法调用 context.commit('mutations',参数)---》在mutations中直接修改state的值
-可以跨过任何一步
this.$store.commit()
this.$store.state.变量名
标签:index,插件,vue,name,Vue,跳转,组件,import
From: https://www.cnblogs.com/ERROR404Notfound/p/17142689.html