目录
1：简介
2：基本语法
需要导入：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
2.1：第一个程序（重要）
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE HTML>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>kuangshen</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script >
var vm=new Vue({
el:"#app",
data:{
message:"hello,vue"
}
});
</script>
</body>
</html>console绑定前端页面数据，当其发生变化时候，前端也发生变化
2.2：v-bind:
v-开头表示指令，bind表示绑定 ；形式v-bind：
在文字悬停后，会显示message的数据
<div id="app">
<span v-bind:title="message">
鼠标悬停查看动态绑定的信息
</span>
</div>
<script >
var vm=new Vue({
el:"#app",
data:{
message:"hello,vue"
}
});2.3：判断 v-if，v-else-if，v-else
<div id="app">
<h1 v-if="type==='A'">A</h1>
<h1 v-else-if="type==='B'">B</h1>
<h1 v-else>C</h1>
</div>
<script >
var vm=new Vue({
el:"#app",
data:{
type:'A'
}
});
</script>
2.4：循环 v-for
<div id="app">
<li v-for="item in items">
{{item.message}}
</li>
</div>
<script >
var vm=new Vue({
el:"#app",
data:{
items:[
{message: '张三'},
{message: '李四'},
{message: '王五'},
]
}
});
2.5：事件指令v-on（重点）
各种指令，比如鼠标事件，键盘事件，表单事件，事件对象，文档加载，浏览器事件
<div id="app">
<button v-on:click="sayHi"> click me </button>
</div>
<script >
var vm=new Vue({
el:"#app",
data:{
message:"hello"
},
methods:{
sayHi : function(){
alert(this.message);
}
}
});
</script>
2.6：双向绑定 v-medol
输入框发生改变的时候，message也发生改变。
message发生改变的时，候输入框也发生改变。
<div id="app">
输入的文本：<input type="text" v-model="message">{{message}}
</div>
<script >
var vm=new Vue({
el:"#app",
data:{
message:"123"
}
});
</script>
<div id="app">
性别：
<input type="radio" name="sex" value="男" v-model="sex">🚹
<input type="radio" name="sex" value="女" v-model="sex">🚺
<br>
选择：{{sex}}
</div>
<script >
var vm=new Vue({
el:"#app",
data:{
sex:""
}
});
</script>
<div id="app">
下拉框：
<select v-model="select">
<option value="" disabled>--请选择--</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
选中：{{select}}
</div>
<script >
var vm=new Vue({
el:"#app",
data:{
select:""
}
});
</script>
2.7：vue组件
相当于一个自定义标签：<mycomponent></mycomponent>会输出<p>hello,这是一个组件</p>
<div id="app">
<mycomponent></mycomponent>
</div>
<script >
Vue.component("mycomponent",{
template:"<p>hello,这是一个组件</p>"
});
</script><div id="app">
<mycomponent v-for="subjects in items" v-bind:course="subjects"></mycomponent>
</div>
<script >
Vue.component("mycomponent",{
props:['course'],
template:'<p> {{course}} </p>'
});
var vm=new Vue({
el:"#app",
data:{
items:["java","Linux","Vue"]
}
});
</script>
2.8：Axios异步通信（重点）
需要引入Axios的cdn，或者下载成为本地静态资源。
vscode平台跨域问题：以live server 方式打开
Json：
{ "dataName":"userlist",
"url":"https://www.bilibili.com/",
"book":{"one":"哈利波特","tow":"悟空传"},
"user":[{"name":"admin","age":18},{"name":"root","age":16},{"name":"张三","age":20}]
}html：
<div id="vue" >
<div>{{info.dataName}}</div>
<div>{{info.book.one}}</div>
<div>{{info.user[1].name}}</div>
<div><a v-bind:href="info.url">点击</a></div>
</div>
<script>
var vm=new Vue({
el:"#vue",
data:{
info:{
dataName:null,
url:null,
book:{
one:null,
two:null
},
user:[]
}
},
mounted(){//钩子函数 this.msg=response.data
axios.get('/data.json').then(response=>(this.info=response.data,console.log(this.info)));
}
});
</script>2.9：计算属性
计算出来的结果缓存在属性中，以节约系统开销。
computed：方法的调用不需要（）
<div id="vue" >
<p>{{currentTime1()}}</p>
<p>{{currentTime2}}</p>
</div>
<script>
var vm=new Vue({
el:"#vue",
data:{
message:"hello"
},
methods: {
currentTime1 :function() {
return Date.now();
}
},
computed: {
currentTime2 :function() {
return Date.now();
}
}
});
</script>2.10：插槽 <slot>（重难点）
承载内容分发的出口
<body>
<div id="vue">
<todo>
<todo-title slot="todo-title" v-bind:title="title"></todo-title>
<todo-items slot="todo-items" v-for="item in todoItems" v-bind:item="item"></todo-items>
</todo>
</div>
<script>
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: "<p>{{title}}</p>"
});
Vue.component("todo-items",{
props:["item"],
template: "<li>{{item}}</li>"
});
var vm = new Vue({
el:'#vue',
data:{
title:"haoyun",
todoItems:["spring","springMVC","mybatis"],
}
});
</script>
</body>
</html>
3：vue-cli脚手架配置
作用：
1.统一目录结构
2.本地调试
3.热部署
4.单元测试
5.集成打包上线
3.1:环境配置
node.js;Git
1.下载node.js官网下载安装包，无脑安装
3.2：测试是否安装成功
node -v
npm - v（npm是一个软件包管理工具）
3.3：安装加速器cnpm(淘宝)
npm install cnpm -g g是全局安装
npm install --registry=https：//resgistry.npm.taobao.org
3.4：安装vue-cli
cnpm install vue-cli -g
vue -list查看是否安装成功-
3.5：创建项目
输入：vue create myvue（项目名）
4：路由（重要）
4.1：安装
npm install vue-router@3 --save
@3 对应 Vue2
@4 对应 Vue3
//引入路由
import VueRouter from 'vue-router'
// 引入路由器
import router from './router/index'
//应用路由
Vue.use(VueRouter)
4.2：快速入门
new VueRouter 创建路由管理
routes[] （多个）路由
path:'/About', 路由路径
component:About, 组件名
形式：
{
name："About",
path:'/About',
component:About,
}
在router-link中，几种绑定to属性的方式向组件传递数据
1.仅字符串，无数据传入
<router-link class="list-group-item " active-class="active" to="/Home">Home</router-link>
2.绑定对象：无数据参入
<router-link :to="{path:'/user'}"></router-link>
<router-link :to=“{name:‘customer’}”></router-link> ---名称不要带斜杠！！！
3.使用命名的路由 ，传递数据
<router-link :to="{name:'customer',params: { userId: '123' }}"></router-link>
4.使用路径和查询参数传递数据，如 ： /user?userId=123
<router-link :to="{path:'/user',query: { userId: '123' }}"></router-link>
5.<router-view></router-view>
组件想要展示必须得加
路由嵌套
children:
[
{
path: '/Message',
name:'Message',
component: Message
}
]
4.3：路由守卫
5：消息订阅与发布
5.1：下载库
npm i pubsub-js@1.6.0 下载pubsub-js库 @1.6.0版本号
5.2：基本使用
PubSub.publish（"消息名"，数据）：发布消息，传输数据
PubSub.subscribe（“消息名”，function(megName,data){
（megName：方法名；data数据）
}）：订阅消息，用于接收数据
PubSub.unsubscribe(“订阅方法名”)：用于销毁订阅
6：axios（重要）
6.1：安装
npm i axios 安装axios
6.2：简单入门（跨域->代理）：前后端完全分离了
跨域报错：出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）
解决方法之一：代理
devServer:{
proxy:"http://localhost:8087"
}
解决跨域：vue.config.js配置代理
代理原理：代理解决跨域问题可以为proxy虚拟了协议、域名、端口和浏览器与服务器一致。
6.3：代理方式二
devServer:{
proxy:{
'/gettime':{
target:'http://localhost:8087',
pathRewrite:{'^/gettime':''}
// ws:true,
// changeorigin:true //用于支持webSocket
}
}
}
7：Vuex
7.1：Vuex概念
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。
7.2：Vuex安装
vuex@3 对应 vue2
vuex@4 对应 vue3
npm i vuex@3
7.3：快速简单入门
7.3.1:Vuex数据共享实现原理
store管理Action，Mutations，state等：
Action：用于组件的动作
Mutations：用于操作数据
state：用于存放数据
getters：用于加工数据;相当于computed属性
7.3.2：store：
//用于创建vuex的store
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//用于组件的动作
const actions={
jia(context,value){
console.log("actions中jia被掉用;",value)
console.log("context:",context)
context.commit('Jia',value)
},
jian(context,value){
console.log("actions中jian被掉用;",value)
context.commit('Jian',value)
}
}
// 用于操作数据
const mutations={
Jia(state,value){
console.log("mutations中Jia被调用")
state.sum+=value
console.log(state.sum)
},
Jian(state,value){
console.log("mutations中Jian被调用")
state.sum-=value
}
}
// 用于存储数据
const state={
sum:0,
school:'珠海科技学院',
subject:'软件工程'
}
//用于加工数据;相当于computed属性
const getters={
bigSum(state){
return state.sum*10-1;
}
}
const store =new Vuex.Store({
actions:actions,
mutations:mutations,
state:state,
getters:getters
})
export default store7.3.3：map
<template>
<!-- 组件结构 -->
<div class="demo">
<h1>学校：{{school}},专业：{{subject}}</h1>
<h1>sum:{{$store.state.sum}};sum计算后:{{bigSum}}</h1>
<button @click="jianjian(1)">减一</button>
</div>
</template>
<script>
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex';
export default{
name:'School',
methods:{
// jianjian(){
//value的值使用map方法配置的时候需要再方法上写值
// this.$store.dispatch('jian',1)
// },
//优化方法
// ...mapActions({jianjian:'jian'}),
...mapMutations({jianjian:'Jian'}),
},
computed:{
//计算属性优化
// 方法1：
// xuexiao(){
// return this.$store.state.school
// },
// kemu(){
// return this.$store.state.subject
// }
// bigSum(){
// return this.$store.getters.bigSum;
// },
// ...mapState({'xuexiao':'school','kemu':'subject'}),
// 放法2：
school(){
return this.$store.state.school
},
subject(){
return this.$store.state.subject
},
...mapState(['school','subject']),
...mapGetters(['bigSum'])
},
mounted() {
},
}
</script>
<style>
/* 样式 */
.demo{
background-color:orange;
}
</style>
7.3.4：模块化
//--------------模块化
const schoolInfo={
actions:{},
mutations:{},
state:{},
getters:{}
},
const countInfo={
actions:{
jia(context,value){
console.log("actions中jia被掉用;",value)
console.log("context:",context)
context.commit('Jia',value)
}
},
mutations:{},
state:{},
getters:{},
}
const store =new Vuex.Store({
modules:{
AboutCount:countInfo,
AboutSchool:countInfo,
}
})8：webScoket
Websocket是一个持久化的协议，HTTP协议是一种请求->响应协议。
想使用webScoket协议，需要先下载：
npm i webscoket
8.1：服务端代码
var Websocket = require('websocket').server
var http=require('http')
//listen(端口,function(){}) 开启服务器的端口，并且监听。客户端会请求这个端口
var httpServer =http.createServer().listen(9090,function(){
console.log("localhost:9090")
})
var wsServer =new Websocket({
httpServer:httpServer,
autoAcceptConnections:false,
})
var conArr=[]
//监听客户端发来的请求
wsServer.on('request',function(request){
//客户端每请求一次服务器都会建立一个连接，（当网页刷新或者关闭的时候连接关闭）
var connection=request.accept();
//将建立的连接放在数组
conArr.push(connection)
//connection.on(),
connection.on('message',function(msg){
console.log(msg);
for(let i=0;i<conArr.length;i++){
//连接的send()方法，用于向客户端发送消息
conArr[i].send(msg.utf8Data)
}
})
})8.2:客户端代码
<template lang="">
<div>
<input type="text" v-model="msg"></input>
<input type="button" @click="send" value="发送" ></input>
</div>
</template>
<script>
import axios from 'axios';
import Vue from 'vue';
//引入 websocket 插件并且使用
import websocket from 'websocket';
Vue.use(websocket)
//创建webscoket并且连接到ws://127.0.0.1:9090 这个端口
var webscoket=new WebSocket('ws://127.0.0.1:9090')
//查看连接状态
webscoket.onopen=function(){
console.log(webscoket.readyState)
}
//保持连接的开启，接收服务端发送过来的信息
webscoket.onmessage=function(backmessage){
console.log(backmessage)
console.log(backmessage.data)
}
export default {
name:'App',
data(){
return{
msg:''
}
},
methods:{
send(){
console.log("send被调用")
//webscoket.send()向服务端发送消息
webscoket.send(this.msg)
}
},
}
</script>
<style lang="">
</style>