vue
vue.js
阿越丶
也许你觉得自己的工作枯燥烦恼,但在别人看来,也许会很有意思;更好一点的,你会在向一个对你的行业一窍不通的人解释一些看似无需解释的东西,有时也会很有趣。
展开
-
vue生命周期
生命周期一、vue的生命周期是什么?二、官网给的vue生命周期的图片提示:以下是本篇文章正文内容,下面案例可供参考一、vue的生命周期是什么?vue生命周期是指vue实例对象从创建之初到销毁的过程,vue所有功能的实现都是围绕其生命周期进行的,在生命周期的不同阶段调用对应的钩子函数实现组件数据管理和DOM渲染两大重要功能。二、官网给的vue生命周期的图片vue生命周期可以分为八个阶段,分别是:beforeCreate(创建前),created(创建后),beforeMount(载入前)原创 2020-10-20 09:14:32 · 157 阅读 · 0 评论 -
Vue路由守卫
Vue路由守卫全局守卫代码:main.js页面:to是要去的页面,from是要离开的,next是个函数,否则就展示哪个页面 const auth = { isLogin () { return false } }// 全局守卫router.beforeEach((to, from, next) => { // console.log(to) if (to.path === '/more') { console.log('盘查') if (au原创 2020-10-20 08:59:36 · 951 阅读 · 1 评论 -
Vuex的mapState
Vuex的mapStatestore.js state: { // 自定义共享状态 istabbarshow: true, },在某个页面调用的时候可以直接调用 即{{ this.$store.state.istabbarshow}} 但是要是想要数据很多的话这样就比较麻烦了使用computed 计算属性 computed: { isshow () { return this.$store.state.istabbarshow } }原创 2020-08-27 18:16:22 · 190 阅读 · 0 评论 -
this.$router.push() 的用法
1、作用:this.$router.push() 可以通过修改url实现路由跳转。2、push 后面可以是对象,也可以是字符串:// 字符串this.$router.push('/home/first')// 对象this.$router.push({ path: '/home/first' })// 命名的路由this.$router.push({ name: 'home', params: { myid: id }}).Params由于动态路由也是传递params的,所以在 this原创 2020-08-24 13:47:45 · 11380 阅读 · 0 评论 -
vue二级路由的配置
二级路由的配置在router中配置路由import Vue from 'vue'import VueRouter from 'vue-router'// @ 指向src 用./容易混import Comingsoon from '@/views/Film/Comingsoon'import Nowplaying from '@/views/Film/Nowplaying'import Mess from '@/views/Mess'import Person from '@/views/P原创 2020-08-24 10:42:10 · 740 阅读 · 0 评论 -
vue路由声明式导航
声明式导航使用前请先配置好路由,上一节在components下面新建一个Tabbar组件<template> <div class="box"> <ul> <!-- 声明士导航 --> <router-link to='/mess' tag='li' activeClass="mycolor"> mess</router-link>原创 2020-08-24 09:48:44 · 230 阅读 · 0 评论 -
vue的一级路由配置
vue的一级路由配置router的路由配置:import Vue from 'vue'import VueRouter from 'vue-router'// @ 指向src 用./容易混import Mess from '@/views/Mess'import Person from '@/views/Person'import More from '@/views/More'Vue.use(VueRouter)/* const auth = { isLogin () { .原创 2020-08-24 09:06:46 · 389 阅读 · 0 评论 -
vue配置反向代理解决跨域问题
配置反向代理解决跨域问题反向代理用来解决前端跨域问题,设置很简单,在 vue-cli 项目的 config 文件夹 index.js 文件下进行如下设置即可:module.exports = { devServer: { proxy: { '/ajax': { target: 'https://m.maoyan.com', // 跨域地址 // ws: true, changeOrigin: true // 是否跨域 }原创 2020-08-23 16:28:06 · 845 阅读 · 0 评论 -
vue的多个单文件组件
vue的多个单文件组件一、多个单文件组件一、多个单文件组件多个组件可以在一起使用,它们的关系可以是:平行的、嵌套包含的目标:应用两个组件,它们是彼此平行的关系使用:把组件用import引入、用conmponent注册。1、注册后引用(全局定义方式):<script>import navbar from './components/Navbar'import sidebar from './components/Sidebar'//全局组件//模块化import Vue .原创 2020-08-22 13:34:47 · 362 阅读 · 0 评论 -
vue单文件组件
vue单文件组件一、单文件组件介绍二、结构组成一、单文件组件介绍vue中的单文件组件是以.vue扩展名结尾的文件,在这个文件中封装了html、js、css的代码,它自身是一个独立的组件,所以成为单文件组件二、结构组成<template> <div>html代码</div></template><script>export default {js代码}</script><style lang="s.原创 2020-08-22 13:11:15 · 137 阅读 · 0 评论 -
vue脚手架安装
vue脚手架安装vue脚手架安装及vue脚手架创建项目(详细步骤)首先,我们要先到nodejs官网下载与电脑适配的nodejs文件到电脑上并安装脚手架:(3)如何:安装脚手架的工具命令:npm i -g @vue/cli 电脑安装完命令后 : 直接创建 vue create 文件夹名字用命令反复创建脚手架:cd 要保存项目的文件夹完整路径比如: cd C:\xampp\htdocs\dd\6_VUE\day04用vue命令工具,创建一个项目的脚手架代码原创 2020-08-21 09:25:42 · 341 阅读 · 0 评论 -
Vue.js之入门教程
Vue.js学习笔记一. Vue.js是什么?1.Vue.js 特点2.Vue.js 安装二. 1.创建第一个 Vue 应用2.绑定元素特性3.v-html4.v-if与v-show的区别一. Vue.js是什么?Vue.js是一套构建用户界面(view)的MVVM框架。Vue.js的核心库只关注视图层,并且非常容易学习,非常容易与其他库或已有的项目整合。1.Vue.js 特点简洁: HTML 模板 + JSON 数据,再创建一个 Vue 实例,就这么简单。数据驱动: 自动追踪依赖的模板原创 2020-08-06 16:00:53 · 333 阅读 · 0 评论