Vue
本笔记由 b站狂神说java 视频获取
Angular: Google 收购的前端框架,由一群Java程序员开发,其特点是将后台的 MVC模式搬到了前端并增加了模块化开发的理念,与微软合作,采用TypeScript语法开发;对后台程序员友好,对前端程序员不太友好;最大的缺点是版本迭代不合理(如:1代->2代,除了名字,基本就是两个东西;截止发表博客时已推出了Angular6)
React: Facebook出品,一款高性能的JS前端框架;特点是提出了新概念**【虚拟DOM】**用于减少真实DOM操作,在内存中模拟DOM操作,有效的提升了前端渲染效率;缺点是使用复杂,因为需要额外学习—门【SX】语言;
Vue :一款渐进式JavaScript框架,所谓渐进式就是逐步实现新特性的意思,如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular(模块化)和React(虚拟DOM)的优点;
第一个vue程序
MVVM的实现者
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
{{message}}
</div>
<!-- 导入vue -->
<script src="https://lib.baomitu.com/vue/2.6.14/vue.common.dev.js"></script>
<script>
var vm=new Vue({
el: "#app",
//Model :数据
data:{
message: "hello,vue!"
}
});
</script>
</body>
</html>
可以直接F12直接修改 vm.message=“修改后的数据” 直接呈现在页面上
至此,我们就明白了,Vue.js 就是一个MVVM的实现者,他的核心就是实现了DOM监听与数据绑定
Vue基本语法
V-Bind
<body>
<!--view层 模板-->
<div id="app">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息!
</span>
</div>
<!-- 导入vue -->
<script src="https://lib.baomitu.com/vue/2.6.14/vue.common.dev.js"></script>
<script>
var vm=new Vue({
el: "#app",
//Model :数据
data:{
message: "hello,vue!"
}
});
</script>
</body>
v-if
<body>
<div id="app">
<h1 v-if="flag">Yes</h1>
<h1 v-else>No</h1>
</div>
<!-- 导入vue -->
<script src="https://lib.baomitu.com/vue/2.6.14/vue.common.dev.js"></script>
<script>
var vm=new Vue({
el: "#app",
data: {
flag :true
}
});
</script>
</body>
v-for
<body>
<div id="app">
<li v-for="item in items">
{{item.message}}
</li>
</div>
<!-- 导入vue -->
<script src="https://lib.baomitu.com/vue/2.6.14/vue.common.dev.js"></script>
<script>
var vm=new Vue({
el: "#app",
data: {
items :[
{message : "狂神说java"},
{message : "狂神说前端"}
]
}
});
</script>
</body>
vue绑定事件
v-on
<body>
<div id="app">
<button v-on:click="sayHi">click</button>
</div>
<!-- 导入vue -->
<script src="https://lib.baomitu.com/vue/2.6.14/vue.common.dev.js"></script>
<script>
var vm=new Vue({
el: "#app",
data: {
message : "狂神说java"
},
methods : { //方法必须定义在vue的Method对象中,v-on事件
sayHi :function () {
alert(this.message);
}
}
});
</script>
</body>
vue双向绑定
v-model
<body>
<div id="app">
<!--输入的文本: <input type="text" v-model="message"> {{message}}-->
<!-- <textarea name="" id="" cols="30" rows="10" v-model="message"></textarea> {{message}}-->
<!-- <input type="radio" name="sex" value="男" v-model="checked"> 男
<input type="radio" name="sex" value="女" v-model="checked"> 女
<p>
选中了谁 : {{checked}}
</p> -->
下拉框 :
<select v-model="selected">
<option disabled value="">--请选择--</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>选中的是 : {{selected}}</span>
</div>
<script src="https://lib.baomitu.com/vue/2.6.14/vue.common.dev.js"></script>
<script>
var vm=new Vue({
el: "#app",
data: {
// message : "123"
// checked:''
selected : ''
}
});
</script>
</body>
Vue组件讲解
component
<body>
<div id="app">
<qinjiang v-for="item in items" v-bind:qin="item"></qinjiang>
</div>
<script src="https://lib.baomitu.com/vue/2.6.14/vue.common.dev.js"></script>
<script>
//定义一个vue组件component
Vue.component("qinjiang",{
props: ['qin'],
template: '<li> {{qin}} </li>'
});
var vm=new Vue({
el: "#app",
data: {
items: ["java","linux","前端"]
}
});
</script>
</body>
Axios异步通信
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="vue" v-cloak>
<div>{{info.name}}</div>
<div>{{info.address.street}}</div>
<a v-bind:href="info.url">点我</a>
</div>
<!-- 导入vue js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script type="text/javascript">
var vm=new Vue({
el: "#vue",
//data 属性
data(){
return{
//请求的返回参数必须和json字符串一样
info:{
name:null,
address:{
street:null,
city:null,
country:null
},
url:null
}
}
},
mounted(){//钩子函数
axios.get('data.json').then(response=>(console.log(response.data)));
}
});
</script>
</body>
</html>
计算属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>currentTime1: {{currentTime1()}}</p>
<p>currentTime2: {{currentTime2}}</p>
</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:"hello vue!"
},
methods :{
currentTime1:function () {
return Date.now();//返回一个时间戳
}
},
computed :{ //计算属性:method computed方法名不能重名,重名之后,调用method的方法
currentTime2:function () {
this.message;
return Date.now();
}
}
});
</script>
</body>
</html>
结论:
调用方法时,每次都需要进行计算,既然有计算过程则必定产生系统开销,那如果这个结果是不经常变化的呢?此时就可以考虑将这个结果缓存起来,采用计算属性可以很方便的做到这一点,计算属性的主要特性就是为了将不经常变化的计算结果进行缓存,以节约我们的系统开销;
插槽slot
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<todo>
<todo-title slot="todo-title" :title="title"></todo-title>
<todo-items slot="todo-items"v-for="item in todoItems" :item="item"></todo-items>
</todo>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/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}}</li>'
});
var vm=new Vue({
el: "#app",
data: {
title:"课程",
todoItems:["java","linux","jquery"]
}
});
</script>
</body>
</html>
第一个vue-cli项目
node -v
npm -v
npm install cnpm -g
安装的位置 c:user/administrator/appData/Roaming/npm 隐藏文件打开
安装vue-cli
cnpm install vue-cli -g
vue list
vue init webpack myvue
cd myvue
npm install
npm rum dev
webpack学习使用
npm install webpack -g
npm install webpack-cli -g
测试安装成功
webpack -v
webpack-cli -v
使用webpack
1.创建项目
2.创建一个名为modules的目录,用于放置JS模块等资源文件
3.在modules下创建模块文件,如hello.js,用于编写JS模块相关代码
//暴露一个方法:sayHi
export.sayHi=function(){
document.write("<div>hello webpack </div>");
};
4.在modules下创建一个名为main.js 的入口文件,用于打包时设置entry 属性
//require导入一个模块,就可以调用这个模块中的方法了
var hello = 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文件
<body>
<script src="dist/js/bundle.js"></script>
</body>
7.在IDEA控制台中直接执行webpack;如果失败的话,就使用管理员权限运行即可!
8.运行HTML看效果
vue-router路由
#安装
npm install vue-router --save-dev
测试
1、先删除没有用的东西
2、components
目录下存放我们自己编写的组件
3、定义一个content.vue
的组件
<template>
<div>
<h1>内容页</h1>
</div>
</template>
<script>
export default {
name : "Content"
}
</script>
4.安装路由,在src目录下,新建一个文件夹:router
,专门存放路由
5.在main.js
中配置路由
6.在App.vue
中使用路由
vue+elementUI
1.cmd
vue init webpack hello-vue
一路no
#进入工程目录
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
#有错就修复
3.idea open
4.创建首页视图,在views目录下创建一个名为Main.vue 的视图组件;
创建登录页视图在views目录下创建一个名为Login.vue的视图组件,其中el-*的元素为ElementUI组件;
elementUI链接地址 https://element.eleme.cn/#/zh-CN/component/drawer
代码是拷贝的
5.index.js
6.main.js
7.记得把sass的版本8.0.0 降低 为 7.3.1 npm install 或 cnpm install
8.app.vue
9.npm run dev
10.访问
嵌套路由
参数传递及重定向
404与 路由钩子
修改路由配置,代码如下
404
创建一个名为NotFound.vue
的视图组件,代码如下
修改路由配置,代码如下
这样就可以了~
路由钩子
本笔记知识较浅,要在专门学习~