Vue快速入门
Vue
1.基本语法
v-if v-else-if v-else
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<h1 v-if="Ok==='A'">Ah1>
<h1 v-else-if="Ok==='B'">Bh1>
<h1 v-else-if="Ok==='D'">Dh1>
<h1 v-else>Ch1>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
var vm=new Vue({
el:"#app",
data:{
Ok:"A"
}
});
script>
body>
html>
v-for
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<li v-for="(item,index) in items">
{{item.message}}=====>{{index}}
li>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
var vm=new Vue({
el:"#app",
data:{
items:[
{message:"无双1"},
{message:"无双2"},
{message:"无双3"}
]
}
});
script>
body>
html>
2.绑定事件
使用 v-on指令
<div id="app">
<button v-on:click="sayHi">点击button>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:"Hi!"
},
methods:{//方法必须定义在vue的methods中
sayHi:function () {
alert(this.msg)
}
}
});
script>
3.双向绑定
使用v-model
文本框
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
输入的文本： <input type="text" v-model="msg"> {{msg}}
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:""
}
});
script>
body>
html>
文本域
<div id="app">
输入的文本 <textarea name="" id="" cols="30" rows="10" v-model="msg">textarea>{{msg}}
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:""
}
});
script>
单选按钮
<div id="app">
性别：
<input type="radio" name="sex" value="男" v-model="msg">男
<input type="radio" name="sex" value="女" v-model="msg">女
{{msg}}
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:""
}
});
script>
特别注意下拉列表
下拉框：
<select v-model="msg">
<option value="" disabled>---请选择---option>
<option>Aoption>
<option>Boption>
<option>Coption>
select>
<p>{{msg}}p>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:""
}
});
script>
可以发现vue的双向绑定，只需要在标签中使用v-model指令即可
4.组件
即自定义标签，使用Vue.component
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<ws v-for="msg in msgs" v-bind:msgsa="msg" >ws>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
Vue.component("ws",{
props:['msgsa'],
template:'{{msgsa}} '
});
var vm=new Vue({
el:"#app",
data:{
msgs:["无双1","无双2","无双3"]
}
});
script>
body>
html>
v-bind:msgsa="msg"类似于键值对或者属性名和属性和props:[‘msgsa’]组合使用，msgsa为遍历的数组的名字，"msg"为值，使用props:[‘msgsa’]获取，
vue获取同级数据需要中间商，类似于java的获取name。
注意：默认规则下props属性里的值不能为大写，属性名不能驼峰
5.Axious
导入data.json
{
"name": "无双",
"url": "https://blog.csdn.net/liuwushuang233",
"page": 1,
"isNonProfit": true,
"address": {
"street": "郑州",
"city": "河南",
"country": "中国"
},
"links": [
{
"name": "bilibili",
"url": "https://space.bilibili.com"
},
{
"name": "百度",
"url": "https://www.baidu.com/"
}
]
}
测试axious
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
[v-cloak]{
display: none;
}
style>
head>
<body>
<div id="vue">
{{info.name}}
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.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{
info:{
name:null,
address:{
country:null,
city:null,
street:null
},
url:null
}
}
},
mounted(){//钩子函数
axios.get('data.json').then(response=>(this.info=(response.data)));
}
});
script>
body>
html>
钩子函数axious使用链式方法，response.data可以获取到参数，
response=>(this.info=(response.data))是ES6以后的新特性，如果提高用户体验要加上加载前的隐藏，防止模板暴露闪烁。其中info可以写成
data(){
return{
info:{
}
}
},
使用{{info.属性名}}可以直接获取属性名，不加属性名就获取全部对象
6.计算属性
计算属性的重点突出在属性两个字上(属性是名词)，首先它是个属性其次这个属性有计算的能力(计算是动词)，这里的计算就是个函数：简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，仅此而已；可以想象为缓存!类似于mybatis中的缓存，不进行增删改，可以使用内存中的缓存，提高速度。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<p>currtnTime1:{{currtnTime1()}}p>
<p>currtnTime2:{{currtnTime2}}p>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:"hello,vue!"
},
methods:{
currtnTime1:function () {
return Date.now();
}
},
computed:{
currtnTime2:function () {
this.msg;
return Date.now();
}
}
});
script>
body>
html>
如果methods和computed中的自定义事件相同，优先调用methods中的，两者的不同：调用methods需要加（）而computed不用。computed的是属性，如果computed中的属性不变更，会一直存在在缓存中不变。
总结：
调用方法时，每次都需要讲行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢?此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这点，计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销；
7.插槽slot
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<todo>
<todo-title slot="todo-title" :title="title">todo-title>
<todo-item slot="todo-item" v-for="item in items" :item="item">todo-item>
todo>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
Vue.component("todo",{
template:'\
\
\
'
});
Vue.component("todo-title",{
props:['title'],
template:'{{title}}'
});
Vue.component("todo-item",{
props:['item'],
template:'{{item}} '
});
var vm=new Vue({
el:"#app",
data:{
title:"书籍列表",
items:['Java','Python','Vue']
}
});
script>
body>
html>
其中v-bing简写为：，slot类似于占位符，先占位后赋值，vue无法获取同级属性或参数，需要使用前端绑定参数，然后用props获取，实现mvvm模式
8.自定义分发事件
实现对插槽中的管理
通以上代码不难发现，数据项在Vue的实例中， 但删除操作要在组件中完成， 那么组件如何才能删除Vue实例中的数据呢?此时就涉及到参数传递与事件分发了， Vue为我们提供了自定义事件的功能很好的帮助我们解决了这个问题； 使用this.$emit(‘自定义事件名’， 参数) ， 操作过程如下：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<todo>
<todo-title slot="todo-title" :title="title">todo-title>
<todo-item slot="todo-item" v-for="(item,index) in items" :item="item" :index="index" v-on:remove="removeItems()">todo-item>
todo>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
Vue.component("todo",{
template:'\
\
\
'
});
Vue.component("todo-title",{
props:['title'],
template:'{{title}}'
});
Vue.component("todo-item",{
props:['item','index'],
template:'{{index}}-----{{item}} ',
methods: {
remove:function (index) {
this.$emit('remove',index);
}
}
});
var vm=new Vue({
el:"#app",
data:{
title:"书籍列表",
items:['Java','Python','Vue']
},
methods:{
removeItems:function (index) {
alert("删除了"+this.items[index]+"OK");
this.items.splice(index,1);
}
}
});
script>
body>
html>
如对vue的总结，调用方法也要通过桥梁，进行事件绑定后然后使用 this.$emit调用。
遵循SoC关注度分离原则，Vue是纯粹的视图框架，并不包含，比如Ajax之类的通信功能，为了解决通信问题，我们需要使用Axios框架做异步通信；
9.第一个vue-cli项目
安装node.js
下载 | Node.js 中文网 (nodejs.cn)
确认nodejs安装成功:
-
cmd 下输入
node -v,查看是否能够正确打印出版本号即可! -
cmd 下输入
npm-v,查看是否能够正确打印出版本号即可!
安装 Node.js 淘宝镜像加速器
npm install cnpm -g
提示错误，只需要运行一下绿字即可修复
若安装失败，则将源npm源换成淘宝镜像
npm config set registry https://registry.npm.taobao.org
然后再执行npm install cnpm -g
安装vue-cli
cnpm install vue-cli -g
查看版本vue list
创建一个vue应用程序
vue init webpack myvue
初始化
npm install
执行
npm run dev
10.Webpack
安装WebPack模块化打包工具
npm install webpack -g
npm install webpack-cli -g
检验是否成功
webpack -v
webpack-cli -v
创建modules包，再创建hello.js,hello.js 暴露接口 相当于Java中的类
//暴露一个方法
exports.sayHi=function () {
document.write("无双啊啊啊
>")
};
exports.sayHi2=function () {
document.write("无双2啊啊啊
>")
};
exports.sayHi3=function () {
document.write("无双3啊啊啊
>")
};
exports.sayHi4=function () {
document.write("无双4啊啊啊
>")
};
exports.sayHi5=function () {
document.write("无双5啊啊啊
>")
}
创建main.js 去require hello.js类似于java导入包生成对象，调用对象的方法
var hello=require("./hello");
hello.sayHi();
hello.sayHi2();
hello.sayHi3();
在主目录创建webpack-config.js , webpack-config.js 这个相当于webpack的配置文件
enrty请求main.js的文件
output是输出的位置和名字
module.exports={
entry:'./modules/main.js',
output:{
filename:"./js/boundle.js"
}
};
在idea命令台输入webpack命令（idea要设置管理员启动）
打包后
打包后创建index.html掉用
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<script src="dist/js/boundle.js">
script>
body>
html>
后边vue工程化打包出来同等调用
使用webpack --watch开启监听自动更新打包，实现热部署
11.vue-router路由
嵌套组件模块，包含功能
-
嵌套的路由/视图表
-
模块化的、基于组件的路由配置
-
路由参数、查询、通配符
-
基于Vue.js过渡系统的视图过渡效果
-
细粒度的导航控制
-
带有自动激活的CSS class的链接
-
HTML5历史模式或hash模式，在IE9中自动降级
-
自定义的滚动条行为
安装
npm install vue-router --save-dev
安装失败执行
cnpm install vue-router --save-dev
运行还是不行，查阅后，使用
npm install [email protected] --save-dev解决
在main.js中导入，并显示声明，以后 导包同理
import VueRouter from 'vue-router'
//显示声明
Vue.use(VueRouter);
创建router目录，路由总控制index.js，前端命名规则。index总控制
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:'main',
component: Main
}
]
})
配置路由类似@RequestMapping
Main.vue
首页
Content.vue
内容页
App.vue,调用路由
Vue-Router
首页
内容页
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: '效果
在这里index.js两个易错点：
- routes容易写成routers
- component容易写出compent
会造成路径对，router-view不显示
12.vue+Element-ui
创建工程
vue init webpack hello-vue
进入目录
cd hello-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
创建首页main.vue
首页
Login.vue
欢迎登录
登录
请输入账号和密码
创建路由
import Vue from 'vue';
import Router from 'vue-router'
import Main from '../views/main'
import Login from '../views/Login'
Vue.use(Router);
export default new Router({
routes:[
{
path:'/login',
conponent:Main
},
{
path:'/main',
conponent:Login
}
]
})
在main.js中调用
import Vue from 'vue'
import App from './App'
import router from './router'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(router);
Vue.use(Element);
new Vue({
el: '#app',
router,
render: h => h(App),//ElementUI规定这样使用
})
运行测试，报错
TypeError: this.getOptions is not a function
修改package.json下的
"sass-loader": "^7.3.1",
执行npm install不行就执行cnpm install
依旧不行
修改为
"sass-loader": "^4.0.0",
运行
13.嵌套路由
Profile.vue
个人信息
List.vue
用户列表
main.vue
用户管理
个人信息
用户列表
内容管理
分类管理
内容列表
系统管理
用户设置
个人信息
退出登录
使用children关键字
path:'/main',
component:Main,//嵌套路由
children:[
{
path:'/user/profile',
component:UserProfile
},
{
path:'/user/list',
component:UserList
}
]
},
展示页
14.参数传递
前端使用v-bind绑定值
个人信息
个人页使用props接收，接收的{{id}}需要在html标签内获取，否则报错，如果有多个参所则就在id后继续添加即可
个人信息
{{id}}
在index.js中开启props和路径赋值
path:'/user/profile/:id',
name: 'UserProfile',
component:UserProfile,
props:true
如果需要多个参所则就在id后继续添加即可
2.重定向
使用redirect，在index.js中添加、
path:'/gohome',
redirect:'/main'
15、路由钩子与异步请求
1.前端传参
login.vue中添加
this.$router.push("/main"+this.form.username);
转向main的时候携带参数
index.js中开启main的props
path:'/main:name',
component:Main,//嵌套路由
props:true,
main.vue取值
export default {
props:['name'],
name: "Main"
}
{{name}}
2.路由模式
-
hash：路径带 # 符号，如 http://localhost/#/login
-
history：路径不带 # 符号，如 http://localhost/login
修改路由
export default new Router({
mode:'history',)}
地址变为http://localhost:8080/login
3.404
编写NotFound.vue
404,你的页面走丢了
在index.js注册路由,除了能找到的请求外，所有请求都执行
import NotFound from "../views/NotFound"
{
path:'*',
component:NotFound,
}
4.路由钩子与异步请求
在profile中添加
//过滤器 chaxin
beforeRouteEnter:(to,from,next)=>{
console.log("进入路由前");
next();
},
beforeRouteLeave:(to,from,next)=>{
console.log("进入路由后");
next();
}
类似java的过滤器，to类似于request，next类似于chaxin，让程序继续执行
参数说明:
-
to：路由将要跳转的路径信息
-
from：路径跳转前的路径信息
-
next：路由的控制参数
-
next() 跳入下一个页面
-
next(’/path’) 改变路由的跳转方向，使其跳到另一个路由
-
next(false) 返回原来的页面
-
next((vm)=>{}) 仅在 beforeRouteEnter 中可用，vm 是组件实例
5.使用异步请求
安装 Axios
cnpm install --save vue-axios
main.js引用 Axios
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(axios,VueAxios);
npm install --save axios
Profile.vue添加钩子函数
取用如下：
个人信息
姓名：{{info.name}}
地址:{{info.address.city}}
使用data（）接收，再用.then(response=>(this.info=(response.data)))赋值
使用{{属性名}}接收，效果图
