万里任禅游

外观

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>

框架

UI

工具

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