vue 狂神教程学习 笔记
Posted wei198621
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 狂神教程学习 笔记相关的知识,希望对你有一定的参考价值。
简介及目录
vue 狂神教程学习 6个小时
【狂神说Java】Vue最新快速上手教程通俗易懂
https://www.bilibili.com/video/BV18E411a7mC?p=1
狂神说视频学习代码git地址:
https://github.com/wei198621/front_vue_kuangshen
P0前言:回顾SSM阶段 25:58
P1、前端核心分析 22:16
P2、前端发展史 21:39
P3、第一个Vue程序 21:52
P4、Vue基本语法 12:22
P5、Vue绑定事件 09:57
P6、Vue双向绑定 12:52
P7、Vue组件讲解 11:56
P8、Axios异步通信 24:53
P9、计算属性 09:53
P10、插槽slot 17:46
P11、自定义事件内容分发 27:48
P12、第一个vue-cli程序 32:19
P13、webpack学习使用 29:11
P14、vue-router路由 28:50
P15、vue+elementUI 36:01
P16、路由嵌套 09:52
P17、参数传递及重定向 15:19
P18、404和路由钩子 22:23
C:\\Users\\wei19>cnpm install vue-cli -g
P0前言:回顾SSM阶段 25:58
SSM 知识点,与VUE无关
P1、前端核心分析 22:16
网络通信: axios
页面跳转: vue-router
状态管理: vuex
P2、前端发展史 21:39
UI框架:
----Ant-Design:阿里巴巴出品,基于React 的UI框架
----ElementUl、iview、ice:饿了么出品,基于Vue 的 UI框架
----Bootstrap: Twitter推出的一个用于前端开发的开源工具包
----AmazeUl:又叫“妹子UI”,一款html5跨屏前端框架 (20210504不可用)
Vue-UI: --------https://ice.work/
less中文网: ------------- http://lesscss.cn
vue 官网 ------------- https://cn.vuejs.org/
iview:(一套基于 Vue.js 的高质量 UI 组件库)
iview官网: ------------- https://www.iviewui.com
elementUI: (Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库)
elementUI官网: ------------- https://element.eleme.cn/#/zh-CN
vue-element-admin: 狂神教学vue框架 (貌似打开不了网站,有些尴尬)
https://panjiachen.github.io/vue-element-admin-site/zh/
异步通信框架Axios GitHub: https://github.com/axios/axios
异步通信框架Axios 中文文档: http://www.axios-js.com/
vue生命周期图示:
https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA
Vue.js 就是一个MVVM的实现者,他的核心就是实现了DOM监听与数据绑定。
javascript构建工具
---- Babel:JS编译工具,主要用于浏览器不支持的ES 新特性,比如用于编译TypeScript
---- WebPack:模块打包器,主要作用是打包、压缩、合并及按序加载
P3、第一个Vue程序 21:52
Vue (读音/vju1,类似于view)是一套用于构建用户界面的渐进式框架,发布于2014年2月。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库(如: vue-router,vue-resource,vuex)或既有项目整合。
vue优点
吸收了Angular(模块化)和React(虚拟DOM)的长处,
vue不支持IE8及以下版本,因为VUE使用了ECMAScript5
vue 开发工具
VsCode
Hbuilder
Sublime
WebStorm
IDEA 作为开发VUE工具
需要安装 VUE.js 插件
vue 包下载地址
·包含完整的警告和调试模式: https://vuejs.org/js/vue.js
·删除了警告,30.96RB min + gzip: https://vuejs.org/js/vue.min.js
< script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js "></ script>
< script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js "></ script>
vue 787 知识点:
学习vue我们必须之到它的7个属性,8个 方法,以及7个指令。787原则
el属性
用来指示vue编译器从什么地方开始解析 vue的语法,可以说是一个占位符。
data属性
用来组织从view中抽象出来的属性,可以说将视图的数据抽象出来存放在data中。
template属性
用来设置模板,会替换页面元素,包括占位符。
methods属性
放置页面中的业务逻辑,js方法一般都放置在methods中
render属性
创建真正的Virtual Dom
computed属性
用来计算
watch属性
watch:function(new,old){}
监听data中数据的变化
两个参数,一个返回新值,一个返回旧值,
IDEA 开发第一个VUE程序
安装IDEA Vue.js插件
2 新建空文件夹 vue-first
3 新建一个最简单的vue html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view层-->
<div id="app">
{{ message }}
</div>
<!--导入VUE.JS-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js "></script>
<script>
// model 层
var vmdata={
message: "abc",
}
// ViewModel 层
var vm=new Vue({
el:"#app",
data:vmdata,
})
</script>
</body>
</html>
通过如下三种方式都可以实现修改数据,让view层页面改变的目的
vm.$data.message="abc1"
"abc1"
vm.message="abc2"
"abc2"
vmdata.message="abc3";
"abc3"
P4、Vue基本语法 12:22
Vue 指令
https://cn.vuejs.org/v2/api/#%E6%8C%87%E4%BB%A4
v-text
v-html
v-show
v-if
v-else
v-else-if
v-for
v-on
v-bind
v-model
v-slot
v-pre
v-cloak
v-once
el: v-bind:
data: v-if v-else v-else-if
methods: v-on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view层-->
<div id="app">
<div v-for="item in items">
---{{ item.key}}----{{ item.message }}---{{ item.name}}----
</div>
</div>
<!--导入VUE.JS-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js "></script>
<script>
// model 层
var vmdata={
items : [
{message: "this is one ",name : "name1",key:"key1"},
{message: "this is two ",name : "name2",key:"key2"},
{message: "this is three ",name : "name3",key:"key3"},
{message: "this is four ",name : "name4",key:"key4"},
]
}
// ViewModel 层
var vm=new Vue({
el:"#app",
data:vmdata,
})
</script>
</body>
</html>
P5、Vue绑定事件 09:57
P6、Vue双向绑定 12:52
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view层-->
<div id="app">
<br>
<!--input radio 使用v-model的时候,会将 value的值 传递给 v-model 绑定的 model 层对象 -->
<input type="radio" name="sex" value="男" v-model="radioChecked" > 男
<input type="radio" name="sex" value="女" v-model="radioChecked"> 女
radio checked:{{ radioChecked }}
<hr>
<!--select 标准示例 注意第一项 disabled -->
<select v-model="selectValue">
<option value="" disabled>==请选择==</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
select value is {{ selectValue }}
</div>
<!--导入VUE.JS-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js "></script>
<script>
// model 层
var vmdata={
message: "abc",
radioChecked: "",
selectValue: "",
}
// ViewModel 层
var vm=new Vue({
el:"#app",
data:vmdata,
})
</script>
</body>
</html>
P7、Vue组件讲解 11:56
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view层-->
<div id="app">
<!--最基本的v-for 语句 -->
<div v-for="(item, index) in items">
{{ index }}---- {{ item }}
</div>
<hr>
<hr>
<hr>
<!--自定义控件 first-vue-component 将字符串myHeader1 传递给 header1 属性 props -->
<first-vue-component header1="myHeader1"></first-vue-component>
<hr>
<!--自定义控件 first-vue-component 将字符串tempHeader的值(headerTest) 传递给 header1 属性 props -->
<first-vue-component v-bind:header1="tempHeader"></first-vue-component>
<!--比较上面两个赋值,发现,如果直接给属性赋值,等于号后面的作为字符串处理-->
<!--如果 使用v-bind: 给某个属性赋值, 等于号后面的作为 ( model 层的)变量来看待 -->
<hr>
<hr>
<hr>
<!--将页面的items 列表 内容 传递给 item 变量,将 item 变量 赋值给 header1 -->
<!--header1 是 first-vue-component 中定义的 props 中的一个, 用于传值-->
<!---->
<first-vue-component v-for="(item, index) in items" v-bind:header1="item" ></first-vue-component>
<hr>
</div>
<!--导入VUE.JS-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js "></script>
<script>
Vue.component("first-vue-component",{
data:function(){
return{
}
},
props:['header1'],
template:'<div><div>{{ header1 }}</div><div>body</div><div>footer</div><br></div>',
});
// model 层
var vmdata={
tempHeader: "headerTest",
items:["java","c++","linux"],
}
// ViewModel 层
var vm=new Vue({
el:"#app",
data:vmdata,
})
</script>
</body>
</html>
P8、Axios异步通信 24:53
什么是Axios
Axios是一个开源的可以用在浏览器端和NodeJs的异步通信框架,它的主要作用就是实现AJAX异步通信,
其功能特点如下:
·从浏览器中创建XMLHttpRequests·从node.js 创建http 请求
·支持Promise API[JS中链式编程]
·拦截请求和响应
·转换请求数据和响应数据
·取消请求
·自动转换JSON数据
·客户端支持防御XSRF(跨站请求伪造)
Axios GitHub: https://github.com/axios/axios
Axios 中文文档: http://www.axios-js.com/
为什么要使用Axios
由于Vue.js 是一个视图层框架并且作者(尤雨溪)严格准守SoC(关注度分离原则),
所以Vue.js并不包含AJAX的通信功能,为了解决通信问题,作者单独开发了一个名为vue-resource的插件,不过在进入2.0版本以后停止了对该插件的维护并推荐了Axios 框架。少用jQuery,因为它操作Dom太频繁!
修改IDEA 默认js规范为ESCM6
IDEA – Settings --> Languages & Frameworks --> JavaScript
axios 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--style 中定义 v-clock ,将其赋值给此处,可以让屏幕不闪屏,开始不显示,直接显示加载结果-->
<div id="vue">
<div>{{ info.name}}</div>
<div>{{ info.url}}</div>
<div>{{ info.address.street}}</div>
</div>
<style>
[v-clock]{
display: none;
}
</style>
<!--导入VUE.JS-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js "></script>
<!--导入 axios cdn -->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
<script type="text/javascript">
var vm =new Vue({
el: "#vue",
data(){
return {
info:{
name: null,
url: null,
address:{
street: null,
city: null,
country: null,
}
}
}
},
mounted(){ // 钩子函数 链式编程 基于 ES6 新特性
axios.get("../jsonks.json")
.then(response=>(
//console.log(response.data);
this.info=response.data
))
},
});
</script>
</body>
</html>
jsonks.js
{
"name": "狂神说Java--狗剩study",
"url": "https://blog.kuangstudy.com",
"page": 1,
"isNonProfit": true,
"address": {
"street": "姑苏路07号",
"city": "江苏",
"country": "中国"
},
"links": [
{
"name": "bilibili",
"ur1": "https://space.bilibili.com/95256449"
},
{
"name": "狂伸说java",
"ur1": "https://blog.kuangstudy.com"
},
{
"name": "百度",
"ur1": "https://www.baidu.com/"
}
]
}
屏幕不闪屏操作
<!--style 中定义 v-clock ,将其赋值给此处,可以让屏幕不闪屏,开始不显示,直接显示加载结果-->
<div id="vue" v-clock>
<div>{{ info.name}}</div>
<div>{{ info.url}}</div>
<div>{{ info.address.street}}</div>
</div>
<style>
[v-clock]{
display: none;
}
</style>
如果不给 div id=“vue” 设置 v-clock 属性,是下面的效果
如果给 div id=“vue” 设置 v-clock 属性,
没有中间的图 ,直接从白板变为最后结果
P9、计算属性 09:53
调用方法时,每次都需要进行计算,既然有计算过程则必定产生系统开销,那如果这个结果是不经常变化的呢?此时就可以考虑将这个结果缓存起来,采用计算属性可以很方便的做到这一点,计算属性的主要特性就是为了将不经常变化的计算结果进行缓存,以节约我们的系统开销;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view层-->
<div id="app">
<!--普通方法下发 ***()-->
{{ byMethodsTime1() }}
<br>
<!--计算属性写法 *** -->
{{ byComputedTime1 }}
</div>
<!--导入VUE.JS-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js "></script>
<script>
// model 层
var vmdata={
message: "abc",
}
// ViewModel 层
var vm=new Vue({
el:"#app",
data:vmdata,
methods:{
byMethodsTime1:function(){
return Date.now以上是关于vue 狂神教程学习 笔记的主要内容,如果未能解决你的问题,请参考以下文章
git与github的使用Git最新教程通俗易懂学习——狂神说视频笔记
git与github的使用Git最新教程通俗易懂学习——狂神说视频笔记