Vue

Vue

概述

Vue是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

特点：

• 是一个构建用户界面的框架
• 是一个轻量级的MVVM（Model-View-ViewModel），其实就是所谓的数据的双向绑定
• 数据驱动和组件化的前端开发
• 通过简单的API就能实现响应式的数据绑定和组合的视图组件

导入vue.js

BootCDN（国内） : https://cdn.bootcss.com/vue/2.2.2/vue.min.js,(国内不稳定)           
unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。（推荐使用）
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js，如（<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>）
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Vue基本语法

v-bind

v-bind等被称为指令。指令带有前缀v-，以表示它们是Vue提供的特殊特性。它们会在渲染的DOM上应用特殊的响应式行为。在这里，该指令的意思是:“将这个元素节点的title 特性和Vue 实例的message 属性保持一致”。

<div id="app">
    <h1 v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定的提示信息!
    </h1>
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data:{
            message:"hello,vue!"
        }
    });
</script>

判断-循环

v-if v-else

<div id="app">
    <h1 v-if="ok">Yes</h1>
    <h1 v-else>No</h1>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            ok: true
        }
    });
</script>

v-for

<div id="app">
    <li v-for="item in items">
        {{item.message}}
    </li>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            items: [
                {message: '天才'},
                {message: '人才'}
            ]
        }
    });
</script>

绑定事件

v-on

<div id="app">
    <button v-on:click="sayHello">click me</button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            message: "天才"
        },
        methods: {//方法必须定义在Methods对象中，v-on: 事件
            sayHello: function (event) {
                alert(this.message)
            }
        }
    });
</script>

双向绑定

v-model

<div id="app">
    输入的文本：<input type="text" v-model="message">{{message}}
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            message: 123
        },
    });
</script>

<div id="app">
    性别：
    <input type="radio" value="男" v-model="tiancai">男
    <input type="radio" value="女" v-model="tiancai">女
    选定了谁：{{tiancai}}

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            tiancai: ''
        },
    });
</script>

<div id="app">
    下拉框：
    <select v-model="selected">
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    选定了谁：{{selected}}

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            selected: ''
        },
    });
</script>

组件

• Vue.component():注册组件
• my-component-li:自定义组件的名字
• template:组件的模板

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 <button-counter>。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

<div id="components-demo">
  <button-counter></button-counter>
</div>

new Vue({ el: '#components-demo' })

通过 Prop 向子组件传递数据

Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个 property。为了给组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中

<div id="app">
    <tiancai v-for="item in items" v-bind:tian="item"></tiancai>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
<script>
    //定义一个Vue组件component
    Vue.component('tiancai',{
        props: ['tian'],
        template: '<li>{{tian}}</li>'
    })

    var vm = new Vue({
        el: "#app",
        data:{
            items: ["Java","前端","后端"]
        },
    });

</script>

Axios异步通信

Axios是一个开源的可以用在浏览器端和Node JS的异步通信框架，她的主要作用就是实现 AJAX异步通信，其功能特点如下:

• 从浏览器中创建XMLHttpRequests

• 从node.js创建http请求

• 支持Promise API[JS中链式编程]

• 拦截请求和响应

• 转换请求数据和响应数据

• 取消请求

• 自动转换JSON数据

• 客户端支持防御XSRF(跨站请求伪造)

<div id="vue">
    <div>{{info.name}}</div>
    <a v-bind:herf="info.url"></a>
</div>

//引入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    var vm = new Vue({
        el: "#vue",
        //data: 属性: vm
        data(){
            return{
                //请求的返回参数合适，必须和json字符串一样
                info:{
                    name: null,
                    url: null
                }
            }
        },
        mounted(){//钩子函数  链式编程 ES6新特性
            axios.get('../data.json').then(response=>(this.info=response.data));
        }

    })
</script>

生命周期

计算属性

​ 计算属性的重点突出在属性两个字上(属性是名词)，首先它是个属性其次这个属性有计算的能力（计算是动词)，这里的计算 就是个函数;简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，仅此而已;可以想象为缓存!

<div id="app">
    <p>currentTime1 {{currentTime1()}}</p>
    <p>currentTime2 {{currentTime2}}</p>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>

<script>
    var vm = new Vue({
        el: "#app",
        data:{
            message:"hello,vue!"
        },
        methods: {
            currentTime1: function () {
                return Date.now();//返回一个时间戳
            }
        },
        computed: {//计算属性:methods，computed方法名不能重名,重名之后,只会调用methods的方法
            currentTime2: function () {
                return Date.now();//返回一个时间戳
            }
        }
    });
</script>

​ 调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢?此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点,计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销:

插槽slot

​ 在vue.js中我们使用<slot〉元素作为承载分发内容的出口，作者称其为插槽，可以应用在组合组件的场景中;

<div id="app">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in todoItems"
                    :item="item" v-bind:index="index" v-on:remove="removeItems(index)" ></todo-items>
    </todo>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
