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>
      <!-- 指定组件的呈现位置 -->
      <router-view></router-view>
       
  

• 编程式

  //通过点击事件触发
  methods: {
  			pushShow(m){
  				this.$router.push({
  					name:'xiangqing',
  					query:{
  						id:m.id,
  						title:m.title
  					}
  				})
  			},
  			replaceShow(m){
  				this.$router.replace({
  					name:'xiangqing',
  					query:{
  						id:m.id,
  						title:m.title
  					}
  				})
  			}
  		},
  

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