外观
vue
1032字约3分钟
2020-05-08
文档
安装
- 安装脚手架
npm install -g vue-clinpm i -g @vue/cli - 卸载脚手架
npm uninstall -g vue-cli - 查询脚手架版本
npm view vue-cli versions --json - 删除脚手架
cnpm uninstall -g vue-cli - 查看版本
vue -V - 创建项目
vue create demo1vue init webpack demo1vue 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
- Material You 主题UI vuetifyjs
- 手机端 UI MintUI
- 通用 UI element-plus
- 通用 UI iview
- 原生APP开发 nativescript-vue
工具
- Axios 接口调用
- Echarts 统计图表
- localforage 离线存储
- vue-print-nb 打印
- motion 动画
