AyayaOVO的博客

**解决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执行策略更改执行策略可帮助你防止执行不信

使用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"

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

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:

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

1、vuex是什么？vuex是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。chrome安装调试工具 devtools extension2、单向数据流State：驱动应用的数据源（单向数据流）View：以声明方式将 state 映射到视图（静态显示出来的数据源）Actions：处理用户在view上面操作而导致的状态变化（数据源变化追踪）一个简单的demo案例：<template>

1、路由正常模式：// 1、先引入页面组件import Home from '@/components/Home'// 2、使用组件 { path: '/home', component: Home}2、懒加载模式大项目中，为了提高初始化页面的效率，路由一般使用懒加载模式，一共三种实现方式。（1）第一种写法：component: (resolve) => require(['@/components/One'], resolve)（2）第

路由钩子，即导航钩子，其实就是路由拦截器vue-router一共有三类：全局钩子：最常用路由单独钩子组件内钩子1、全局钩子在src/router/index.js中使用，代码如下：// 定义路由配置const router = new VueRouter({ ... })// 全局路由拦截-进入页面前执行router.beforeEach((to, from, next) => { // 这里可以加入全局登陆判断 // 继续执行 next();});

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友好的提示页面

1、代码示例（1）在标签的外部添加标签，标签还需要一个name属性，代码如下：<transition name="fade" mode="out-in"> <router-view /></transition>（2）加入CSS，一共4个CSS类名，四个类名与transition的name属性有关，比如name=”fade”，相应的css如下：/*页面切换动画*//*进入过渡的结束状态，元素被插入时就生效，在过渡过程完成后移除*/.fade-en

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'}"&gt

1、通过 标签中的to传参基本语法：valueStringPS：上面to前边是带冒号，后边跟的是一个对象形势的字符串name：在路由配置文件中起的name值。叫做命名路由，下一节会讲到。params：要传的参数，它是对象形式，在对象里可以传递多个值。具体实例如下：（1）在src/components/Home.vue里面导航中添加如下代码：<router-link :to="{name: 'one', params:{username:'test123'}}">子页面1</

定义：子路由，也叫路由嵌套，采用在children后跟路由数组来实现，数组里和其他配置路由基本相同，需要配置path和component，然后在相应部分添加来展现子页面信息，相当于嵌入iframe。1、src/components/Home.vue（父页面）<template> <div class="hello"> <h1>{{ msg }}</h1> <!-- 添加子路由导航 -->

一、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>

如下代码：export default new Router({ mode: 'history', //路由模式，取值为history与hash base: '/', //打包路径，默认为/，可以修改 routes: [ { path: string, //路径 ccomponent: Component; //页面组件 name: string; // 命名路由-路由名称 components: { [nam

一、简单介绍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

一、总体框架一个vue-cli的项目结构如下，其中src文件夹是需要掌握，其余了解即可。文件夹目录如下：每个文件夹目录详细说明如下：二、配置目录文件讲解1、build目录（webpack配置）2、config目录（vue项目配置目录）config文件主要是项目相关配置，常用的就是当端口冲突时配置监听端口，打包输出路径及命名等，目录详情如下：3、node_modules（项目依赖包）node_modules里面是项目依赖包，其中包括很多基础依赖，自己也可以根据需要安装其他依赖。安装方法

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的模板，不包含其他功能，让

首先安装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是大写...

1、单个slot单个插槽，别名默认插槽、匿名插槽，不用设置name属性<div id="app"> <children1> <span>12345</span> </children1></div><script type="text/javascript"> var app = new Vue({ el: '#app', components

1、选项模板<div id="app"></div><script type="text/javascript"> // 实例化 new Vue({ el: '#app', data: { message: 'hello' }, template:`<h1 style="color:red">我是选项模板</h1>` });&l

1、组件注册（1）全局注册// scriptVue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">全局组件显示： {{ count }}</button>'});new Vue({ el: '#app'})

1、调试步骤（1）chrome打开控制器查看（2）控制台输入“app.num=’通过控制台设置的新name’”（3）点击解绑按钮2、参数说明el：指令所绑定的元素，可以用来直接操作DOMbinding： 一个对象，包含指令的很多信息vnode:：Vue编译生成的虚拟节点3、生命周期自定义指令有五个生命周期（也叫钩子函数），分别是bind、inserted、update、componentUpdated、unbind，说明如下：bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函

vue有实例属性，实例方法，实例事件，前两个跟选项类似，不是很常用。1、$on（在构造器外部添加事件）$on接收两个参数，第一个参数是调用时的事件名称，第二个参数是一个匿名方法app.$on('reduce',function(){ console.log('执行了reduce()'); this.count--;});2、$once（执行一次的事件）app.$once('reduceOnce',function(){ console.log('只执行一次的方法');

1、computed计算属性：主要是对原数据进行改造输出。改造输出：包括格式化数据（价格，日期），大小写转换，排序，添加符号computed: { newPrice () { return '￥' + this.price + '元'; }}2、methods方法属性：用于绑定html中的事件对应的方法methods:{ add (num) { this.count += num; }}3、watch数据变化监听器：主要用

1. 意义beforeCreate 在实例初始化之后，数据观测和事件配置之前被调用created 在实例创建完成后被立即调用，完成数据观测，属性和方法的运算，初始化事件，$el属性未见beforeMount 在挂载开始之前被调用：相关的 render 函数首次被调用，只在虚拟DOM生成HTMLmounted 在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html

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'">

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"> &lt