-
关注爱学习公众号
-
扫码手机阅读更方便
-
Vue3 自定义指令
Vue3 自定义指令 除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。 下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点： 实例 [mycode3 type='html'] 页面载入时，input 元素自动获取焦点： const app = Vue.createA
-
Vue3 组件
Vue3 组件 组件（Component）是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素，封装可重用的代码。 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树： 每个 Vue 应用都是通过用 createApp 函数创建的，传递给 createApp 的选项用于配置根组件。当我们挂载应用时，该组件被用作渲染的起点。 一个
-
Vue3 事件处理
Vue3 事件处理 我们可以使用 v-on 指令来监听 DOM 事件，从而执行 JavaScript 代码。 v-on 指令可以缩写为 @ 符号。 语法格式： v-on:click='methodName' 或 @click='methodName' v-on [mycode3 type='html'] 增加 1 这个
-
Vue3 计算属性
Vue3 计算属性 计算属性关键词: computed。 计算属性在处理一些复杂逻辑时是很有用的。 可以看下以下反转字符串的例子： 实例 1 [mycode3 type='html'] {{ message.split('').reverse().join('') }} [/mycode3] 尝试一下 » 实例 1
-
Vue3 样式绑定
Vue3 样式绑定 Vue.js class class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。 v-bind 在处理 class 和 style 时， 表达式除了可以使用字符串之外，还可以是对象或数组。 v-bind:class 可以简写为 :class。 class 属性绑定 我们可以为 v-bind:class 设置一个对象，
-
Vue3 表单
Vue3 表单 这节我们为大家介绍 Vue 表单上的应用。 我们可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 等元素上创建双向数据绑定。 v-model 会根据控件类型自动选取正确的方法来更新元素。 v-model 会忽略所有表单元素的 value、checked
-
Vue3 目录结构
Vue3 目录结构 上一章节中我们使用了 npm 安装项目(Vue-cli 和 Vite)，我们在 IDE（Vscode、Atom等） 中打开该目录，结构如下所示： 命令行工具 vue-cli（爱学习网-vue3-test）： Vite（爱学习网-vue3-test2） 目录解析 目录/文件 说明 build 项目构建(webpack)相关代码 confi
-
Vue3 混入
Vue3 混入 混入 (mixins)定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。 来看一个简单的实例： 实例 [mycode3 type='js'] // 定义混入对象 const myMixin = { created() { this.hello() },
-
Vue3 监听属性
Vue3 监听属性 本章节，我们将为大家介绍 Vue3 监听属性 watch，我们可以通过 watch 来响应数据的变化。 以下实例通过使用 watch 实现计数器： 实例 [mycode3 type='html'] 计数器: {{ counter }} 点我 const app = { data() { return {
-
Vue3 条件语句
Vue3 条件语句 条件判断 v-if 条件判断使用 v-if 指令，指令的表达式返回 true 时才会显示： v-if 指令 在元素中使用 v-if 指令： [mycode3 type='html'] 现在你看到我了 const app = { data() { return { seen: true /* 改为false
Vue3 计算属性
计算属性关键词: computed。
计算属性在处理一些复杂逻辑时是很有用的。
可以看下以下反转字符串的例子：
<div id="app">
{{ message.split('').reverse().join('') }}
</div>
实例 1 中模板变的很复杂起来，也不容易看懂理解。
接下来我们看看使用了计算属性的实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 爱学习网教程(lvstudy.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<p>原始字符串: {{ message }}</p>
<p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
<script>
const app = {
data() {
return {
message: 'lvstudy!!'
}
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
}
Vue.createApp(app).mount('#app')
</script>
实例 2 中声明了一个计算属性 reversedMessage 。
提供的函数将用作属性 vm.reversedMessage 的 getter 。
vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。
computed vs methods
我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
methods: {
reversedMessage2: function () {
return this.message.split('').reverse().join('')
}
}
可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。
computed setter
computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：
var vm = new Vue({
el: '#app',
data: {
name: 'Google',
url: 'https://www.google.com'
},
computed: {
site: {
// getter
get: function () {
return this.name + ' ' + this.url
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.name = names[0]
this.url = names[names.length - 1]
}
}
}
})
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = '爱学习网教程 https://www.lvstudy.com ';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);
从实例运行结果看在运行 vm.site = '爱学习网教程 https://www.lvstudy.com '; 时，setter 会被调用， vm.name 和 vm.url 也会被对应更新。
