vue

约 1032 字大约 3 分钟

2020-05-08

文档

官方文档

安装

安装脚手架 npm install -g vue-cli npm i -g @vue/cli
卸载脚手架 npm uninstall -g vue-cli
查询脚手架版本 npm view vue-cli versions --json
删除脚手架 cnpm uninstall -g vue-cli
查看版本 vue -V
创建项目
- vue create demo1
- vue init webpack demo1
- vue init webpack-simple demo1
初始化(可省略) npm install
启动项目 npm run dev

语法

属性

位置 data(){return{}}
文本 v-text='msg' {{data}}
属性 v-bind:title="title" :src="url"
html v-html="html1"
class v-bind:class="{'red': flag} :class="{'red': flag==0}
style v-bind:style="{'width':widthdata+'px'} :style="{'width':data+'px'}
双向数据绑定 v-model='msg'
dom元素 this.$refs
显示/隐藏 v-show

方法

语法 methods(){}
写法 Method1: function(){}、method(){}
获取属性 this.msg | this.$set(this,'msg','测试');
获取事件对象 e.srcElement、e.keyCode
数组
- 添加 this.arr.push('aa')
- 修改 this.arr.splice(key, 1, '测试');
- 数组对象放值 this.$set(this.iptDatas[index], showAlert, true)

循环

this.arr.forEach(item => {
    this.$set(item, 'showEditBtn', true)
})

存储
- 设置数据 localStorage.setItem(key, value)
- 获取数据 localStorage.getItem(key)
- 删除数据 localStorage.removeItem(key)
条件判断
- v-if=""
循环
- v-for="item, key in list"
生命周期
- 创建之前 beforeCreate(){}
- 创建后 created(){}
- dom渲染前 beforeMounte(){}
- dom渲染后 mounted() {}
- 销毁前 beforeDestroy() {}
- 销毁后 destroyed() {}

事件

点击 v-on:click="method()"、@click="method('111')"、@click="method($event)"
键盘 @keydown="method()"

模块

定义 Var storage = {…}
暴露 export default storage;
引入 improt storage from './model/storage.js'

组件

定义 Home.vue
引入 import Home from './components/Home.vue'
声明 components: {'v-home':Home}
使用 <v-home></v-home>
内部css scoped

请求数据

vue-resource

安装 cnpm install vue-resource --save
引入 import VueResource from 'vue-resource'
使用 Vue.use(VueResource)

this.$http.get('http://jsonplaceholder.typicode.com/users').then( | this.$http.jsop
    response => {
        this.someData = response.body;
    }, response => {
        console.log('err');
    }
);

axios

安装 cnpm install axios --save
引入 import Axios from 'axios'
使用

Axios.get(api).then((response)=>{
    this.list=response.body;
}).catch((error)=> {
    console.log(error);
})

fetch-jsop

传值

父子组件传值

父->子
- 声明 <v-head :title=title :run=run></v-head>
- 调用 props:['title', 'run']
- 主动获取 this.$parent.msg

子->父

属性传值
- 声明 <v-head ref="head"></v-head>
- 调用 this.$refs.head.run();

方法传值

传值

that.$emit('handleStop',{
    localId:localId
})

接收

<record-voice@handleStop="saveRecordVoice"v-show="showRecordVoice"/>
saveRecordVoice(param){
    this.showRecordVoice=false;
    this.localId=param.localId;
}

非父子(广播)

定义空组件

import Vue from 'vue';
var VueEvent = new Vue();
export default VueEvent;

组件广播 VueEvent.$emit('to-news', this.msg);
组件接收

VueEvent.$on('to-nerws', function(data) {
    this.msg = data;
})

动态路由传值

声明 { path: '/content/:aid', component: Content }
传递 <router-link :to="'/content/'+key">{{key}}{{item}}</router-link>
获取 this.$route.params

get传值

声明 <router-link :to="'/product?aid='+key">{{key}}{{item}}</router-link>
传递 { path: '/product', component: Product },
获取 this.$route.query

路由(动态根中挂在组件)

安装 cnpm install vue-router --save
引用 import VueRouter from 'vue-router'Vue.use(VueRouter)

路由配置

import Home from './components/Home';
import News from './components/News';
const routes = [
    { path: '/home', component: Home },
    { path: '/news', component: News }
]

实例化

const router = new VueRouter({
    routes
})

挂载

new Vue({
    el: '#app',
    router,
    render: h => h(App)
})

使用

<router-link to="/home">首页</router-link>
<router-link to="/news">新闻</router-link>
<hr>
<router-view></router-view>

编程式导航 (js页面跳转)

this.$router.push({path: 'news'});
this.$router.push({name: 'content', params: {aid: 123}});

命名路由

history模式

const router = new VueRouter({
    mode: 'history',
    routes
})

路由的嵌套

配置

{
    path: '/user',
    component: User,
    children: [
        { path: 'useradd', component: UserAdd },
        { path: 'userlist', component: UserList },
    ]

}

使用

<div class="left">
    <ul>
        <li><router-link to="/user/useradd">用户增加</router-link></li>
        <li><router-link to="/user/userlist">用户列表</router-link></li>
    </ul>
</div>
<div class="right">
    <router-view></router-view>
</div>

路由模块化

路由中的内容提取 router.js export default router;
使用 import router from './router/router';

Vuex传值(不同页面数据共享)

安装 cnpm install vuex --save

storge.js引入vuex

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

定义数据
```
var state = {
    count: 1
}
```

定义方法

var mutations = {
    incCount() {
        ++state.count;
    }
}

实例化

const store = new Vuex.Store({
    state,
    mutations: mutations
})
export default store;

使用

beforeMounte() {
    const oScript = document.createElement('script');
    oScript.type = 'text/javascript';
    oScript.src = 'https://www.echartsjs.com/examples/vendors/echarts/map/js/china.js';
    document.body.appendChild(oScript);
}

消息提示

this.$Message.info('开关状态：' + status);

开发模式

<template>
	<div class="wrapper">
	</div>
</template>
<script lang="ts">
	import { Component, Vue, Prop } from 'vue-property-decorator';
	import qs from 'qs';
	import Axios from 'axios';
	import ViewUI from 'view-design';
	import 'view-design/dist/styles/iview.css';
	Vue.use(ViewUI);
	export default {
		data() {
			return {
			}
		},
		mounted() {
			this.getData();
		},
		methods: {
			getData() {
				const params = qs.stringify({});
				Axios.post(this.getDataUrl, params).then((response)=>{
					if (response['errcode'] == 0) {
						if (response.data.RESULT.length > 0) {
						}
					}
				})
			}
		}
	}
</script>
<style lang="less" scoped>
	.wrapper {
	}
</style>

框架

Material You 主题UI vuetifyjs
手机端 UI MintUI
通用 UI element-plus
通用 UI iview
原生APP开发 nativescript-vue

工具

Axios 接口调用
Echarts 统计图表
localforage 离线存储
vue-print-nb 打印
motion 动画