白告王旋的前端开发笔记——vue笔记

vue笔记

删除node_modules

cnpm install rimraf -g

rimraf node_modules

$属性： $refs 获取组件内的元素

$parent：获取当前组件对象的父组件

$children：获取子组件

$root：获取new Vue的实例

$el：组件对象的DOM元素

过滤器

过滤器允许使用地方：

1. {{}}
2. v-bind

生命周期

• beforeCreate()

  $el == undefined	$data==undefined	msg==undefined
  

• created()

  $el==undefined	$data初始化	msg初始化	
  

• beforeMount()

  $el==undefined 虚拟DOM创建完成，未渲染	$data初始化	msg初始化	```
  

• mounted()

  dom渲染	$data初始化	msg初始化
  

• beforeUpdate()
• updated()
• beforeDestroy()
• destroyed()
• activated() // 在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就出发：可用于初始化页面数据等

使用axios

1.npm install axios

2.在需要使用的页面 import axios from ‘axios’

3.可以在main.js里自定义axios

import axios from 'axios'
Vue.prototype.$axios = axios
或Vue.prototype.$http = axios
axios.defaults.baseURL = 'http://xxxxx/xx'

4.使用

// get请求
this.$axios({
	method: 'get',
	url: 'http://xxxxxxxxx/goods',
    params: {
        pageIndex: 1,
        pageNum: 10
    }
}).then(res => {
	console.log(res)
}).catch(err => {
	console.log(err)
})
// post请求
this.$axios({
    method:'post',
    data:{
        id: 1,
        name: 'abc'
    }
}).then(res => {
    console.log(res)
}).catch(err => {
    console.log(err)
})

引入sass

<style lang="scss">

安装依赖

1.npm install node-sass --save -dev

2.npm install sass-loader@7.3.1 --save -dev 指定版本7.3.1 勿安装默认的版本 8

导航

在el-menu 标签里写入router
router：是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转

将el-menu-item标签的index值修改为path

Vuex

包含以下几个部分：

state，驱动应用的数据源；

view，以声明方式将state映射到视图；

actions，响应在view上的用户输入导致的状态变化。

单项数据流理念的简单示意图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o0wUb8CM-1590420642062)(C:\Users\70392\AppData\Roaming\Typora\typora-user-images\1578457216900.png)]

State 数据源

Mutation 改变状态

Action类似于mutation，不同在于：

​ Action提交的是mutation，而不是直接变更状态

​ Action可以包含任意异步操作

安装：

cnpm install vuex --save

引用： store文件夹——》index.js

import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex)
const store = new vuex.Store({
    state: {	//数据源
        flag: 100
    },
    mutations: {	//改变状态
        add(state) {
            state.flag ++ 
        }
    }
})
//导出store对象
export default store;

//main.js
import store from './store/index'

//任何页面都可直接使用，无需引用
{{$store.state.flag}}	// 100

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eP1SiZkc-1590420642064)(C:\Users\70392\AppData\Roaming\Typora\typora-user-images\1578477474709.png)]

改变状态

<button @click="$store.commit(状态,参数)"> 改变state </button>

mutations: {
    add(state) {	//状态名：add
    	state.flag ++ 
    }
}

管理mutations

<button @click="$store.dispatch('add')"> 改变state </button>

actions: {
	//	写法一
	add(context){	//context与$store对象拥有相同的对象和方法
		context.commit('add')
		//	可写逻辑
	}
	//	写法二
	add({commit}){
		commit('add')
	}
}

辅助函数

mapState

mapGetters

mapActions

//Mine.vue
<h1>{{isEvenOrOdd}}</h1>
<button @click="add"> 改变state </button>

getters : {	//计算属性
	isEvenOrOdd(state){
		return state.num % 2 == 0 ? '偶数' : '奇数'
	},
    num(state){
        return state.num
    }
}


import {mapState, mapGetters, mapActions} from 'vuex' //辅助函数

computed: {
    ...mapState({	//直接获取store中的状态值
        num: state => state.num
    }),
    ...mapGetters(['isEvenOrOdd','num'])
},
methods: {
    ...mapActions(['add'])
}

vue+webpack+express

1.在vue.config.js中添加 publicPath: ‘./’, 在router文件夹下的index.js里修改mode: ‘hash’,

2.在vue项目里运行 npm run build 打包文件

3.安装express本地服务器

cnpm install -g express-generator

4.创建本地服务器（应用）

express myProject
cd myProject
npm i

将dist文件夹下的内容粘贴至myProject下的public文件夹中

5.运行vue打包项目

npm start
在浏览器中输入 http://localhost:3000

Vue路由跳转

vue路由跳转有四种方式

• router-link

<router-link :to="{name:'home'}">
<router-link :to="{path:'/home'}">	//	path带'/'表示从根路径开始，不带则表示从当前路径

<router-link :to="{name:'home',params:{id:1}}">
// params传参数 (类似post)
// 路由配置 path: "/home/:id" 或者 path: "/home:id" 
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留

<router-link :to="{name:'home',query:{id:1}}">
// query传参数 (类似get,url后面会显示参数)
// 路由可不配置

• this.$router.push() (函数里面调用)
• this.$router.replace() (用法同push)
• this.$router.go(n)

// params传参数 (类似post)
// 路由配置 path: “/home/:id” 或者 path: “/home:id”
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留

<router-link :to="{name:'home',query:{id:1}}">
// query传参数 (类似get,url后面会显示参数)
// 路由可不配置

+ this.$router.push() (函数里面调用)
+ this.$router.replace() (用法同push)
+ this.$router.go(n)