Vue2.0
目录
1、安装vue脚手架
npm install -g @vue/cli
2、利用脚手架创建项目
- cmd输入命令
vue ui
- 在浏览器打开页面
- 点击创建项目
- 输入项目名,下一步
- 选择手动配置
- 打开Router和vuex
- 创建项目
- 项目结构
main.js 前端入口
views放组件
assets静态资源
router路由
3、基础讲解
- 文本引用
<template> <div> <h1>{{ name }} {{ age }}</h1> </div> </template> <script> const option={ data: function(){ return { name:'jj', age:20 } } }; export default option; </script>
- 属性绑定
<template> <div> <h1>{{ name }} {{ age }}</h1> <input type="text" v-bind:value= 'name'> </div> </template> <script> const option={ data: function(){ return { name:'jj', age:20 } } }; export default option; </script>
v-bind属性绑定,可以省略直接:代替
<input type="text" v-bind:value= 'name'> <input type="text" :value= 'name'>
- 事件绑定
<template> <div> <h1>{{ name }} {{ age }}</h1> <input type="text" :value= 'name'> <input type="button" v-on:click="click"> </div> </template> <script> const option={ data: function(){ return { name:'jj', age:20 } }, methods: { click(){ } } }; export default option; </script>
数据写在data里,事件函数写在methods里
v-on:click也可省略
<input type="button" v-on:click="click"> <input type="button" @click="click">
- 双向绑定
<input type="text" v-model= 'name'>
4、axios请求
- 安装
npm i axios
vue.config.js配置前端代理防止跨域
const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, devServer: { port: 7070,//前端端口 proxy: {//前端配置代理 '/api': { target: 'http://localhost:8080', changeOrigin: true } } } })
- 使用
<template> <div> <div> <input type="button" @click="click" value="发送请求"> <div>{{ res }}</div> </div> </div> </template> <script> import axios from 'axios' const option = { data: function(){ return { res:"" } }, methods: { async click() { this.res= await axios.get('/api/user/1') } } }; export default option; </script>
- 自己配置axios
- 重复使用组件
mounted :function(){}组件加载完就加载