<script>
    //slot:插槽
    Vue.component( "todo" ,{
    template: '<div>\
                    <slot name="todo-title"></slot>\
                    <ul>\
                    <slot name="todo-items"></slot>\
                    </ul>\
                </div>'
    });

    Vue.component( "todo-title" ,{
        props: ['title'],
        template: '<div>{{title}}</div>'
    });
    Vue.component( "todo-items" ,{
        props: ['item'],
        template: '<li>{{item}} <button @click="remove">删除</button> </li>',
        methods: {
            remove: function (index) {
                //this.$emit 自定义事件分发
                this.$emit('remove',index);
            }
        }
    });

    var vm = new Vue({
        el: "#app",
        data:{
            title: 'tiancai',
            todoItems: ['Java','前端','后端']
        },
        methods: {
            removeItems:function (index) {
                this.todoItems.splice(index,1);// 1 代表一次删除一个元素
            }
        }
    });

vue-cli

# -g 就是全局安装
npm install cnpm -g

安装vue-cli
cnpm install vue-cli -g

#测试是否安装成功
#查看可以基于哪些模板创建vue 应用程序，通常我们选择webpack
vue list

创建一个基于webpack模板的vue应用程序
#这里的myvue是项目名称，可以根据自己的需求起名

vue init webpack myvue
一路都选择no即可;

说明:
. Project name:项目名称，默认回车即可
. Project description:项目描述，默认回车即可
. Author:项目作者，默认回车即可
.lnstall vue-router:是否安装 vue-router，选择n不安装（后期需要再手动添加)
.Use ESLint to lint your code:是否使用ESLint做代码检查，选择n不安装（后期需要再手动添加)
.Set up unit tests:单元测试相关，选择n不安装（后期需要再手动添加)
.Setup e2e tests with Nightwatch:单元测试相关，选择n 不安装（后期需要再手动添加)
.Should we run npm install for you after the project has been created:创建完成后直接初始化，选择n，我们手动执行;运行结果!

初始化并运行
cd myvue
npm insta11
npm run dev

Webpack

安装Webpack
npm install webpack -g
npm install webpack-cli -g

测试安装成功:
webpack -v
webpack-cli -v

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

使用Webpack
1.创建项目

2.创建一个名为modules的目录，用于放置JS模块等资源文件

3.在modules下创建模块文件，如 hello.js，用于编写JS模块相关代码
//暴露一个方法;sayHi
exports.sayHi = function ( ) {
document .write( " <div >Hello webPack< / div >" );
};

4.在modules下创建一个名为main.js 的入口文件，用于打包时设置entry 属性
// require导入一个模块,就可以调用这个模块中的方法了
var he1lo = require ( "./ hello" );
hello.sayHi( );

5.在项目目录下创建webpack.config.js 配置文件，使用webpack命令打包
module.exports = {
    entry : "./ modules / main.js ",
    output : {
    	filename : "./js / bundle.js "
    }
};

6.在项目目录下创建HTML页面，如index.html，导入 WebPack 打包后的JS文件
<! doctype html>
<html lang= "en" >
<head>
    <meta charset= "UTF-8">
    <title>狂神说了ava< / title>
</head>
<body>
<script src"dist/js/bundle.js "></script>
</body>
</html>

7.在IDEA控制台中直接执行webpack;如果失败的话,就使用管理员权限运行即可!

8.运行HTML 看效果

#参数--watch用于监听变化
webpack --watch

vue-router路由

​ Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有:

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于Vue.js 过渡系统的视图过渡效果
• 细粒度的导航控制
• 带有自动激活的Css class的链接
• HTML5历史模式或hash模式，在IE9中自动降级
• 自定义的滚动条行为

安装
npm install vue-router -- save-dev
如果在一个模块化工程中使用它，必须要通过Vue.use()明确地安装路由功能:
import Vue from 'vue '
import VueRouter from 'vue -router '
vue.use ( VueRouter) ;

测试
1、先删除没有用的东西

2、components目录下存放我们自己编写的组件

3、定义一个Content.vue的组件
<template>
    <div>
    <h1>内容页</h1>
    </div>
</ template>

<script>
export default {
	name :"Content"
}
</script>

4、安装路由,在src目录下,新建一个文件夹:router ，专门存放路由
//导入路由插件
import Router from 'vue -router '

//导入上面定义的组件
import content from '../components/content '
import main from '../ components / main '

//安装路由
vue.use (Router);

//配置路由
export default new Router({
    routes : [
        {
            //路由路径
            path:'/content',
            //路由名称
            name:'content',
            //跳转到组件
            component : Content
         }, {
            //路由路径
            path: '/main ',
            //路由名称
            name : 'main',
            //跳转到组件
            component : main
         }
      ]
});

5、在main.js 中配置路由
import vue from 'vue'
import App from ' ./ App '

//导入上面创建的路由配置目录
import router from './ router'

