开始使用Vue
1.引入vue.js
官网:vuejs.org
-
引入vue.js后,给我们提供了一个构造函数 Vue
-
在js中,
new Vue()
-
new Vue()
后会返回一个vue实例对象,我们用变量接着它 -
const vm = new Vue()
-
传递一个配置对象{} – >
const vm = new Vue({})
1.初始Vue:
1.想让Vue工作,就必须创建一个VUe实列,且要传入一个配置对象
2.root容器里面的代码依然符合html规范,只不过混入了一些特殊的Vue写法
3.root容器里的代码被称为【Vue模板】
4.Vue实例和容器是一一对应的
5.真实开发中只有一个vue实例,并且会配合组件一起使用
6.{{xxx}}中xxx可以写js表达式,且xxx可以自动读取到data中的所有属性
7.一旦data中的数据发生改变,那么页面中用该数据的地方也会自动更新
Hello {{name}} 今年{{age}} 岁 ,{{Date.now()}}
2.Vue模板语法:
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,Vue 能够智能地计算出最少需要重新渲染多少组件,并把 DOM 操作次数减到最少。
如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量,你也可以不用模板,直接写渲染 (render) 函数,使用可选的 JSX 语法。
Vue模块语法有2大类:
1.插值语法:
功能:用于解析标签体内的内容
写法:{{xxx}} xxx就是js表达式,且可以直接读取到data中的所有属性
2.指令语法:
功能:用于解析标签(包括:标签属性、标签体内容、绑定事件…)
举例:v-bind:href=‘xxx’ 或简写为 :href = ‘xxx’ xxx同样要写js表达式
且可以直接读取到data中的所有属性
备注:Vue中有很多指令,且指令都是: v-???
差值语法
你好,{{name}}
指令语法:
点我去学习{{scool.zhishi}}
3.数据绑定
Vue中有两种数据绑定的方式
1.单向绑定(v-bind):数据只能从data流向页面
2.双向绑定(v-model):数据不仅能从data流向页面,还可以从页面流向data。
注意:
1.双向绑定一般都应用于表单类元素上(如:input、select等)
2.v-model:value 可以简写成v-model,因为v-model默认收集的就是value值
单向数据绑定:
双向数据绑定:
双向数据绑定:
4.data与el的两种写法:
1.el有2种写法:
-
(1):new Vue 时候配置el属性
-
(2):先创建Vue实例,随后再通过vm.$mount(‘#root’) 指定el的值
2.data有2种写法:
(1)对象式
(2)函数式
如何选择:以后到组件的时候,data必须使用函数式,否则会报错。
3.一个重要的原则:
由Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是Vue实例了
5.MVVM模型(架构模型)
-
M:模型(Model):对应data中的数据
-
V:视图(View):模板
-
VM:视图模型(ViewModel):Vue实例对象
观察发现:
1.data中所有的属性,最后都出现在了vm身上
2.vm身上所有的属性 及 Vue原型上所有属性,在Vue模板中都可以直接使用
6.数据代理
7.事件处理
事件的基本使用:
1.使用v-on:xxx 或者@xxx绑定事件,其中xxx是事件名
2.事件的回调需要配置在methods对象中,最终会在vm上,
3.methods中的配置的函数,不要用箭头函数,否则this就不是vm
4.methods中配置的函数,都是被Vue所管理的函数,this是指向是vm 或者 组件实例对象
5.@click=‘demo’,和@click=‘demo(@event)’ 效果一样,但是后者可以传参
欢迎来到{{name}}学习
<button @click=“showInfo2(66,$event)” >按钮
事件修饰符
1.prevent 阻止默认事件
2.stop 阻止事件冒泡
3.once 事件只触发一次
4.capture 使用事件的捕获模式
5.self:只有event.target是当前操作元素时才触发
6.passive:事件默认行为立即执行,无需等待事件回调执行完毕
欢迎来到{{name}}学习
<button @click.once=“btn2”>按钮2
div1
div3
键盘事件
键盘中常用按键的别名:
回车=>enter
删除=>delete(捕获’删除’和’退格’键)
退出=>esc
空格=>space
换行=>tab
上 =>up
下 =>down
左 =>left
右 =>right
2.Vue没有提供别名的按键,可以使用按键原始的key值取绑定,但是要转化为kebab-case(短横线命名)
获取原始的key值 console.log(e.key)
3.系统修饰键(用法特殊):ctrl 、alt、shift、meta
(1).配合keyup使用:按下修饰键的同时,在按下其他键,随后释放其他键,事件才被触发。
(2).配合keydown使用:正常触发事件
系统修饰键配合其他按键可以连写 比如 ctrl + y 直接 在 @keyup 后面添加 .ctrl.y
4.也可以使用keyCode去指定具体的按键(不推荐)
5.Vue.config.keyCodes.自定义键名 = 键码,可以去定制按键别名
欢迎来到{{name}}学习
<input type=“text” placeholder=“按下回车提示输入” @keyup=“showBtn”>
8.计算属性(computed)
1.定义:要用的属性不存在,要通过已有属性计算得来
2.原理:底层原理借助了Object.defineproperty 方法提供的getter 和setter
3.get函数什么时候执行?
(1).初次读取时会执行一次
(2).当依赖的数据发生改变时会被再次调用
4.优势:与methods现实相比,内部有缓存机制(复用),效率更高,调试方便。
5.备注:
1.计算属性最终会出现vm上,直接读取使用即可
2.如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变。
姓:
名:
姓名:{{fullName}}
9. 监视属性 (watch)
1.当被监视的属性变化时,回调函数自动调用,进行相关操作
2.监视的属性必须存在,才能进行监视!
3.监视的两种写法:
(1):new Vue 时传入watch配置
(2):通过vm.$watch监视
深度监视:
(1).Vue中的watch默认不检测对象内部值的改变(一层)
(2).配置deep:true可以检测对象中内部值的改变(多层)
备注:
(3).Vue自身可以检测对象内部值的改变,但Vue提供的watch默认不可以!!
(4).使用watch时根据数据的具体结构,决定是否采用深度监视
data(){
return{
isHot:true,
numbers:{
a:1,
b:2
}
}
},
watch:{
//你要监测的属性
isHot:{
immediate:true, //初始化时让handler调用一下
handler(newValue,oldValue){
// console.log(‘isHot被修改了’,newValue,oldValue);
}
},
// 监视多级结构中某个属性的变化
‘numbers.a’:{
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录大纲截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且后续会持续更新
如果你觉得这些内容对你有帮助,可以添加V获取:vip1024c (备注前端)
总结
根据路线图上的重点去进行有针对性的学习,在学习过程中,学会写笔记,做总结。
这里分享一些前端学习笔记:
-
html5 / css3 学习笔记
-
JavaScript 学习笔记
-
Vue 学习笔记
一个人可以走的很快,但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎扫码加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
41)]
[外链图片转存中…(img-qE0JdYaK-1712779128741)]
[外链图片转存中…(img-ky0hQeMF-1712779128742)]
[外链图片转存中…(img-KHkXrNmy-1712779128742)]
[外链图片转存中…(img-zTu7b1H8-1712779128743)]
[外链图片转存中…(img-pzyI90Hq-1712779128743)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录大纲截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且后续会持续更新
如果你觉得这些内容对你有帮助,可以添加V获取:vip1024c (备注前端)
[外链图片转存中…(img-N37qsAJq-1712779128743)]
总结
根据路线图上的重点去进行有针对性的学习,在学习过程中,学会写笔记,做总结。
这里分享一些前端学习笔记:
-
html5 / css3 学习笔记
-
JavaScript 学习笔记
-
Vue 学习笔记
一个人可以走的很快,但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎扫码加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
[外链图片转存中…(img-AoyGF5Zt-1712779128744)]