Vue学习笔记
文章目录
1. 学习vue的准备
1.1. vue简介:
Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。
说人话是就是为了帮助开发者动态构建页面的框架
1.2. vue特点:
1.2.1. 组件化:
提高代码复用性,让代码更好维护。
1.2.1. 声明式:
使开发者`无需操作dom`,提高开发效率。
1.2. vue的引入
1.2.1. 直接引入:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
</head>
<body>
<div id="root">
Hello{{test01}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//关闭生产提示
Vue.config.productionTip=false </script>
<script type="text/javascript">
const x = new Vue({
//绑定dom
el : "#root",
data : {
test01 : "这是一个测试参数"
}
})
console.log(x)
</script>
</body>
</html>
实际上直接引用基本不在项目中使用,仅仅用于初步的学习。
1.2.2. 脚手架构建vue项目:
1: 安装脚手架
npm config set registry https://registry.npm.taobao.org #npm更换淘宝镜像
更换了淘宝镜像,npm下载相关会快一点
npm install -g @vue/cli #安装vue指令
2:构建vue项目
vue create 项目名
选择vue版本
分别有 vue2和 vue3两个默认配置(我这里选择vue2·)
要是因为网络问题构建失败,建议。。建议多试几次,校园网不行就换手机热点试试。
构建成功!
启动vue项目
npm run serve #启动vue开发服务器
打开vue欢迎页面
1.2.3:vue开发插件安装:
edge是可以直接打开的。
2. vue的简单使用
2.1 vue的模板语法:
准备的代码块:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
</head>
<body>
<div id="root">
Hello{{test01}}
<a :href="url">这是一个链接</a>
<input type="text" id="text01" v-model="testData">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//关闭生产提示
Vue.config.productionTip=false </script>
<script type="text/javascript">
const x = new Vue({
//绑定dom
el : "#root",
data : {
test01 : "这是一个测试参数",
url : "https://www.baidu.com",
testData : ""
}
})
console.log(x)
</script>
</body>
</html>
1: 插值语法
{{test01}} #双括号内可直接读取vue管理的data数据
主要用于指定标签体内容
2: 指令语法
<a :href="url">这是一个链接</a>
全写为 v-bind ,用于解析标签,即可以动态调整url变量控制a标签的src属性
3: 双向绑定
<input type="text" id="text01" v-model:value="testData">
简写
<input type="text" id="text01" v-model="testData">
2.2 vue的事件处理:
1: 点击事件
v-on:click 简写:@click = ""
<button v-on:click="testInput">测试按钮</button>
methods : {
testInput(){
console.log("这是一个测试按钮")
}
}
2:事件修饰符
1: @click.stop
阻止事件冒泡
2: @click.once
事件只触发一次
3 @click.capture
使用事件的捕获模式
4 @click.self
只有event.target是当前操作的元素时才触发事件
5 @wheel.passive
事件的默认行为立即执行,无需等待事件回调执行完毕
3:键盘事件
触发enter(回车)键盘事件
根据键值创建键盘事件
,
<input v-on:keyup.13="testEnter">
键盘事件缩写:
<input @keyup.enter="testEnter">
testEnter(){
alert("这是enter测试")
}
什么?你说你记不住这么多键值?
还好vue给咱们把常用的键值给了几个别名
。通过别名可以替代键值进行操作。
回车:enter
删除:delete (捕获“删除”和“退格”键)
退出:esc
空格:space
换行:tab (特殊,必须配合keydown去使用)
上:up
下:down
左:left
右:right
2.3 vue的计算属性:
2.3.1 计算属性与方法的区别:
用法上:计算属性一般用于加工原数据,方法的作用范畴要大得多
原理上:计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值,如果相关依赖数据没发生改变,则会直接返回上次已经缓存的值,而方法则会重新计算
2.3.1 计算属性的简单写法:
<h1>这是一个计算属性{{biggerAge}}</h1>
data : {
age : 1,
test01 : "这是一个测试参数",
url : "https://www.baidu.com",
testData : ""
}
computed:{
biggerAge(){
return this.age*10
}
}
2.4 vue的监视属性:
1:监视属性的基本使用
监视时可以拿到修改前的值和修改后的值 newValue,oldValue
<input type="text" id="text01" v-model="testData">
watch : {
testData:{
immediate:true,
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
}
}
2:深度监视
1:Vue中的watch默认不监测对象内部值的改变(一层)
2:在watch中配置deep:true可以监测对象内部值的改变(多层)
这里我数据没有多层,就简单加上看看语法加在哪里(qaq)
watch : {
testData:{
immediate:true,
deep:true, //深度监视
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
}
}