招聘网站建设工作总结今日新闻最新头条10条
v-model绑定变量时,对应的数据类型为字符串。
千万要注意:遇到数字类型,需要类型转换
Element-UI详解
以下都是每创建一个项目,需要就要下载。路由也是。
npm i element-ui -S
-S 是--save-dev的简写
cnpm install sass-loader node-sass --save-dev
element-ui官网
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
axios
Vue中axios使用详解
1、 安装axios:
npm install axios
import axios from 'axios'
// 全局挂载axios
Vue.prototype.$axios = axiosnew Vue({el: '#app',axios,router,components: { App },template: '<App/>'
})
methods: {// 获取所有书的数据findAll () {var that = thisthis.$axios.get('http://localhost:8888/book/findAll').then(res => {console.log(res)that.tableData = res.data.data}).catch(err => {console.log(err)})}}
在main.js文件中做测试
axios(config)请求方式
import Vue from 'vue'
import App from './App.vue'
import router from './router/index'
import store from './store/store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'import axios from "axios";
Vue.config.productionTip = falseVue.use(ElementUI);new Vue({render: h => h(App),router,store
}).$mount('#app')/*axios({url:'http://123.207.32.32:8000/home/multidata'//传进url,默认是get请求}).then(res =>{console.log(res);//控制台打印返回的数据
})//获取数据后,执行then方法axios({url:'http://123.207.32.32:8000/home/data?type=sell&page=1'//传进url,默认是get请求}).then(res =>{console.log(res);//控制台打印返回的数据
})*///axios发送并发请求
axios.all([axios({url:'http://123.207.32.32:8000/home/data?type=sell&page=1'}),axios({url:'http://123.207.32.32:8000/home/multidata',})]).then(axios.spread((result1,result2) =>{console.log(result1);//控制台打印返回的数据console.log(result2);
}))
mock
vue关于mock的简单使用
const Mock = require('mockjs')
let id = Mock.mock('@id')
console.log(id)//返回一个简单的字符串let obj = Mock.mock({id:'@id',username:'@cname()',date:'@date()',avatar:"image('200*200','red','#fff',''avatar)",description:'@paragraph()',ip:"@ip()",email:"@email()"
})
console.log(obj)//返回一个对象
test.app
<template><div><button @click="login">login</button><button @click="list">list</button></div>
</template><script>// import mock from '../mock/mock'require('../mock/mock')import axios from 'axios'export default {name: "test",methods:{login() {axios.get("/login").then(result => {if (result.data) {console.log(result.data)alert(result.data.name)}})},list(){axios.get('/list').then(result =>{if(result.data){console.log(result.data)alert(result.data.name + ' '+result.data.age)}})}}}
</script><style scoped></style>