![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue全家桶
AyayaOVO
Programmers一起努力吧!Fighting!
展开
-
解决webpack : 无法加载文件
**解决webpack : 无法加载文件C:\Users\Administrator\AppData\Roaming\npm\webpack.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。**PS F:\MY xiangmu> set-ExecutionPolicy RemoteSigned执行策略更改执行策略可帮助你防止执行不信原创 2021-10-22 21:52:18 · 512 阅读 · 0 评论 -
vue脚手架的创建
使用vue-cli创建模板项目什么是vue-cli 是vue官方提供的脚手架工具。 脚手架工具简单讲就是自动将项目需要的环境、依赖等信息都配置好。全局安装vue-cli(1)检查npm 版本,建议安装到最新版本。 node -v npm -v (是否升级npm) npm install -g npm (是否修改淘宝镜像) npm config set registry "https://registry.npm.taobao.org"原创 2021-05-21 17:49:08 · 248 阅读 · 0 评论 -
vuex的mutations-getters-actions异步
1、mutations(修改状态)(1)template中直接使用$store.commit( )触发// template<button @click="$store.commit('ADD')">+</button>// src/vuex/store.jsconst mutations = { // 状态变更函数 ADD (state) { state.count++; }}(2)利用mapMutations引入触发&l原创 2020-07-17 13:23:56 · 436 阅读 · 0 评论 -
vuex的state-状态对象的获取方法
1、在组件的template中直接使用<h2>{{ $store.state.count }}</h2>2、在计算属性computed中直接赋值// 方式1:直接获取computed: { count() { // this指的是main.js中的vue实例对象 return this.$store.state.count; }}3、通过mapState的对象来赋值// 方式2:利用mapStatecomputed:原创 2020-07-12 01:57:18 · 953 阅读 · 0 评论 -
vuex的简单使用
1、安装npm install vuex --save2、简单示例(1)src/vuex/store.js中写入以下代码:// 引入vueimport Vue from 'vue'// 引入vueximport Vuex from 'vuex'// 使用vuexVue.use(Vuex)// 1、state:创建初始化状态const state = { // 放置初始状态 count: 1}// 2、mutations:创建改变状态的方法con原创 2020-07-11 20:46:28 · 186 阅读 · 0 评论 -
什么是vuex
1、vuex是什么?vuex是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。chrome安装调试工具 devtools extension2、单向数据流State:驱动应用的数据源(单向数据流)View:以声明方式将 state 映射到视图(静态显示出来的数据源)Actions:处理用户在view上面操作而导致的状态变化(数据源变化追踪)一个简单的demo案例:<template>原创 2020-07-07 21:39:53 · 363 阅读 · 0 评论 -
vue-router懒加载
1、路由正常模式:// 1、先引入页面组件import Home from '@/components/Home'// 2、使用组件 { path: '/home', component: Home}2、懒加载模式大项目中,为了提高初始化页面的效率,路由一般使用懒加载模式,一共三种实现方式。(1)第一种写法:component: (resolve) => require(['@/components/One'], resolve)(2)第原创 2020-07-07 21:35:17 · 115 阅读 · 0 评论 -
vue-router的路由钩子
路由钩子,即导航钩子,其实就是路由拦截器vue-router一共有三类:全局钩子:最常用路由单独钩子组件内钩子1、全局钩子在src/router/index.js中使用,代码如下:// 定义路由配置const router = new VueRouter({ ... })// 全局路由拦截-进入页面前执行router.beforeEach((to, from, next) => { // 这里可以加入全局登陆判断 // 继续执行 next();});原创 2020-07-06 08:30:46 · 247 阅读 · 0 评论 -
vue-router的mode模式和404
1、mode模式代码示例:export default new Router({ mode: 'history', //mode模式 routes: [...]})mode取值说明:(1)histroy:URL就像正常的 url,示例:http://localhost:8080/home(2)hash:默认值,会多一个“#”,示例:http://localhost:8080/#/home2、404页面设置如果访问的路由不存在,或者用户输入错误时,会有一个404友好的提示页面原创 2020-07-06 08:28:16 · 554 阅读 · 0 评论 -
vue-router过渡动画
1、代码示例(1)在标签的外部添加标签,标签还需要一个name属性,代码如下:<transition name="fade" mode="out-in"> <router-view /></transition>(2)加入CSS,一共4个CSS类名,四个类名与transition的name属性有关,比如name=”fade”,相应的css如下:/*页面切换动画*//*进入过渡的结束状态,元素被插入时就生效,在过渡过程完成后移除*/.fade-en原创 2020-07-05 21:37:45 · 869 阅读 · 0 评论 -
vue-router命名路由-命名视图-重定向-别名
1、命名路由给一个路由命一个唯一的名称,然后跳转调用这个名称即可。(1)在src/router/index.js中加一个带name的路由,代码如下:{ path: 'one', // 子页面1 name: 'one', // 路由名称-命名路由 component: One // 页面组件}(2)在src/component/Home.vue页面中调用,代码如下:// template跳转调用<router-link :to="{name: 'one'}">原创 2020-07-03 18:39:18 · 526 阅读 · 0 评论 -
vue-router路由传递参数
1、通过 标签中的to传参基本语法:valueStringPS:上面to前边是带冒号,后边跟的是一个对象形势的字符串name:在路由配置文件中起的name值。叫做命名路由,下一节会讲到。params:要传的参数,它是对象形式,在对象里可以传递多个值。具体实例如下:(1)在src/components/Home.vue里面导航中添加如下代码:<router-link :to="{name: 'one', params:{username:'test123'}}">子页面1</原创 2020-07-03 18:36:20 · 426 阅读 · 0 评论 -
vue-router子路由-路由嵌套
定义:子路由,也叫路由嵌套,采用在children后跟路由数组来实现,数组里和其他配置路由基本相同,需要配置path和component,然后在相应部分添加来展现子页面信息,相当于嵌入iframe。1、src/components/Home.vue(父页面)<template> <div class="hello"> <h1>{{ msg }}</h1> <!-- 添加子路由导航 -->原创 2020-07-03 18:31:34 · 3619 阅读 · 0 评论 -
vue-router页面跳转
一、router-link标签跳转在html标签内使用router-link跳转,相应于超链接a标签,使用方式如下:<router-link to="/">[显示字段]</router-link>to:导航路径使用示例如下:<p>导航 : <router-link to="/">首页</router-link> <router-link to="/hello">hello</router-link>原创 2020-06-27 18:52:59 · 531 阅读 · 1 评论 -
vue-router路由属性配置说明
如下代码:export default new Router({ mode: 'history', //路由模式,取值为history与hash base: '/', //打包路径,默认为/,可以修改 routes: [ { path: string, //路径 ccomponent: Component; //页面组件 name: string; // 命名路由-路由名称 components: { [nam原创 2020-06-27 18:50:31 · 1780 阅读 · 1 评论 -
vue-router快速入门
一、简单介绍vue-router是vue官方的路由解决方案,简单易用,中文官方地址如下:vue-router中文手册二、安装vue-router是一个插件包,需要用npm来进行安装的。如果采用vue-cli构建初始化项目会提示安装,也可以自己使用命令安装:npm install vue-router --save三、解读核心文件用vue-cli构建项目之后,在src/router/index.js文件中,看到以下的路由核心文件:// 引入vue框架import Vue from 'vue原创 2020-06-27 18:47:20 · 197 阅读 · 1 评论 -
VUE-CLI项目结构
一、总体框架一个vue-cli的项目结构如下,其中src文件夹是需要掌握,其余了解即可。文件夹目录如下:每个文件夹目录详细说明如下:二、配置目录文件讲解1、build目录(webpack配置)2、config目录(vue项目配置目录)config文件主要是项目相关配置,常用的就是当端口冲突时配置监听端口,打包输出路径及命名等,目录详情如下:3、node_modules(项目依赖包)node_modules里面是项目依赖包,其中包括很多基础依赖,自己也可以根据需要安装其他依赖。安装方法原创 2020-06-26 08:42:26 · 1650 阅读 · 1 评论 -
VUE-CLI初始化项目
1、vue init命令讲解用vue init命令来初始化项目,具体使用方法如下:vue init <template-name> <project-name>init:表示要用vue-cli来初始化项目:表示模板名称,vue-cli官方提供的5种模板:webpack:一个全面的webpack+vue-loader的模板,功能包括热加载,linting,检测和CSS扩展。webpack-simple:一个简单webpack+vue-loader的模板,不包含其他功能,让原创 2020-06-26 08:32:03 · 920 阅读 · 1 评论 -
VUE-CLI的安装
首先安装vue-cli的前提是你已经安装了npm,在命令行工具中输入npm -v 命令来检测npm的安装以及版本情况。1、npm安装node下载地址: http://nodejs.cn/download/安装成功提示:npm -v3.10.52、vue-cli安装全局安装vue-cli,命令行:npm install vue-cli -gPS:-g代表全局安装,然后查看版本:vue -V2.9.6PS: 注意这里的V是大写...原创 2020-06-26 08:27:01 · 193 阅读 · 1 评论 -
VUE插槽slot
1、单个slot单个插槽,别名默认插槽、匿名插槽,不用设置name属性<div id="app"> <children1> <span>12345</span> </children1></div><script type="text/javascript"> var app = new Vue({ el: '#app', components原创 2020-06-25 05:52:38 · 208 阅读 · 1 评论 -
VUE制作模板
1、选项模板<div id="app"></div><script type="text/javascript"> // 实例化 new Vue({ el: '#app', data: { message: 'hello' }, template:`<h1 style="color:red">我是选项模板</h1>` });&l原创 2020-06-25 05:49:03 · 299 阅读 · 1 评论 -
VUE组件基础
1、组件注册(1)全局注册// scriptVue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">全局组件显示: {{ count }}</button>'});new Vue({ el: '#app'})原创 2020-06-25 05:45:27 · 190 阅读 · 1 评论 -
VUE自定义指令
1、调试步骤(1)chrome打开控制器查看(2)控制台输入“app.num=’通过控制台设置的新name’”(3)点击解绑按钮2、参数说明el:指令所绑定的元素,可以用来直接操作DOMbinding: 一个对象,包含指令的很多信息vnode::Vue编译生成的虚拟节点3、生命周期自定义指令有五个生命周期(也叫钩子函数),分别是bind、inserted、update、componentUpdated、unbind,说明如下:bind:只调用一次,指令第一次绑定到元素时调用,用这个钩子函原创 2020-06-24 23:32:46 · 221 阅读 · 1 评论 -
VUE实例事件
vue有实例属性,实例方法,实例事件,前两个跟选项类似,不是很常用。1、$on(在构造器外部添加事件)$on接收两个参数,第一个参数是调用时的事件名称,第二个参数是一个匿名方法app.$on('reduce',function(){ console.log('执行了reduce()'); this.count--;});2、$once(执行一次的事件)app.$once('reduceOnce',function(){ console.log('只执行一次的方法');原创 2020-06-24 07:56:03 · 199 阅读 · 1 评论 -
VUE常用选项
1、computed计算属性:主要是对原数据进行改造输出。改造输出:包括格式化数据(价格,日期),大小写转换,排序,添加符号computed: { newPrice () { return '¥' + this.price + '元'; }}2、methods方法属性:用于绑定html中的事件对应的方法methods:{ add (num) { this.count += num; }}3、watch数据变化监听器:主要用原创 2020-06-24 07:52:06 · 196 阅读 · 1 评论 -
vue生命周期
1. 意义beforeCreate 在实例初始化之后,数据观测和事件配置之前被调用created 在实例创建完成后被立即调用,完成数据观测,属性和方法的运算,初始化事件,$el属性未见beforeMount 在挂载开始之前被调用:相关的 render 函数首次被调用,只在虚拟DOM生成HTMLmounted 在el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用。实例已完成以下的配置:用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html原创 2020-06-23 15:53:08 · 178 阅读 · 1 评论 -
vue内部指令
1、v-if 、v-else、 v-show、v-else-if这几个条件指令用于显示与隐藏各类元素,使用方式如下:(1)v-if<div v-if="isLogin">你好</div>(2)v-else<div v-else>请登录后操作</div>(3)v-show<div v-show="isLogin">你好</div>(4)v-else-if<div v-if="type === 'A'">原创 2020-06-23 15:09:57 · 202 阅读 · 1 评论 -
vue入门
1,安装CDN导入<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>NPM安装npm install vueHELLO WORLD<!--第一步:创建文件夹及html文件--><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <原创 2020-06-23 15:03:42 · 148 阅读 · 1 评论