2022.08.24 重学vue ,在此记录一下笔记
01 (了解)Vue.js 课程介绍
会用到 es6 语法
用到Xmind , Xmindzen 绘制流程图
前端路由?后端路由 ?对比的理解 参照前端路由和后端路由_Melody_lw的博客-CSDN博客_前端路由和后端路由的区别
一到六部分是基础知识,基础知识很多,需要不断的练习
七到九 高级部分
十 补充部分
02 (理解)Vue.js 的认识和特点介绍
1、认识vue.js
why study vue.js :重构公司现有项目;公司新项目使用vue技术栈;换工作需要vue技术;前端必备技能
简单认识一下vue.js:
(1) 读音/vju:/ ,类似view
(2) 渐进式框架:意味着可以将vue作为你应用的一部分嵌入其中;可以把旧项目用vue进行一点一点的重构;vue 全家桶: core(vue核心)+ VueRouter + VueX;
(3) 学习vue前提: 具备一定的html,css,javascript基础
jquery已经在慢慢退出,github已经在逐步把jquery移除
es6 比 es5 好用,typescript 比 es6 好用
2、vue 特点:
解耦视图和数据,可复用的组件,前端路由技术,状态管理,虚拟DOM
3、vuejs 中的MVVM
view 层:视图层,通常指 DOM 层,主要是给用户展示各种信息
model 层:数据层,数据可以是我们固定的死数据,更多的是来自我们服务器,从网路上请求下来的数据
VueModel 层:视图模型层, 是view 和 model沟通的桥梁,一方面实现了 Data Bingding ,也就是数据绑定,将Model的改变实时的反应到 view 中,另一方面,它实现了 DOM Listener 也就是DOM 监听,当 DOM 发生一些事件(点击,滚动,touch等)时,可以监听到,并在需要的情况下改变对应的 Data.
03 (掌握)Vuejs 安装方式
方式一:cdn 引入 :开发环境(未压缩版,包含了有帮助的命令行和警告),生产环境(压缩版,优化了尺寸和速度)
方式二:下载和引入
方式三:NPM安装管理
通过webpack 和CLI 的使用,就是npm方式
vscode 很好用,有很多好用的插件,可以任意定制你想用的任何的功能
04 (掌握)HelloVuejs 的初体验
<body>
<div id="app">
<h3>{{msg}}</h3>
<h3>{{name}}</h3>
</div>
<script src = "./js/vue.js"></script>
<script>
/**
* var 没有作用域,js设计早期的缺陷
* let const 区别
* let 定义变量
* const 定义常量
*
*/
const app = new Vue({
el:"#app",//用于挂载要管理的元素
data:{ //定义数据【可以自己定义,也可以来自网络】
msg:"你好阿",
name:"yxx"
}
})
// 编程范式 :命令式编程 (原始js) 、 声明式编程 (vue)
// 原始js的做法
// 创建div元素
// 定义变量
// 将变量的值放在div元素里面
// 响应式:当数据发生改变的时候,页面会跟着发生响应
</script>
</body>
05 (掌握)Vue 列表的展示
body>
<div id="app">
<h4>四大名著</h4>
<ul>
<li v-for = "item in books">{{item}}</li>
</ul>
</div>
<script src = "./js/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
books:["三国演义","水浒传","红楼梦","西游记"] //列表也是响应式的
}
});
// 知识点:
// v-for 指令
// 数据是响应式的
</script>
</body>
06 (掌握)小案例-计数器
<body>
<div id="app">
<h4>当前计数 {{counter}}</h4>
<!-- <button v-on:click = "counter++">+</button>
<button v-on:click = "counter--">-</button> -->
<button @click = "add">+</button>
<button @click = "substraction">-</button>
</div>
<script src = "./js/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
counter:0
},
methods:{
add:function(){
this.counter++;
console.log("add被执行")
},
substraction:function(){
this.counter--;
console.log("substraction被执行")
}
}
});
// 知识点:
// 新指令:v-on:click @click 语法糖:一般是指简写
// 新属性:methods 用于定义vue对象里面的方法
// 函数里面用this获取data里面的counter,是因为内部做了proxy代理
</script>
</body>
07 (理解)vue的MVVM
08-(理解)Vue的options选项
<body>
<div id="app">
<h3>{{msg}}</h3>
</div>
<script src = "./js/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
// el:document.querySelector("#app"),
data:{//data Object || Function,在组件中,data必须是一个函数
msg:"hello world"
},
methods:{
}
})
/**
* 开发中 function 什么时候称为方法,什么时候称为函数
* 方法:methods
* 函数:function
*
* 定义在类里面 叫做方法【方法都是和实例对象挂钩的】
* 直接定义在script里面的
*/
</script>
</body>
09-(理解)什么是Vue的生命周期
<body>
<div id="app"></div>
<script src = "./js/vue.js"></script>
<script>
/*
什么是vue的生命周期?
生命周期:事物从诞生到消亡的整个过程
*/
const app = new Vue({
el:"#app",
data:{},
methods:{},
created(){
console.log("created")
}
})
</script>
</body>
10-(理解)Vue的生命周期函数有哪些
<body>
<div id="app"></div>
<script src = "./js/vue.js"></script>
<script>
/**
* 用的最多的:created mounted
* hook: 勾子的意思,表示回调的意思
* 对照生命周期图 绿色的部分是内部在做的东西
* 红色部分:勾子
* 组件里面可能会用到 destoryed
*/
const app = new Vue({
el:"#app",
data:{},
methods:{},
beforeCreate(){
console.log("beforeCreate")
},
created(){
console.log("一般在这里做网络请求")
console.log("created");
},
beforeMount(){
console.log("beforeMount")
},
mounted(){
console.log("mounted")
},
beforeUpdate(){
console.log("beforeUpdate")
},
updated(){
console.log("updated")
},
beforeDestory(){
console.log("beforeDestory")
},
destoryed(){
console.log("destoryed")
}
})
</script>
</body>
11-(了解)定义vue的template
利用webstorm 自定义代码块,这块vscode也可以实现,具体可参照VSCode自定义代码块详解 - 腾讯云开发者社区-腾讯云
这里告一段落,明天继续,希望可以坚持下去,加油!你是最棒的!