Vue基础入门总结
1. Vue基础
- MVVM——HelloWorld
- 插值(内容)v-bind(属性) v-model (表单) ——数据绑定
- v-on 事件处理
- computed(计算属性) watch(监听属性)mounted(生命周期)
2. Vue组件
-
单文件组件(template script style) data()
-
导出组件(export default {name:'Search'}) 引入组件(import)
-
父子组件通信(props/$emit)兄弟组件通信($emit/$on) Vuex(大型项目)
-
Vuex 基本示例
//该文件用于创建Vuex中最为核心的store import Vue from 'vue' //引入Vuex import Vuex from 'vuex' //应用Vuex插件 Vue.use(Vuex) //准备actions——用于响应组件中的动作 const actions = { } //准备mutations——用于操作数据(state) const mutations = { } //准备state——用于存储数据 const state = { } //准备getters——用于将state中的数据加工 const getters = { } //创建并暴露store export default new Vuex.Store({ actions, mutations, state, })
3. Vue接口访问
-
axios.get('http://localhost:8080/demo/cars').then( response => { console.log('请求成功了',response.data) }, error => { console.log('请求失败了',error.message) } )
-
跨域访问
4. Vue路由
-
// 该文件专门用于创建整个应用的路由器 import VueRouter from 'vue-router' //引入组件 import About from '../components/About' import Home from '../components/Home' //创建并暴露一个路由器 export default new VueRouter({ routes:[ { path:'/about', component:About }, { path:'/home', component:Home } ] }) <!-- 原始html中我们使用a标签实现页面的跳转 --> <!-- <a class="list-group-item active" href="./about.html">About</a> --> <!-- <a class="list-group-item" href="./home.html">Home</a> --> <!-- Vue中借助router-link标签实现路由的切换 --> <router-link class="list-group-item" active-class="active" to="/about">About</router-link> <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
5. Vue+Element UI
-
npm i element-ui -S 安装组件
-
引入组件
import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue'; Vue.use(ElementUI); new Vue({ el: '#app', render: h => h(App) });
-
参考Vue单文件组件的使用