百度怎样收录网站,找客源用哪个软件好,wordpress不用帐号,唐山 网站建设Options API 选项式/配置式api 需要在script中的export default一个对象对象中可以包含data、method、components等keydata是数据#xff0c;数据必须是一个方法#xff08;如果是对象#xff0c;会导致多组件的时候#xff0c;数据互相影响#xff0c;因为对象赋值后数据必须是一个方法如果是对象会导致多组件的时候数据互相影响因为对象赋值后都是指向同一个内存地址当然在最新的vue版本中如果不是对象会直接报错method中可以写一些方法在方法中可以用this.xxx访问其他方法和data中的数据 问题 data、method等分别存放看起来是规范了但是对于业务不友好业务代码会分散到各个地方this的指向很耗费心神稍有不慎this的指向就会错误 1.响应式基础 data 数据定义 ,声明响应式状态 选项式 API 时会用 data 选项来声明组件的响应式状态。此选项的值应为返回一个对象的函数比对象里面的属性就是要定义的变量并且具有响应式。Vue 将在创建新组件实例的时候调用此函数 script
exportdefault {data() {return {title: helloworld}},
}
/script 2 双大括号语法Mustache语法 用于将data中的数据展示到dom中去里面也可以写变量表达式如{{true?真的:假的}} {{name}} 页面输出变量内容 使用插值表达式{{}} scriptexportdefault {data() {return {title: helloworld,};},};
/script
templatedivh1{{title}}/h1//插值使用{{}}/div
/template
style
/style 3.页面元素的属性绑定 vue使用v-bind指令给页面元素的属性响应式的绑定属性插值表达式{{}}不能在 HTML 的标签上面中使用。想要响应式地给标签绑定一个属性应该使用 v-bind 指令 v-bind的语法 v-bind:属性名称”变量名”可以简写成 :属性名称”变量名” 如果绑定的值是 null 或者 undefined那么该 属性将会从渲染的元素上移除。 scriptexportdefault {data() {return {title: helloworld,};},};
/script
templatedivh1 v-bind:idtitle{{title}}/h1h1 :idtitle{{title}}/h1 //简写input typetextv-bind:valuetitle/div
/template
style
/style 4.methods 方法定义 声明方法 要为组件添加方法我们需要用到 methods 选项。它应该是一个包含所有方法的对象 script
exportdefault {data() {return {count: {}}},methods: {increment() {this.count}},
}
/script Vue 自动为 methods 中的方法绑定了永远指向组件实例的 this。这确保了方法在作为事件监听器或回调函数时始终保持正确的 this。你不应该在定义 methods 时使用箭头函数因为箭头函数没有自己的 this 上下文。 5.页面事件绑定 vue可以在页面绑定方法v-on用于监听DOM事件并在触发事件时执行相应的方法或逻辑。它的作用是将事件与Vue实例中的方法进行绑定实现事件处理和响应 语法div v-on:事件名称”方法名称”/div 简写为 事件名称”方法名称” script export default {data() {return {title: helloworld,};},methods: {getValue() {console.log(点击了);},},};
/script
templatedivh1 v-bind:idtitlev-on:clickgetValue{{title}}/h1h1 :idtitleclickgetValue{{title}}/h1input typetextv-bind:valuetitle/div
/template
style
/style 6.组件引入和使用 创建组件 单独创建一个.vue结尾的文件在里面放入组件内容 引入组件 import 组件名称 from 组件地址 例如 import HelloWorld from ./components/HelloWorld.vue注册组件 通过components属性注册组件组件不注册无法使用 例如 export default {name: App,data() {return {count: 0}},methods: {increment() {this.count},decrement() {this.count--}},components: {HelloWorld}
} 使用组件 templatediv{{ count }}button clickincrement 加1/buttonbutton v-on:clickdecrement减1/button/divHelloWorld msgVite Vue /
/template 2.Composition Api 组合式api 1.响应式基础 ref数据定义 ref()接受一个初始值返回一个响应式的、可更改的 ref 对象此对象只有一个指向其内部值的属性 .value。 const count ref(0)
console.log(count.value) // 0count.value
console.log(count.value) // 1 ref 对象是可更改的也就是说你可以为 .value 赋予新的值。它也是响应式的即所有对 .value 的操作都将被追踪并且修改会触发页面的更新 reactive对象定义 reactive()返回一个对象的响应式代理。 创建一个响应式对象 const obj reactive({ count: 0 })
obj.count setup钩子函数 配置式api使用起来太过麻烦所以组合式api来了首先就是数据定义的区别组合式api刚出来的时候使用setup钩子函数来实现对属性状态的管理 Vue3中代码中必须要有这个函数setup()函数会在组件初始化的时候执行其主要目的是以原生js的方式设置组件的数据和方法等。 setup() 函数会返回一个对象对象会暴露给模板和组件实例。其他的地方也可以通过组件实例this来获取 setup() 暴露出来的属性 在script中定义setup属性这个属性是一个方法方法的返回是一个对象这个对象中的每一个属性都可以被视作一个变量都能够直接拿到dom中进行使用 script
import { ref } from vueexport default {setup() {const count ref(0)// 返回值会暴露给模板和其他的选项式 API 钩子return {count}},mounted() {console.log(this.count) // 0}
}
/scripttemplatebutton clickcount{{ count }}/button
/template 更简单的操作 setup语法糖 vue3.2的setup语法糖没有this只需在script标签中添加setup,可以帮助我们解决这个问题。组件只需引入不用注册属性和方法也不用返回 也不用写setup函数也不用写export default script setupimport { ref } from vue;const msg ref(这是第一条消息);msg.value 变成第二条;
/script
templateh1{{ msg }}/h1
/template
style scoped
/style 插值表达式/双大括号语法Mustache语法 Vue3的插值操作使用Mustache”语法 (即双大括号)来表示其中可以包含表达式例如加法{{ number 1 }}或者三元不等式{{ ok ? Yes : No }}。插值操作可以用于更新元素的文本值也就是显示出一个纯文本等价于{{}}不能用于代码块的赋值。 h1{{title}}/h1 2.使用组件 创建组件 单独创建一个.vue结尾的文件在里面放入组件内容 引入组件 import 组件名称 from 组件地址 例如 script setup
import HelloWorld from ./components/HelloWorld.vue
/script 使用组件 templatediv{{ count }}button clickincrement 加1/buttonbutton v-on:clickdecrement减1/button/divHelloWorld msgVite Vue /
/template 3.小练习 练习题创建一个简单的“计数器”应用 任务 请用 Vue 实现一个简单的计数器应用。计数器应包含以下功能 显示当前计数值。有两个按钮 一个按钮点击后增加计数值。另一个按钮点击后减少计数值。使用 v-bind或者 : 动态绑定按钮的属性当计数值大于 0 时减按钮变成可点击状态计数值为 0 时按钮不可点击。使用 v-on 或者来绑定按钮点击事件。使用 Composition API 和 Option API 完成该功能要求两种方式都实现一次便于对比。 提示 使用 ref 和 reactive 来管理数据在 Composition API 中ref定义的数据在script标签里面需要使用 变量名.value来获取和使用变量。使用 data 和 methods 来管理数据和方法在 Option API 中。按钮的点击事件可以通过 v-on 进行绑定例如clickincrement。使用 button标签和 disable属性来控制按钮的是否能点击 效果如下 Composition API代码实现 template div v-bind:classclassName当前的数字{{ num }}/div button v-on:clickadd()新增/button button v-on:clicksub() :disablednum0减少/button /template script export default { data() { return { num: 0, }; }, methods: { add() { this.num; }, sub() { this.num--; } } }; /script style scoped/style Composition API代码实现 template div当前的数字{{ num }}/div button v-on:clickadd()新增/button button v-on:clicksub()减少/button /template script setup import { ref } from vue const num ref(0) const add () { num.value; } const sub () { if(num.value0){ num.value--; } } /script style scoped/style
