什么是框架
框架:就是一套完整的解决方案
库：类似工具箱，是一堆方法的集合，比如axios,lodash,echarts，bootstrap等
框架:是一套完整的解决方案,实现了大部分功能，我们只需要按照一定的规则去编码即可
框架的特点: 有一套必须让开发者遵守的规则或者约束 学习框架就是学习这些规则
创建vue实例
步骤：
-
准备容器
-
引包(官网)
-
创建vue实例 new Vue()
-
指定配置项，渲染数据
-
el 指定挂载点
-
data 提供数据
-
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="box">
{{msg}}
</div>
<script>
const app = new Vue({
el:"#box",
data:{
msg:"hello world",
arr:[1,2,3,4]
}
})
</script>插值表达式
插值表达式是一种vue的模板语法
我们可以用插值表达式渲染出vue提供的数据
语法： {{表达式}}
<div id="box">
{{title}}
<p>{{nickName.toUpperCase()}}</p>
<p>{{age>=18?'成年':"未成年"}}</p>
<p>{{obj.name}}</p>
<p>{{fn()}}</p>
</div>注意事项：
插值表达式中使用的数据，必须在data中进行提供 ，如果data中不存在，就会报错
支持的是表达式，而非语句 ，比如if ，for...
不能在标签属性中使用 {{}} 插值表达式只能在标签中间使用
vue响应式
什么是响应式: 简单理解就是数据变，视图对应变
如何访问和修改data中的数据
data中的数据，最终会被添加到实例上
访问数据： 实例.属性名
修改数据： 实例.属性名 = '值'
- 初始化阶段：在初始化阶段，Vue 会遍历组件的 data 对象，并将其所有属性值转化为 getter 和 setter 。这意味着当访问组件数据时，响应式系统会自动为其添加依赖，以便在属性值变化时能够重新渲染视图。
- 模板编译阶段：在模板编译阶段，响应式系统会扫描模板中绑定的所有数据，并在模板中添加必要的依赖关系。这个过程是在模板编译器中实现的。
- 运行时阶段：在运行时阶段，响应式系统会根据数据属性的变化情况，通知之前记录下来的所有依赖，使它们能够重新渲染视图。这个过程是在 Observer 类中实现的，其主要作用是将数据对象转化为可观察对象，从而能够遍历其所有属性并收集依赖关系。
通过这种方式，当数据发生变化时，Vue 能够自动更新相关的视图，实现了数据和视图的双向绑定，提高了开发效率和用户体验。
vue指令
指令就是vue提供的带有v-前缀的特殊标签属性
内容渲染指令v-text和v-html
辅助开发者渲染DOM元素的文本内容
v-text（类似innerText）
<p v-text="htmlStr">123</p> v-html（类似innerHTML）
<p v-html="htmlStr"></p>将htmlStr的值渲染到p标签中,并解析标签
类似于innerHTML，使用该语法，会覆盖p标签所有内容
条件渲染指令v-show和v-if
控制DOM的显示与隐藏
v-show
-
控制元素显示隐藏
-
语法: v-show="表达式" 表达式值为true显示，false隐藏
-
原理: 切换display:none 控制显示隐藏
-
场景 ：频繁切换显示隐藏的场景
v-if
-
控制元素显示隐藏
-
语法: v-if="表达式" 表达式值为true显示，false隐藏
-
原理: 基于条件判断， 是否创建或移除元素节点
-
场景：要么显示，要么隐藏，不频繁切换的场景
v-if是惰性的，第一次为false 时候，v-if是不会创建节点
v-else和v-else-if
-
作用：辅助v-if进行判断渲染
-
语法：v-else v-else-if="表达式"
-
需要紧接着v-if使用
<div id="box">
<div v-show="flag">我是v-show控制的盒子</div>
<div v-if="flag">我是v-if控制的盒子</div>
<p v-if="gender===1">性别:男</p>
<p v-else>性别:女</p>
<p v-if="score >= 90">成绩评定A奖励电脑一台</p>
<p v-else-if="score>=70">成绩评定B 奖励周末郊游</p>
<p v-else-if="score>=60">成绩评定C 奖励零食礼包</p>
<p v-else>成绩评定D 惩罚一周不能玩手机</p>
</div>
<script>
const app = new Vue({
el:"#box",
data:{ //定义数据
flag:false,
gender:1,
score:95
},
methods:{
}
})
</script>事件绑定指令【v-on】
示例
使用vue时，如需为dom注册事件，使用v-on绑定事件【v-on的简写为@】
<button v-on:事件名="内联语句">按钮</button>
<button v-on:事件名="处理函数">按钮</button>
<button v-on:事件名="处理函数(实参)">按钮</button>
内联语句
<div id="box">
<!-- 内联语句 -->
<button @click="count--">-1</button>
<span>{{count}}</span>
<button v-on:click="count++">+1</button>
</div>
<script>
const app = new Vue({
el:"#box",
data:{ //定义数据
count:100
},
methods:{
}
})
</script>事件处理函数
注意：
-
事件处理函数应该写到一个跟data同级的配置项(methods)中
-
methods中的函数内部的this都指向vue实例
给事件处理函数传参
-
如果不传递任何参数，则方法无需加小括号，methods方法中可以直接使用e当作事件对象
-
如果传递了参数，则实参$event 表示事件对象，固定写法
<div id="box">
<!-- 内联语句 -->
<button @click="count--">-1</button>
<span>{{count}}</span>
<button v-on:click="count++">+1</button>
<!-- 事件处理函数 -->
<h1 v-show="isShow">丁鹿学堂</h1>
<button v-on:click="toggle">切换</button>
<!-- 给事件处理函数传参 -->
<button @click="fn">按钮1</button>
<button @click="fn1('23')">按钮2</button>
<!-- 如果传递了参数，则实参$event 表示事件对象，固定写法 -->
<button @click="fn2($event,'45')">按钮3</button>
</div>
<script>
const app = new Vue({
el:"#box",
data:{ //定义数据
count:100,
isShow:false,
money:100
},
methods:{
toggle(){
console.log(this)
this.isShow = !this.isShow
},
// 不传递任何参数，方法无需加小括号，methods中可以使用e当作事件对象
fn(e){
console.log(e)
},
// 传递参数
fn1(val){
console.log(val)
},
fn2(e,val){
console.log(e)
console.log(val)
}
}
})
</script>属性绑定指令【v-bind】
作用：动态设置html标签属性 比如 src url title
语法：v-bind:属性名="表达式"【v-bind可以简写成 :】
<div id="box">
<img v-bind:src="imgUrl" />
<img :src="imgUrl" />
</div>
<script>
const app = new Vue({
el:"#box",
data:{ //定义数据
imgUrl:"./image/01.png"
},
methods:{
}
})
</script>双向绑定指令【v-model】
双向绑定:
-
数据改变，呈现的页面结果会更新（数据变，视图变）
-
页面结果更新后，数据也会随之改变（视图变 ，数据变）
作用:给表单元素(input , radio,select)使用，双向绑定数据，可以快速获取或者设置表单元素内容
语法: v-model="变量"
<!-- 准备容器 -->
<div id="box">
<p>用户:
<input type="text" v-model="username" />
</p>
<p>
密码:
<input type="password" v-model="password">
</p>
<button @click="login">登录</button>
<button @click="reset">重置</button>
<!--
1.点击登录按钮获取表单中的内容
2.点击重置按钮 清空表单中的内容
-->
</div>
<script>
// 创建vue实例
const app= new Vue({
el:"#box" , //el指定挂载点
data:{
username:"" , //用户
password:"" //密码
},
methods:{
login(){
console.log(this.username)
console.log(this.password)
},
reset(){
this.username= ""
this.password = ""
}
}
})
</script>列表渲染指【v-for】
vue提供了v-for列表渲染指令，辅助开发者基于一个数组来循环渲染一个列表结构
v-for指令需要使用 (item,index) in arr 形式的特殊语法
-
item 是数组中的每一项
-
index是每一项的索引，不需要可以省略
-
arr是被遍历的数组
此语法可以遍历数组 对象 和数字
<div id="box">
<!-- 遍历数组 -->
<ul>
<li v-for="(item,index) in arr">
{{item}}---{{index}}
</li>
</ul>
<!-- 遍历对象 -->
<ul>
<li v-for="(val,key) in obj">
{{val}}---{{key}}
</li>
</ul>
<!-- 遍历数字 -->
<ul>
<li v-for="item in 10">
{{item}}
</li>
</ul>
</div>
<script>
const app = new Vue({
el:"#box",
data:{ //定义数据
arr:['aaa','bbb','ccc'],
obj:{
name:"zs",
age:12
}
},
methods:{
}
})
</script>v-for的key【原理后面讲】
语法：key=“唯一值”
作用:给列表项添加唯一标识，便于vue进行列表项的正确排序复用
为什么加key ：vue的默认行为会尝试原地修改元素(就地复用)
<ul>
<li v-for="(item,index) in objArr" :key="item.id">
<span>{{item.name}}</span>
<span>{{item.age}}</span>
<button @click="del(index)">删除</button>
</li>
</ul>注意:
-
key的值只能是字符串 或者数字类型
-
key的值必须具有唯一性
-
推荐使用id作为key(唯一)，不推荐使用index作为key(index会变化，不对应)
修饰符【最常用】
指令修饰符
指令修饰符是通过 . 指明一些指令后缀，不同的后缀封装了不同的处理操作---简化代码
v-model.trim 去除左右空格
v-model.number 转数字
<input type="text" v-model.trim="name" />
<input type="text" v-model.number="num">事件修饰符
-
@事件名.stop 阻止冒泡
-
@事件名.prevent 阻止默认行为
-
@事件名.stop.prevent 可以连用，既阻止事件冒泡 也阻止默认行为
<body>
<!-- 准备容器 -->
<div id="box">
<!-- 阻止冒泡 -->
<div class="father" @click="fatherFn">
<div class="son" @click.stop="sonFn"></div>
</div>
<!-- 阻止默认行为 -->
<a @click.prevent="fn" href="http://www.baidu.com">阻止默认行为</a>
</div>
<script>
// 创建vue实例
const app= new Vue({
el:"#box" , //el指定挂载点
data:{
name:"",
num:10
},
methods:{
fn(){
alert("默认行为")
},
fatherFn(){
alert("父亲被点击了")
},
sonFn(){
alert("儿子被点击了")
}
}
})
</script>
</body>
扫一扫
1413
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