//来关闭生产模式下给出的提示
vue.config.productionTip = false;
new vue ({
    el: '#app ',
    //配置路由
    router,
    components: {App},
    template:'<App/> '
});

6、在App.vue中使用路由
<template>
    <div id= " app" >
    <! - -
        router-link:默认会被渲染成一个<a>标签，to属性为指定链接		router-view:用于渲染路由匹配到的组件
    -->
    <router-link to="/">首页< /router- link >
    <router-link to=" / content">内容< / router- link >	 <router-view>< / router- view>
    </ div>
</template>

<script>
    export default{
    	name :  'App '
    }
</script>

Vue实战

Element UI

安装

npm安装

推荐使用npm的方式安装，它能更好地和webpack打包工具配合使用。

npm i element-ui -S

CDN

目前可以通过unpkg.com/element-ui获取到最新版本的资源，在页面上约会js和css文件即可开始使用。

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

创建工程

注意:命令行都要使用管理员模式运行

1、创建一个名为hello-vue的工程vue init webpack hello-vue内

2、安装依赖，我们需要安装vue-router、element-ui、sass-loader和node-sass四个插件
#进入工程目录
cd he11o-vue
#安装vue-router
npm install vue-router --save- dev
#安装element- ui
npm i element-ui -s#安装依赖
npm install
#安装SAsS 加载器
cnpm install sass-loader node-sass --save- dev
#启动测试
npm run dev

3、Npm命令解释:
npm install moduleName :安装模块到项目目录下
npm install -g moduleName : -g 的意思是将模块安装到全局，具体安装到磁盘哪个位置，要看npm config prefix的位置
npm install -save moduleName : --save的意思是将模块安装到项目目录下，并在package 文件的dependencies节点写入依赖，-S为该命令的缩写
npm install -save-dev moduleNam e: --save-dev的意思是将模块安装到项目目录下，并在package 文件的 devDependencies节点写入依赖，-D为该命令的缩写

创建登陆页面

路由嵌套

export default new Router({
    routes: [
        {
        	path: ' /main',
            component: Main，
            children: [//嵌套路由
            {path: '/user/profile',
            component: UserProfile},
        	{path: '/user/list',
         	component:UserList}，
    		]
        },{
        	path: " /1ogin',
       		component: Login,     
		}
	]
});

参数传递

export default new Router({
    routes: [
        {
        	path: ' /main',
            component: Main，
            children: [//嵌套路由
            
            {//:id,name是传递的
            path: '/user/profile/:id/:name',props: true
            name:'UserProfile'
            component: UserProfile
        	},
        
        	{path: '/user/list',
         	component:UserList}，
    		]
        },{
        	path: " /1ogin',
       		component: Login,     
		}
	]
});

传递
<!--name-传组件名 params传递参数,需要对象:v-bind -->
<router-link :to="{name: 'UserProfile', params: {id: 1]加">个人信息</router-link>




展示
$route方式
<template>
    <!--所有的元素,必须不能直接在根节点下-->
    <div>
        <h1>个人信息</h1>
		{{$route.params.id }}
    </div>
</template>
<script>
    export default{
    name:"UserProfile"
	}
</script>

props方式
<template>
    <!--所有的元素,必须不能直接在根节点下-->
    <div>
        <h1>个人信息</h1>
		{{id}}
    </div>
</template>
<script>
    export default{
    props: ['id'],
    name:"UserProfile"
	}
</script>

重定向

export default new Router({
    routes: [
        {
        	path: ' /main',
            component: Main，
            children: [//嵌套路由
            
            {//:id,name是传递的
            path: '/user/profile/:id/:name',props: true
            name:'UserProfile'
            component: UserProfile
        	},
        
        	{path: '/user/list',
         	component:UserList}，
    		]
        },{
        	path: " /1ogin',
       		component: Login,     
		},{//重定向
            path: '/goHome ',
            redirect: '/main'
		}
	]
});

路由钩子

路由钩子与异步请求

beforeRouteEnter :在进入路由前执行

beforeRouteLeave :在离开路由前执行

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

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

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

1、安装 Axios 
cnpm install axios -s

2、main.js 引用Axios
import axios from 'axios '
vue.prototype . axios = axios ;

3、准备数据︰只有我们的static目录下的文件是可以被访问到的，所以我们就把静态文件放入该目录下。
//静态数据存放的位置
static / mock / data.json

4、在beforeRouteEnter中进行异步请求

路由钩子与异步请求

beforeRouteEnter :在进入路由前执行

beforeRouteLeave :在离开路由前执行

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

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

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

1、安装 Axios 
cnpm install axios -s

2、main.js 引用Axios
import axios from 'axios '
vue.prototype . axios = axios ;

3、准备数据︰只有我们的static目录下的文件是可以被访问到的，所以我们就把静态文件放入该目录下。
//静态数据存放的位置
static / mock / data.json

4、在beforeRouteEnter中进行异步请求