掘友等级
获得徽章 7
fjyr。真该死啊,这屎部门的领导,别的部门都通知放假了,就你能,让我们还在这卷。每次节前都这样,你是真该死啊。
#每天一个知识点#
Vue3 事件处理
我们可以使用 v-on 指令来监听 DOM 事件,从而执行 JavaScript 代码。v-on 指令可以缩写为 @ 符号。语法格式:
v-on:click="methodName"或@click="methodName"
事件处理程序中可以有多个方法,这些方法由逗号运算符分隔:
<button @click="one($event), two($event)">
事件修饰符,Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation()。Vue.js 通过由点 . 表示的指令后缀来调用修饰符。
.stop - 阻止冒泡
.prevent - 阻止默认事件
.capture - 阻止捕获
.self - 只监听触发该元素的事件
.once - 只触发一次
.left - 左键事件
.right - 右键事件
.middle - 中间滚轮事件 #每天一个知识点#
Vue3 计算属性
计算属性关键词: computed。计算属性在处理一些复杂逻辑时是很有用的。可以看下以下反转字符串的例子:
<div id="app">
{{ message.split('').reverse().join('') }}
</div>
接下来我们看看使用了计算属性的实例:
<div id="app">
<p>原始字符串: {{ message }}</p>
<p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
<script>
const app = {
data() {
return {
message: 'RUNOOB!!'
}
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
}
Vue.createApp(app).mount('#app')
</script>
computed setter
computed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter :
const app = {
data() {
return {
name: 'Google',
url: '
www.google.com'
}
},
computed: {
site: {
// getter
get: function () {
return this.name + ' ' + this.url
},
// setter
set: function (newValue) {
// todo
}
}
}
}
vm = Vue.createApp(app).mount('#app') Vue.js 循环语句
循环使用 v-for 指令。v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名。v-for 可以绑定数据到数组来渲染一个列表,v-for 实例
<div id="app">
<ol>
<li v-for="site in sites">
{{ site.text }}
</li>
</ol>
</div>
<script>
const app = {
data() {
return {
sites: [
{ text: 'Google' },
{ text: 'Runoob' },
{ text: 'Taobao' }
]
}
}
}
Vue.createApp(app).mount('#app')
</script>
#每天一个知识点# Vue3 条件语句
条件判断
v-if条件判断使用 v-if 指令,指令的表达式返回 true 时才会显示:
<div id="app">
<p v-if="seen">现在你看到我了</p>
</div>
<script>
const app = {
data() {
return {
seen: true /* 改为false,信息就无法显示 */
}
}
}
Vue.createApp(app).mount('#app')
</script>
(v-if-else、v-else)
v-show
我们也可以使用 v-show 指令来根据条件展示元素:
v-show 指令
<h1 v-show="ok">Hello!</h1>
v-show相当于display:none; #每天一个知识点# #每天一个知识点# Vue 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值:<div id="app">
<p>{{ message }}</p>
</div>
如果不想改变标签的内容,可以通过使用 v-once 指令执行一次性地插值,当数据改变时,插值处的内容不会更新。<span v-once>这个将不会改变: {{ message }}</span> #每天一个知识点#
Vue3 指令
Vue 指令(Directives)是 Vue.js 的一项核心功能,它们可以在 HTML 模板中以 v- 开头的特殊属性形式使用,用于将响应式数据绑定到 DOM 元素上或在 DOM 元素上进行一些操作。Vue 指令是带有前缀 v- 的特殊 HTML 属性,它赋予 HTML 标签额外的功能。与传统的 JavaScript 方法相比,使用 Vue 创建响应式页面要容易得多,并且需要的代码更少。以下是几个常用的 Vue 指令:
v-bind 用于将 Vue 实例的数据绑定到 HTML 元素的属性上。
v-if 用于根据表达式的值来条件性地渲染元素或组件。
v-show v-show 是 Vue.js 提供的一种指令,用于根据表达式的值来条件性地显示或隐藏元素。
v-for 用于根据数组或对象的属性值来循环渲染元素或组件。
v-on 用于在 HTML 元素上绑定事件监听器,使其能够触发 Vue 实例中的方法或函数。
v-model 用于在表单控件和 Vue 实例的数据之间创建双向数据绑定。 #每天一个知识点# vue3 创建项目-vue create 命令(vue-cli)
vue create [options] <app-name>
options 选项可以是:
-p, --preset <presetName>: 忽略提示符并使用已保存的或远程的预设选项
-d, --default: 忽略提示符并使用默认预设选项
-i, --inlinePreset <json>: 忽略提示符并使用内联的 JSON 字符串预设选项
-m, --packageManager <command>: 在安装依赖时使用指定的 npm 客户端
-r, --registry <url>: 在安装依赖时使用指定的 npm registry
-g, --git [message]: 强制 / 跳过 git 初始化,并可选的指定初始化提交信息
-n, --no-git: 跳过 git 初始化
-f, --force: 覆写目标目录可能存在的配置
-c, --clone: 使用 git clone 获取远程预设选项
-x, --proxy: 使用指定的代理创建项目
-b, --bare: 创建项目时省略默认组件中的新手指导信息
-h, --help: 输出使用帮助信息 #每天一个知识点# Applet 的调用
Applet 是一种 Java 程序。它一般运行在支持 Java 的 Web 浏览器内。因为它有完整的 Java API 支持,所以 Applet 是一个全功能的 Java 应用程序。<applet> 标签是在HTML文件中嵌入 Applet 的基础。以下是一个调用"Hello World"applet的例子;
HTML 代码:
<html>
<title>The Hello, World Applet</title>
<hr>
<applet code="HelloWorldApplet.class" width="320" height="120">
If your browser was Java-enabled, a "Hello, World"
message would appear here.
</applet>
<hr>
</html> #每天一个知识点# Applet 类
每一个 Applet 都是 java.applet.Applet 类的子类,基础的 Applet 类提供了供衍生类调用的方法,以此来得到浏览器上下文的信息和服务。
这些方法做了如下事情:
得到 Applet 的参数
得到包含 Applet 的 HTML 文件的网络位置
得到 Applet 类目录的网络位置
打印浏览器的状态信息
获取一张图片
获取一个音频片段
播放一个音频片段
调整此 Applet 的大小
除此之外,Applet 类还提供了一个接口,该接口供 Viewer 或浏览器来获取 Applet 的信息,并且来控制 Applet 的执行。
Viewer 可能是:
请求 Applet 作者、版本和版权的信息
请求 Applet 识别的参数的描述
初始化 Applet
销毁 Applet
开始执行 Applet
结束执行 Applet
Applet 类提供了对这些方法的默认实现,这些方法可以在需要的时候重写。
"Hello,World"applet 都是按标准编写的。唯一被重写的方法是 paint 方法。
下一页