获得徽章 7
- #每天一个知识点#
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 - 中间滚轮事件展开赞过
评论1 - #每天一个知识点#
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>展开赞过 11 - #每天一个知识点#
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： 输出使用帮助信息展开赞过 评论2 - #每天一个知识点# 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>展开赞过 21 - #每天一个知识点# 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 方法。展开评论点赞
www.google.com