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单文件组件的使用

posted @ 2022-04-05 09:57  Loading~  阅读(124)  评论(0编辑  收藏  举报