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中进行异步请求