学习 Vue.js

关注爱学习公众号
扫码手机阅读更方便

栏目

推荐阅读

Vue3 样式绑定
Vue3 样式绑定 Vue.js class class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。 v-bind 在处理 class 和 style 时，表达式除了可以使用字符串之外，还可以是对象或数组。 v-bind:class 可以简写为 :class。 class 属性绑定我们可以为 v-bind:class 设置一个对象，
Vue3 安装
Vue3 安装 1、独立版本我们可以在 Vue.js 的官网上直接下载最新版本, 并用 &lt;script&gt; 标签引入。下载 Vue.js 2、使用 CDN 方法以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。 Staticfile CDN（国内） : https://cdn.staticfile.org/vue/3.
Vue3 起步
Vue3 起步刚开始学习 Vue，我们不推荐使用 vue-cli 命令行工具来创建项目，更简单的方式是直接在页面引入 vue.global.js 文件来测试学习。 Vue3 中的应用是通过使用 createApp 函数来创建的，语法格式如下： const app = Vue.createApp({ /* 选项 */ }) 传递给 createApp 的选项用于配置根组件。在使用 mount()
Vue3 计算属性
Vue3 计算属性计算属性关键词: computed。计算属性在处理一些复杂逻辑时是很有用的。可以看下以下反转字符串的例子：实例 1 [mycode3 type='html'] {{ message.split('').reverse().join('') }} [/mycode3] 尝试一下 » 实例 1
Vue3 Ajax(axios)
Vue3 Ajax(axios) Vue 版本推荐使用 axios 来完成 ajax 请求。 Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。 Github开源地址： https://github.com/axios/axios 安装方法使用 cdn: 或使用 npm: $ npm install axios 使用 bo
Vue3 混入
Vue3 混入混入 (mixins)定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。来看一个简单的实例：实例 [mycode3 type='js'] // 定义混入对象 const myMixin = { created() { this.hello() },
Vue3 循环语句
Vue.js 循环语句循环使用 v-for 指令。 v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。 v-for 可以绑定数据到数组来渲染一个列表： v-for 实例 [mycode4 type='html'] {{ site.text }}
Vue3 目录结构
Vue3 目录结构上一章节中我们使用了 npm 安装项目(Vue-cli 和 Vite)，我们在 IDE（Vscode、Atom等）中打开该目录，结构如下所示：命令行工具 vue-cli（爱学习网-vue3-test）： Vite（爱学习网-vue3-test2）目录解析目录/文件说明 build 项目构建(webpack)相关代码 confi
Vue3 自定义指令
Vue3 自定义指令除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点：实例 [mycode3 type='html'] 页面载入时，input 元素自动获取焦点： const app = Vue.createA
Vue3 路由
Vue3 路由本章节我们将为大家介绍 Vue 路由。 Vue 路由允许我们通过不同的 URL 访问不同的内容。通过 Vue 可以实现多视图的单页 Web 应用（single page web application，SPA）。 Vue.js 路由需要载入 vue-router 库中文文档地址：vue-router 文档。安装 1、直接下载 / CDN https://unpkg.co

Vue3 条件语句

条件判断

v-if

条件判断使用 v-if 指令，指令的表达式返回 true 时才会显示：


在元素中使用 v-if 指令：

<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 指令将根据表达式 seen 的值( true 或 false )来决定是否插入 p 元素。

因为 v-if 是一个指令，所以必须将它添加到一个元素上。如果是多个元素，可以包裹在 <template> 元素上，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。


在 <template> 元素上使用 v-if 指令：

<div id="app">
    <template v-if="seen">
        <h1>网站</h1>
        <p>Google</p>
        <p>lvstudy</p>
        <p>Taobao</p>
    </template>
</div>
    
<script>
const app = {
  data() {
    return {
      seen: true /* 改为false，信息就无法显示 */
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>

v-else

可以用 v-else 指令给 v-if 添加一个 "else" 块：


随机生成一个数字，判断是否大于 0.5，然后输出对应信息：

<div id="app">
    <div v-if="Math.random() > 0.5">
      随机数大于 0.5
    </div>
    <div v-else>
      随机数小于等于 0.5
    </div>
</div>
    
<script>
Vue.createApp(app).mount('#app')
</script>

v-else-if

v-else-if 即 v-if 的 else-if 块，可以链式的使用多次：


判断 type 变量的值：

<div id="app">
    <div v-if="type === 'A'">
         A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
</div>
    
<script>
const app = {
  data() {
    return {
      type: "C" 
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>

v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

v-show

我们也可以使用 v-show 指令来根据条件展示元素：


<h1 v-show="ok">Hello!</h1>