选项的概念与要点
data，methods，computed 等可以选择添加使用，称之为选项
注意：vue组件中的选项（data，methods，computed，...）名字是不能随意更改的，也是不能重复定义的（更改选项名会报错，无法正常渲染，重复定义会导致后面的覆盖前面的）
data选项
data选项必须是个函数，且必须返回一个{}，其内部注册响应式数据，当响应式数据被改变，会使引用对应数据的组件模板代码重新执行
export default {
data(){
return {
tabs:[
{ name:'首页',pic:'' },
{ name:'分类',pic:'' },
{ name:'购物车',pic:'' },
{ name:'我的',pic:'' },
],
currentIndex:0
}
}
}
methods选项
methods 选项 必须是个对象格式，内部定义若干方法（函数），用逗号两两隔开
export default {
methods:{
handleClick(i){
this.currentIndex = i;
}
}
}
computed选项
1.要点
1） computed 选项， 定义计算属性（ 定义时像函数，写法上和函数相同； 使用时像变量，不带括号，否则会报错）
2） 计算属性内部所依赖的数据发生变化时， 计算属性本身就会自动重新计算返回一个新的计算值并缓存起来
3） 计算属性内部所依赖的数据没有发生变化， 计算属性会直接返回上一次缓存的值
computed：计算，计算的
2.代码演示
<template>
<div class="app">
<div class="goods">
<div v-for="(item,index) in goods" :key="index" class="good">
<div class="name">{{item.name}}</div>
<div class="price">¥{{item.price}}</div>
<div class="num"> <button @click="minus(item)"> - </button> x{{item.num}} <button @click="add(item)"> + </button></div>
</div>
</div>
<h3>总数: {{totalNum}} 总价: {{totalPrice}}</h3>
</div>
</template>
<script>
export default {
data(){
return {
goods:[
{ name:'iphone xx',price:8888,num:1 },
{ name:'iphone xx pro',price:10000,num:1 },
{ name:'iphone xx max',price:20000,num:2 },
],
count:0,
}
},
computed:{
totalNum(){-----------该属性计算购物车中商品的总数
console.log('totalNum');
var res = 0;
this.goods.forEach((item)=>{---------思路一: 循环遍历, 累加商品的数量
res += item.num
})
return res;----------累加的商品的数量作为返回值
},
totalPrice(){--------------计算购物车中商品的总价格
var res = 0;
this.goods.forEach((item)=>{----------思路一: 循环遍历, 累加商品的金额
res += item.num * item.price
})
return res;
}
},
}
</script>
directives选项
1.要点
1） directives选项， 定义自定义指令（ 局部指令 ）directive：指令，指令的
2） 注意：
1> 局部指令只能在当前文件中使用，全局指令可以在任何.vue 文件中使用
2> 当局部指令和全局指令冲突时， 局部指令优先生效。
3） 全局指令
语法：
定义指令：app.directive('指令名',{
mounted(el,binding){
指令功能代码
}
})
el代表指令所在的 dom节点，binding获取指令携带的参数
4） 局部指令
语法：
directives:{
指令名:{
mounted(el,binding){
指令功能代码
}
}
}
2.局部指令
局部指令在.vue为后缀的组件中声明
语法：
directives:{
指令名:{
mounted(el,binding){
指令功能代码
}
}
}
<template>
<div class="app">
<input type="text" v-focus v-validate>--------指令添加在组件模板中的元素标签上，该元素执行时，指令就生效
</div>
</template>
<script>
export default
directives:{
focus:{-------表单自动聚焦指令
mounted(el,binding){--------el 获取指令所在的dom节点 , binding获取指令携带的参数
console.log('局部指令 focus');
el.focus();-------聚焦，失焦为el.blur();
}
},
validate:{------验证表单输入内容是否为空指令
mounted(el,binding){---------el 获取指令所在的dom节点 , binding 获取指令携带的参数
if( !el.value ){
el.style.border = '1px solid red';
}
}
}
}
}
</script>
3.全局指令
补充：：：：：：：：：：：：：：：；；
v-focus 和 v-validate 都是 Vue.js 中的自定义指令。
v-focus：这是一个自定义指令，用于在元素渲染时自动设置焦点。通过在元素上添加 v-focus 指
令，当该元素被渲染到页面上时，会自动获得焦点，无需手动点击或调用 focus() 方法。例如，可
以在输入框上使用 v-focus 指令，使页面加载后自动聚焦到该输入框。
v-validate：这也是一个自定义指令，用于进行表单验证。通过在表单元素上添加 v-validate 指
令，并传入相应的验证规则，可以实现对表单数据的实时验证。当用户输入或改变表单数据时，v-
validate 会根据指定的验证规则对数据进行验证，并根据验证结果添加相应的样式或显示错误信
息。常见的验证规则包括必填字段、最小长度、最大长度、正则表达式等。
components选项
1.要点
1） 注意：components选项用于注册局部组件，component方法用于注册全局组件，二者有区别，方法的拼写少一个“s”
2） 局部组件：
语法：在需要使用的组件书写
1> 导入组件：import 组件名 from '组件文件路径'
2> 注册组件：components:{组件名,...}
3） 全局组件
语法：在入口文档 main.js 中书写
1> 导入组件（将在其他.vue 文件中写好的组件导入到入口文件）：import 组件名 from '组件文件路径'
2> 注册组件：使用app.component('注册名',注册组件)方法，为引入的组件进行注册，注册完成后全局组件可在任何.vue 文件使用
component：组成部分，组成的
2.局部组件
语法：在需要使用的组件书写
1)导入组件：import 组件名 from '组件文件路径'
2)注册组件：components:{组件名,...}
<script>
导入轮播图组件
import swiper from './components/swiper.vue'
导入快捷入口组件
import entry from './components/entry.vue'
export default {
components:{----------------------components注册组件，导入的组件需要在components中注册才可以使用
swiper,--------------当key与value相同时，可以简写
entry
}
}
</script>
3.全局组件
语法：在入口文档main.js中书写
1)导入组件（将在其他.vue文件中写好的组件导入到入口文件）：import 组件名 from '组件文件路径'
2)使用app.component('注册名',注册组件)；为引入的组件进行注册，注册完成后全局组件可在任何.vue文件使用
import { createApp } from 'vue'
import App from './App-选项-computed.vue'
var app = createApp(App)
注册全局组件 ( 全局组件可以在任何.vue文件中使用(渲染) )
导入轮播图组件
import swiper from './components/swiper.vue'
导入快捷入口组件
import entry from './components/entry.vue'
app对象调用component方法注册全局组件
app.component('swiper',swiper);
app.component('entry',entry);
app.mount('#app')
filter选项（已弃用）
filters 选项， 定义过滤器 filter：过滤的
注意： 在 vue2.x 中 filters 是可以用的， 在 vue3.x 中 已经不再支持了
<template>
<div class="app">
<h3> {{ time | formatTime }} </h3>
</div>
</template>
<script>
export default {
filters:{
formatTime(time){
var d = new Date(time);
return `${d.getFullYear()} - ${d.getMonth()} - ${d.getDate()}`
}
}
}
</script>
案例（分组件开发）
主页面文件：app.vue
<template>
搜索区
<div class="search-box">
<span>北京</span>
<input type="text" placeholder="搜索商品">
<span>我的</span>
</div>
轮播图
<swiper />
快捷入口
<entry />
秒杀
推荐
</template>
<script>
导入轮播图组件
import swiper from './components/swiper.vue'
导入快捷入口组件
import entry from './components/entry.vue'
export default {
omponents 注册组件
components:{
swiper,--------------当key与value相同时，可以简写
entry
}
}
</script>
<style>
。。。。。。。。
</style>
轮播图文件：swiper.vue（组件需要放在component文件夹中）
<template>
<div class="swiper"></div>
</template>
<script>
export default {
}
</script>
<style>
.swiper{
background-color: lightseagreen;
height: 150px;
}
</style>
快捷入口文件：entry.vue（组件需要放在component文件夹中）
<template>
<div class="entry">
<div v-for="(item,index) in list" :key="index" class="item">{{item.name}}</div>
</div>
</template>
<script>
export default {
data(){
return {
list:[
{ name:'超市' },
{ name:'生鲜' },
{ name:'服饰' },
{ name:'充值' },
{ name:'缴费' },
{ name:'9.9' },
{ name:'领券' },
{ name:'plus' },
{ name:'到家' },
{ name:'家电' },
]
}
}
}
</script>
<style>
.entry{
display: flex;
flex-wrap: wrap;
}
.entry .item{
width: 20%;
margin: 20px 0;
text-align: center;
font-size: 14px;
}
</style>
vue数据绑定的底层原理
vue 数据绑定的底层原理：
1. vue 数据绑定实际是借助Object.defineProperty()实现数据劫持， 给每个属性都添加 getter，setter 方法。
1） vue3 中数据绑定的原理将Object.defineProperty()改成了 Proxy 实现
2） vue2 中Object.defineProperty()无法监听数组，对象属性的改变（添加属性，删除属性）， 但是 Proxy 可以监听到改变
2. 当访问到某个数据属性时， 会触发 getter 方法的调用， 这时该数据属性会和当前 Watcher 实例进行绑定。
3. 当修改某个数据属性的值时， 会触发 setter 方法的调用， 这时会自动通过当前属性属性所绑定的 Watcher 实例进行 dom 的更新（ Watcher 实例会将对应的异步更新函数放入到异步更新队列中， 等到下一次事件循环时批量执行，Vue 通过虚拟 DOM 技术对 DOM 进行更新，将更新后的 DOM 渲染到页面上 ）
proxy：代理的
