Vue
1、Vue概述
Vue.js 的 API 是参考了AngularJS、KnockoutJS、Ractive.js、Rivets.js。x
特点:
- 只做视图层
- 网络通信axios
- 网络跳转:vue-router
- 状态管理:vuex
2、前端框架
-
JavaScript框架JQuery
-
Angular js:Google收购的前端框架
-
React:facebook出品,一款高性能的JS前端框架,【需要额外学习JSX语言】
-
Vue:一款渐进式JavaScript框架,其特点综合Angular(模块化)和React(虚拟DOM)的优点
-
Axios:前端通信框架;因为Vue的边界很明确,就是为了处理DOM,所以并不具备通信能力
vue-element-admin前端框架熟练
MVVM【异步通信前端】
3、MVVM
Model-View-ModelView—>源于MVC
View:视图层
ViewModel:
-
连接视图和数据的中间件
-
能够观察到数据的变化,并对视图类容进行更新
-
能够监听到视图的变化,并能够通知数据发生改变
3.1 为什么使用MVVM
- 低耦合
- 可复用
- 独立开发
- 可测试
4、vue程序
idea安装vue.js插件
官网下载vue.js
5、if判断
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>导入vue.js</title>
</head>
<body>
<!--view视图层 模板-->
<div id="app">
<!--if语句条件判断-->
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
<h1 v-bind:title="message">鼠标悬浮显示message</h1>
<!--if else if else-->
<h1 v-if="type==='A'">A</h1>
<h1 v-else-if="type==='B'">B</h1>
<h1 v-else>C</h1>
<!--数组遍历-->
<h1 v-for="(item,index) in items">
{{item.msg}}---{{index}}
</h1>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
//Model:数据
data:{
message: "hello vue",
ok: true,
type: 'A',
items: [
{msg: 'lsx'},
{msg: 'carter'},
{msg: '廖述幸'}
]
}
});
</script>
</body>
</html>
6、点击事件绑定
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button v-on:click="sayHello">Click me</button>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<!--此处的</script>不能省略-->
<script>
var vm = new Vue({
el: "#app",
data: {
message: "廖述幸"
},
methods: {//方法必须定义到Vue 的Method对象中
sayHello: function (event) {
alert(this.message);
}
}
});
</script>
</body>
</html>
7、双向绑定
- 输入框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--双向监听功能-->
输入:<input type="text" v-model="message"> {{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "123"
}
});
</script>
</body>
</html>
- 复选框+下拉框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--单选框-->
性别:
<input type="radio" name="sex" value="男" v-model="beChecked">男
<input type="radio" name="sex" value="女" v-model="beChecked">女
<br>
<span>
选中了:{{beChecked}}
</span>
<br>
<!--表单双向绑定-->
<select v-model="selected">
<!--预留项-->
<option disabled value="">==请选择==</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>
选中了:{{selected}}
</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
new Vue({
el: "#app",
data: {
beChecked: "",
selected: ""
}
});
</script>
</body>
</html>
8、自定义组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--carter是自定义的组件-->
<carter v-for="item in items" v-bind:value="item.message"></carter>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
//carter是标签
Vue.component("carter",{
props: ['value'],//value是bind值
template: '<li>{{value}}</li>'
});
new Vue({
el: "#app",
data:{
items: [
{message: "廖述幸"},
{message: "唐润之"},
{message: "陈涛"},
{message: "姜帅"}
]
}
})
</script>
</body>
</html>
9、JQuery的缺点
需要频繁访问DOM
10、Axios代替JQuery.Ajax()通信
- 数据通信
- 数据渲染
11、插槽slot
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--slot插槽-->
<todo>
<todo-title slot="todo-title" :title="title"></todo-title>
<todo-items slot="todo-items" v-for="(item,index) in items" :item="item.message" :index="index"></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-items"></slot>\
</ul>\
</div>'
});
//标题组件
Vue.component("todo-title",{
props: ['title'],
template: '<div>{{title}}</div>'
});
//内容组件
Vue.component("todo-items",{
props: ['item','index'],
template: '<li>{{item}}--{{index}}</li>'
});
new Vue({
el: "#app",
data:{
title: "书籍列表",
items: [
{message: "廖述幸"},
{message: "唐润之"},
{message: "陈涛"},
{message: "姜帅"}
]
}
})
</script>
</body>
</html>
后端无法干预前端工作
12、前端删除工作
- 删除按钮在组件中
- 删除Vue中数据
组件<----->前端<----->Vue实例
组件无法直接调用实例中的删除,只能通过前端中间介
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--slot插槽-->
<todo>
<todo-title slot="todo-title" :title="title"></todo-title>
<todo-items slot="todo-items" v-for="(item,index) in items"
:item="item.message" :index="index" v-on:remove="removeItem(index)" v-bind:key="index"></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-items"></slot>\
</ul>\
</div>'
});
//标题组件
Vue.component("todo-title",{
props: ['title'],
template: '<div>{{title}}</div>'
});
//内容组件
Vue.component("todo-items",{
props: ['item','index'],
template: '<li>{{item}} <button v-on:click="remove">删除</button> ---{{index+1}}</li>',
methods: {
remove: function (index) {
//this.$emit 自定义事件发布
this.$emit('remove',index);
}
}
});
new Vue({
el: "#app",
data:{
title: "书籍列表",
items: [
{message: "廖述幸"},
{message: "唐润之"},
{message: "陈涛"},
{message: "姜帅"}
]
},
methods: {
removeItem: function (index) {
//删除下标index,删除1个
this.items.splice(index,1);
}
}
})
</script>
</body>
</html>
书籍列表
- 廖述幸 删除 —1
- 唐润之 删除 —2
- 陈涛 删除 —3
- 姜帅 删除 —4
13、总结
13.1 常用属性
- v-if
v-if="type==='A'"
- v-else-if
v-else-if="type==='B'"
- v-else
- v-for
v-for="(item,index) in items" :item="item.message" :index="index"
- v-on 绑定事件 ,简写==@==
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
v-on:remove="removeItem(index)"//自定义remove方法--->来自Vue实例的删除方法
- v-model 数据双向绑定
- v-bind 给组件绑定参数,简写==:==
14、安装NodeCli脚手架
http://nodejs.cn/download/
安装步骤下一步即可
C:\Users\海角天涯S>node -v
v14.14.0
C:\Users\海角天涯S>npm -v
6.14.8
- 安装淘宝镜像加速器(cnpm)
npm install cnpm -g //执行此命令安装
- 安装Vue-cli
cnpm install vue-cli -g
deprecate:是正常
C:\Users\海角天涯S>vue list //查看可创建的模板
Available official templates:
★ browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
★ browserify-simple - A simple Browserify + vueify setup for quick prototyping.
★ pwa - PWA template for vue-cli based on the webpack template
★ simple - The simplest possible Vue setup in a single HTML file
★ webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
★ webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.
15、创建Vue项目
- 到文件夹下cmd
vue init webpack myvue//myvue是项目名
- 进入myvue中
cd myvue
- 执行下载依赖
npm install
- 执行报错
npm audit fix//这是它自己出现的提示命令
- NodeJS启动项目
npm run dev
- 停止
ctrl + c
- 然后去idea打开myvue
2. 安装webpack
npm install webpack -g
16、项目与vue
1、创建一个名为hello-vue的工程
vue init webpack hello-vue
2、安装依赖,我们需要安装vue-router、element-ui、sass-loader和node-sass 四个插件
# 进入工程
cd hello-vue
# 安装vue-router
npm install vue-router --save-dev
# 安装element-ui
npmi element-ui -S
# 安装依赖
npm install
# 安装 SASS 加载器
cnpm install sass-loader node-sass --save-dev
# 启动测试
npm run dev
- 执行报错
npm audit fix//这是它自己出现的提示命令
- NodeJS启动项目
npm run dev
- 停止
ctrl + c
- 然后去idea打开myvue
2. 安装webpack
npm install webpack -g
16、项目与vue
1、创建一个名为hello-vue的工程
vue init webpack hello-vue
2、安装依赖,我们需要安装vue-router、element-ui、sass-loader和node-sass 四个插件
# 进入工程
cd hello-vue
# 安装vue-router
npm install vue-router --save-dev
# 安装element-ui
npmi element-ui -S
# 安装依赖
npm install
# 安装 SASS 加载器
cnpm install sass-loader node-sass --save-dev
# 启动测试
npm run dev