vue2.0知识点，大致分为如下几部分：
vue常用指令及应用
父子组件
过滤器
获取DOM元素
vue-router
axios的使用
vuex的使用
一、vue常用指令及应用
v-text、v-html、v-if、v-show、v-model、v-bind, v-on
1.v-text：是元素的innerText 只能在双标签元素中使用
2.v-html：是元素的innerHTML 不能包含
3.v-if：元素是否移出或插入
4.v-show：元素是否隐藏或显示
5.v-model：双向数据绑定
6.v-bind：单向数据绑定（内存js改变影响页面，页面改变不影响内存js）
例如： v-bind:class=”xxx”
<div v-bind:class="isRed? 'red' : 'green'">单个class样式</div>
<ul>
<!-- 当stu.score = A 时 匹配red，当stu.score= B 时匹配green -->
<li v-for="stu in stus" :class="{'A': 'red', 'B': 'green'}[stu.score]"> {{ stu.name }}</li>
</ul>
- v-on: v-on:
事件名="表达式||函数名"
简写：@事件名="表达式||函数名"
<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
二、父子组件
- 父组件引用子组件：
父组件引用子组件，要先引入子组件，然后注册
// 引入子组件
import 子组件对象名 from './xxx.vue';
// 声明子组件
components: {
// 组件名(在模板中使用): 组件对象
}
全局组件在main.js中引用，vue.component('组件名',组件对象);
// 引入子组件对象
import headerVue from './components/header.vue';
import bodyVue from './components/body.vue';
import footerVue from './components/footer.vue';
// 声明为全局组件
Vue.component('headerVue', headerVue);
Vue.component('bodyVue', bodyVue);
Vue.component('footerVue', footerVue);
- 父子组件通讯：
父组件通过子组件标签属性将值传递，子组件使用该属性值需要使用props 声明。例如：在父组件pro.vue中引用子组件viewPcd，
父组件页面：
<template>
<div class="parent">
<view-pcd
@childFn="parentFn"
:obj="viewPcdFormObj"
></view-pcd>
</div>
</template>
<script>
import viewPcd from "./viewPcd.vue"
export default {
components: { viewPcd },
data() {
return {
viewPcdFormObj: {},
message: 'message父组件'
};
},
methods: {
parentFn() {
let payload = '测试Send'
this.message = payload;
}，
},
created() {
this.viewPcdFormObj = {
name: '张三',
value: '110'
}
},
};
</script>
<style lang="scss">
</style>
子组件使用该属性值需要使用props 声明，子组件页面：
<template>
<div class="parent">
<el-form >
<el-form-item class="cl_td" label="姓名" prop="name">
<el-input v-model="obj.name" type="text" />
</el-form-item>
<el-form-item class="cl_td" label="编号" prop="value">
<el-input v-model="obj.value" type="text" />
</el-form-item>
<button @click="click">Send</button>
</el-form>
</div>
</template>
<script>
export default {
name: 'ViewPcd',
props: {
obj: {
type: Object,
default: function() {
return {}
}
},
},
data() {
return {
message: 'message子组件',
};
},
methods: {
click() {
this.$emit('childFn', this.message);
},
},
};
</script>
三、过滤器
vue中没有提供默认过滤器，需要我们自定义过滤器
content | 过滤器
<template>
<div>
请输入内容：
<input type="text" name="name" v-model="name"/>
显示：{{ name | myFilter}}
</div>
</template>
<script>
export default {
// 自定义过滤器
filters: {
myFilter: function(value){
// 输入的内容翻转： 转换为数组->翻转数组 ->转换为字符串
return value.split('').reverse().join('');
}
},
data(){
return {
name:''
}
}
}
</script>
<style scoped></style>
全局过滤器，在main.js中
// 全局过滤器
Vue.filter('gobalFilter', function(value){
return value.split('').reverse().join('，');
});
四、获取DOM元素
- 在指定的元素上，添加ref=”名称”
- 在获取的地方加入 this.$refs.名称
<template>
<div>
<sub-vue ref="sub"></sub-vue>
<div ref="myDiv"></div>
</div>
</template>
<script>
import SubVue from './components/sub.vue';
export default {
data(){
return {
}
},
components: {
SubVue: SubVue
},
// 组件创建后，数据已经完成初始化，但DOM还未完成
created (){ // 事件的处理函数（created）
console.log(this.$refs.sub); // vue的组件对象
this.$refs.sub.$el.innerHTML = '哈哈'; // 获取vue组件对象对应的DOM对象
console.log(this.$refs.myDiv); // undefined 获取不到
},
// 数据装载到DOM上后，各种数据已经就位，将数据渲染到DOM上，DOM已经生产
mounted (){ // 事件的处理函数（created）
console.log(this.$refs.myDiv);// 获取的原生DOM对象
this.$refs.myDiv.innerHTML = '案发生的发生';
}
}
</script>
五、vue-router
1.下载 npm install vue-router -S
- 引入 impot Router from 'vue-router'
- 安装插件 Vue.use(Router)
- 创建路由对象并配置路由规则
<!-- 根据name跳转（推荐使用该方式）-->
<router-link :to="{name: 'Music'}">进入音乐</router-link>
<router-link :to="{name: 'Movie'}">进入电影</router-link>
<!-- 根据path跳转-->
<router-link to="/movie">进入电影</router-link>
router-link传参：
- 查询字符串 query:{key: value} -> /detail?id=1
<router-link :to="{name: 'Detail',query: {id: user.id}}"> 查看详情 </router-link>
路由path不用改：
{
path: '/detail',
name: 'Detail',
component: Detail
}\
2.路径字符串 params:{key: value} -> /detial/1
<router-link :to="{name: 'Detail',params: {id: user.id}}"> 查看详情 </router-link>
路由path需要改：
{
path: '/detail/:id',
name: 'Detail',
component: Detail
}
获取参数:
this.route.params.id
this.router.push(）
<template>
<div >
<button @click="goMusic">跳转到music</button>
<button @click="goMovie">跳转电影</button>
<button @click="goBack">跳转到上一页</button>
<button @click="testQuery">编程导航传递参数query方式</button>
<button @click="testParams">编程导航传递参数params方式</button>
</div>
</template>
<script>
export default {
data () {
return {
}
},
methods: {
goMusic (){
this.$router.push('/music');
},
goMovie (){
this.$router.push({
name: 'Movie' // 路由规则 name值
});
},
goBack (){
this.$router.go(-1); //-1 上一次浏览器记录 1 下一个浏览器记录
},
testQuery (){
// 查询字符串方式: /music?id=1&name=zhagnsan
this.$router.push({
name: 'Music', // 路由规则 name值
query: {
id: 1,
name: 'zhagnsan'
}
});
},
testParams (){
// 查询字符串方式: /movie/1
this.$router.push({
name: 'Movie', // 路由规则 name值
params: { // 路由规则 path: '/movie/:id',
id: 1,
name: 'zhagnsan'
}
});
}
}
}
</script>
重定向和404:
重定向写死路径名 - {path: '/', redirect: '/home'}
重定向使用name - {path: '/', redirect: {name: 'home'}}
404：{path: '*', component: notFoundVue}，notFoundVue.vue: 404页面组件
项目实际应用中，多数用到的是：嵌套路由
import Layout from '@/layout'
const tableRouter = {
path: '/table',
component: Layout,
redirect: '/table/complex-table',
name: 'Table',
meta: {
title: 'Table',
icon: 'table'
},
children: [
{
path: 'dynamic-table',
component: () => import('@/views/table/dynamic-table/index'),
name: 'DynamicTable',
meta: { title: 'dynamicTable' }
},
{
path: 'drag-table',
component: () => import('@/views/table/drag-table'),
name: 'DragTable',
meta: { title: 'dragTable' }
},
{
path: 'inline-edit-table',
component: () => import('@/views/table/inline-edit-table'),
name: 'InlineEditTable',
meta: { title: 'inlineEditTable' }
},
{
path: 'complex-table',
component: () => import('@/views/table/complex-table'),
name: 'ComplexTable',
meta: { title: 'complexTable' }
}
]
}
export default tableRouter
一般在项目中会将权限和路由结合在一起，需要将路由进行处理，在控制权限permission.js中：
import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import { getClientToken } from '@/utils/auth' // get token from cookie
import getPageTitle from '@/utils/get-page-title'
NProgress.configure({ showSpinner: false }) // NProgress Configuration
const whiteList = ['/login', '/auth-redirect'] // no redirect whitelist
router.beforeEach(async(to, from, next) => {
// start progress bar
NProgress.start()
// set page title
document.title = getPageTitle(to.meta.title)
// determine whether the user has logged in
const hasToken = getClientToken()
if (hasToken) {
if (to.path === '/login' && !to.query.redirect) {
// if is logged in, redirect to the home page
next({ path: '/home' })
NProgress.done()
} else if (to.path === '/home') {
// console.log('home')
next()
NProgress.done()
} else {
// console.log(store.getters.addRouters)
if (!store.getters.addRouters || store.getters.addRouters.length == 0) {
const params = {
roles: ['admin'],
module: store.getters.module
}
store.dispatch('permission/GenerateRoutes', params).then(() => {
next({ ...to, replace: true })
})
} else {
// console.log('next')
next()
NProgress.done()
}
}
} else {
/* has no token*/
if (whiteList.indexOf(to.path) !== -1) {
// in the free login whitelist, go directly
next()
} else {
// other pages that do not have permission to access are redirected to the login page.
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
})
router.afterEach(() => {
// finish progress bar
NProgress.done()
})
而在stroe的状态管理中，对路由做了处理：
const actions = {
GenerateRoutes ({ commit }, data) {
return new Promise(resolve => {
// 获取缓存中的菜单信息
if (store.getters.module) {
let menu = store.getters.curFirstList
let routers = []
handleAsyncRoutes(routers, menu)
commit('SET_ROUTERS', routers)
resolve()
}
})
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
六、axios的使用
- 安装
npm install axios - 引入
在主入口文件main.js中引用：
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios);
之后就可以使用了，在组件文件中的methods里去使用了：
getNewsList(){
this.axios.get('api/getNewsList').then((response)=>{
this.newsList=response.data.data;
}).catch((response)=>{
console.log(response);
})
}
一般项目应用，会用到拦截器，
import axios from 'axios'
// create an axios instance
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url
withCredentials： true,
timeout: 8000, // request timeout
})
// request interceptor
service.interceptors.request.use(config => {
if (store.getters.clientToken) {
config.headers['Access-Token'] = getToken()
}
//公共传参处理
let logininfo = JSON.parse(window.sessionStorage.getItem('logininfo'))
let commonParam
if (logininfo) {
commonParam = {
adminFlagUser: logininfo.adminFlagUser,
clientToken: logininfo.clientToken,
corporation: logininfo.corporationEntityNo,
operatorId: logininfo.loginName,
userLanguage: logininfo.userLanguage,
adminFlagUser: logininfo.adminFlag,
}
}
config.data = {...config.data, ...commonParam }
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)
// 响应服务器：接受服务器返回的结果，把返回的结果，因为它的anshuosi从服务器获得的结果response对象当中包含了很多信息，既有响应头也有相应主体的信息，xx配置信息。
// 现在只拿到data，如果有错误就抛出错误的Promise，
service.interceptors.response.use(
response => {
const res = response.data
if (res.returnCode == '000000') {
// 成功走这个
return res
}
},
error => {
// 失败走这个
console.log('err' + error) // for debug
return Promise.reject(error)
}
)
export default service
七、vuex的使用
