发布时间:2023-03-08 18:30
Vuejs学习,从入门到精通
(之前在跟着黑马的vue教程粗略过了一下vue基础,接下来这段时间对vue重新进行系统化学习,主要是跟着B站的coderwhy老师自学,一边更新记录笔记,一边敲代码学习加深理解)
Vuejs是一个渐进式框架
Vue有很多特点和web中常见的高级开发功能
方式1:直接CDN引入
可以选中引入开发环境版本还是生产环境版本
方式2:下载和引入
方式3:NPM安装(建议学习阶段使用)
每一个vue应用都需要使用实例化vue来实现
语法格式如下:
Var app = new Vue({
………
})
Vue构造器中包含el属性:该属性决定了这个Vue对象需要挂载到哪一个元素中
包含data属性:该属性中通常存储数据
下面是一个简单的vue测试实例
var vm = new Vue({
el: '#vue_det',
data: {
num: 100
},
})
BeforeCreate()
Create()
BeforeMount()
Mounted()
BeforeUpdate()
Update()
BeforeDestory
Destroyed()
就是 {{变量名或者简单的表达式 }}
该指令表示元素和组件只能渲染一次,不会随着数据的改变而改变
例如:<h2 v-once>{{message}}h2>
(3)v-html指令 该指令后面往往跟上一个string类型变量
该指令会将变量的html解析出来并渲染
(5)V-pre指令,跳过元素的编译过程,用于显示原来的Mustach语法
缩写:一个冒号:
<img v-bind:src="url" alt="">
data: {
url:图片地址
}
v-bind动态绑定Class(对象语法)可以通过判断,传入多个值
<h2 :class="{'active': isActive, 'line': isLine}">Hello Worldh2>
可以通过isActive,isLine的true或者false来动态控制class属性
v-bind绑定class (数组语法)
<h2 :class=“[‘active’, 'line']">Hello Worldh2>
Computed :{ 计算属性(
Return 变化后的数据)}
我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。
v-on指令
作用:事件监听
简写: @
1.简单实例(点击一次按钮sum数组自增1)
<button v-on:click="sum++">+button>
2.在事件定义时,如果写方法时省略了小括号没有传参,但是方法本身是需要传参的,这个时候vue会默认将浏览器生产的event对象作为参数传递给方法中
例:
methods: {
sumAdd(event) {
console.log(event)
}
}
3.
定义方法时,我们既需要传递变量,又需要获取event
可以通过这样的方法实现(注意button里面不能直接写event,否则编译器会将event看成某个变量或者方法
<button v-on:click="sumAdd('abc',$event)">+button>
methods: {
sumAdd('abc',event) {
console.log(event)
}
}
4.v-on的修饰附的使用
.stop修饰符,阻止冒泡行为
<button v-on:click.stop="sumAdd">+button>
.prevent修饰符组织默认行为
.once只触发一次默认行为