抱歉,您的浏览器无法访问本站

本页面需要浏览器支持(启用)JavaScript


了解详情 >

vue学习记录(十四)

第十四课 模板样式绑定详细讲解 准备一个干净的页面这里新建一个Demo14.html,然后把Demo13.html内容复制到Demo14.html中,并改为下面最简单的样式。 1234567891011121314151617181920212223<!DOCTYPE html><html lang="en"><head> <...

vue学习记录(十三)

第十三课 Vue中的侦听器/监听器-watch Vue中的侦听器(也有叫监听器),它可以侦听data中值的变化,做出相应的操作。这看起来和计算属性(computed)很像,但也有一些区别。 侦听器的基本写法watch侦听器的作用就是侦听一个data中的值的变化,变化后可以写一个方法,让其进行一些操作(业务逻辑的编写)。 直接复制上节课的代码(Demo12.html)到Demo13中,不用修改...

vue学习记录(十二)

第十二课 计算属性-computed 计算属性的特性是:当计算属性依赖的内容发生变更时,才会重新执行计算。 编写基本页面和准备变量1234567891011121314151617181920212223242526272829303132<!DOCTYPE html><html lang="en"><head> <meta...

vue学习记录(十一)

第十一课 模板中使用条件判断 模板中使用条件判断,控制页面的样式,是最常见的应用。Vue中提供了两种基本的方法,一种是三元运算符,另一种就是v-if。 三元运算符控制模板样式123456789101112131415161718192021222324252627282930<!DOCTYPE html><html lang="en"> &l...

vue学习记录(十)

第十课 模板动态参数和阻止默认事件 v-on的基本用法和简写v-on是用来绑定响应事件的,在以前的课程中多次用到了。这里就先写一个最简单的事件,弹出对话框。 12345678methods:{ hanldClick(){ alert('欢迎光临红浪漫') }},template:`<h2 v-on:c...

vue学习记录(九)

第九课 插值表达式和v-bind数据绑定 这节课主要学习两个模板语法:插值表达式和v-bind的使用。 插值表达式是什么就是我们经常看到的{{xxxx}}这样的东西。利用这种形式,可以使用data中的变量,展示在模板中。 插值表达式输出html标签-v-html指令如果我想在变量里,编写一些html的标签,然后输出展现在页面中,这时候会出现点小问题。我...

vue学习记录(八)

第八课主要讲的是Vue的生命周期函数 上节课主要学的是前四个生命周期函数,这节看看后四个 beforeUpdate和updated生命周期函数这两个生命周期函数在Vue中的data数据发生变化时,才会被执行,一个是在变化之前,一个是在变化之后。 beforeUnmount和unmounted生命周期函数这两个生命周期函数是在Vue销毁时自动执行的函数,一个是销毁前执行,一个是销毁后执行。 ...

vue学习记录(七)

第七课主要讲的是Vue的生命周期函数 vue3生命周期钩子函数每个组件在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。比如mounted钩子可以用来在一个实例被创建之后执行代码: 12345678910Vue.creat...

vue学习记录(六)

第六课主要讲的是createApp()和mount()方法的讲解 前几节里都有createApp()和mount()两个方法 createApp方法从字面上意思来说就是创建一个vue应用 mount方法就是挂载到某个html的dom节点上,它接受一个字符串型参数,参数可以使用CSS选择器,一般都是ID选择器的形式,指定挂载的DOM元素。 获取Vue的根组件vm当使用creatApp()方...

vue学习记录(五)

第五课主要讲的是组件化开发 如何编写组件把上节的代码父之过来进行改动,把Vue.createApp声明一个变量叫app 1234<script> const app = Vue.createApp({...}) app.mount("#app")</script> 有了app就可以自定义组件了,比如写一个标题组件 1...