Vue快速入门开发二

一、Vue组件讲解

template

<div id="app">
<zhang v-bind:"item"></zhang>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
//定义一个Vue组件component
vue.component( "zhang",{
 props['item']
 template: '<li>Hello</li>'
 });
var vm = new Vue({
 el: "#app"
});
</script>

二、Axios异步通信

主要作用就是实现AJAX异步通信

axios中文网|axios API 中文文档 | axios

<!--引入Js文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"</script>
<script src="https://unpkg.com/ axios/dist/axios.min.js"></script>
<script type="text/javascript">
   var vm = new Vue({
     el: '#vue'，
     //data:属性: vm
       data(){
            return{
            //请求的返回参数合适，必须和 json字符串一样
                  info:{
                      name: null,

                }
              }
             },
        mounted(){ //钩了函数  链式编程  ES6新特性
          axios.get('../data.json').then(response=>(this.info=response.data));
       }
   });
</script>

三、计算属性computed(缓存)

四、插槽slot

<div id="app">
 <todo>
  <todo-title slot="todo-item"></todo-title>
  <todo-items></todo-items>
 </todo>
</ div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"</script>
<script>
 Vue.component( "todo" ,{
   template:
   '<div>\
     <slot name="todo-title"></ slot>\
     <ul>\
        <slot name="todo-item"></ slot>\
     </ul>\
   </div>'
});

 Vue.component( "todo-title" ,{
   props:[title]
   template:'<div>{{title}}</div>'
});

 Vue.component( "todo-item" ,{
   props:[item]
   template:'<li>{{item}}</li>'
});

var vm=new Vue({
  el:"#app",
  data:{
    title:"测试"，
    todoItems:['Java','Linux']
  }
});

五、第一个vue-cli程序

1、下载Node.js并配置环境。

2、 安装vue-cli

npm  install vue- cli -g

3、初始化

npm install --> npm run dev 

六、webpack学习使用

• npm install webpack -g
• npm install webpack-cli -g

创建webpack.config.js配置文件：

• module:模块，用于处理各种类型的文件。(module.exports)
• entry:入口文件，指定 WebPack 用哪个文件作为项目的入口。
• output:输出，指定 WebPack 把处理完成的文件放置到指定路径。
• plugins:插件，如:热更新、代码重用等。
• resolve:设置路径指向。
• watch:监听，用于设置文件改动后直接打包。

七、vue-router路由（页面跳转）

• npm install vue-router --save-dev
• import VueRouter from 'vue-router'
• 显示声明使用VueRouter：vue.use(vueRouter);

1、配置路由 

import Vue from 'vue'
import VueRouter from 'vue-router'

import Content from '../components/Content'
import Main from '../ components/Main'

//安装路由
Vue. use (VueRouter);

//配置导出路由
export default new VueRouter({
 routes: [
  {
       //路由路径
       path: '/content',
       name:'content',
       //跳转的组件
       component:Content
  },
  {
    path:'/main',
    name:'content',
    component:Main
  }
 ]
});

2、 main.js导入

import router from './router'   //自动扫描路由配置

new vue({
   el:'#app',
   //配置路由
   router,
   components: { App },
   template: '<App/>'
});

3、使用 

<template>
 <div id="app">
   <router-link to="/main">首页</router-link>
   <router-link to="/content">内容页</router-link>
   <router-view></ router-view>
 </div>
</template>

八、vue+elementUl

Element - The world's most popular Vue UI framework

sass安装：npm install sass-loader node-sass --save-dev

九、路由嵌套

import vue from 'vue'
import Router from 'vue-router'

import Main from '../views/Main'
import Login from '../views/Login'

import UserList from '../views/user/List'
import UserProfile from '../views/user/Profile'
Vue.use(Router);

export default new Router({
 iroutes: [
  {
     path: '/main',
     component: Main,
     children:[
          {path:'/user/profile',component:UserProfile},
          {path:'/user/list',component:UserList},
       ]
  },{
     path:'/login',
     component: Login
    }
  ]
});

十、参数传递及重定向

1、参数传递

<! --name-传组件Iparams传递参数-->
<router-link :to="{name:'UserProfile',params:{id: 1]">个人信息</router-link>

2、资源重定向

{
   path:'lgoHome',
   redirect:'/main'
}

十一、404和路由钩子

1、路由模式有两种

• hash:路径带#符号，如http://localhost/#/login
• history:路径不带#符号，如http://localhost/login

export default new Router({
   mode: history,

2、404页面

3、钩子函数

• beforeRouteEnter :在进入路由前执行
• beforeRouteLeave :在离开路由前执行

export default {
   props:['id'],
   name : "UserProfile",
   //类似过滤器
   beforeRouteEnter: (to,from,next) => {
     console.log( "准备进入个人信息页");
     next( );
  },
   beforeRouteLeave: (to,from,next) =>{
     console.1og("准备离开个人信息页");
     next( );
  }
}

• to:路由将要跳转的路径信息
• from:路径跳转前的路径信息
• next:路由的控制参数
• next()跳入下一个页面
• next('/path')改变路由的跳转方向，使其跳到另一个路由
• next(false)返回原来的页面
• next((vm)=>{})仅在beforeRouteEnter 中可用，vm是组件实例

 4、在钩子函数中使用异步请求

• 安装Axios： npm install axios -s
• main.js 引用Axios

• import axios from 'axios'
  Vue.prototype.axios = axios ;

• 准备数据︰只有static目录下的文件是可以被访问到的，所以就把静态文件放入该目录下。

• //静态数据存放的位置
  static/mock/data.json