初识Vue.js

最新推荐文章于 2023-12-07 21:21:30 发布
最新推荐文章于 2023-12-07 21:21:30 发布
阅读量187 收藏
点赞数 2
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zcy3536/article/details/125322410
版权

文章目录

前言

提示：这里可以添加本文要记录的大概内容：

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

提示：以下是本篇文章正文内容，下面案例可供参考

初识Vue.js

Vue.js介绍

一、MVVM模式介绍

Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。

如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来。一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新。

当然了，在使用Vue.js时，你也可以结合其他库一起使用，比如jQuery。

下图不仅概括了MVVM模式（Model-View-ViewModel），还描述了在Vue.js中ViewModel是如何和View以及Model进行交互的。
在这里插入图片描述
ViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body元素，也可以是指定了id的某个元素。

当创建了ViewModel后，双向绑定是如何达成的呢？

首先，我们将上图中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。
从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；
从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。

二、单页面组件介绍及案例讲解

文件扩展名为 .vue 的 single-file components (单文件组件) 为前端项目开发中遇到的一系列问题提供了解决方法。

这是一个文件名为 Hello.vue 的简单实例：

<template>
  <!-- 模板，存放HTML标签 -->
</template>

<script>
  // Js 代码
export default {
  name: "Hello"

}
</script>

<style>
/* css样式 */
</style>

三、插值表达式介绍及案例讲解

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<template>
  <span>Message:{{msg}} </span>
</template>

<script>
export default {
  name: "Hello",
  data() {
    return {
      msg: "Hello World",
    };
  },
};
</script>

Mustache 标签将会被替代为对应数据对象上 msg property 的值。无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。

迄今为止，在我们的模板中，我们一直都只绑定简单的 property 键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

数据渲染

一、v-text指令介绍及案例讲解

v-text指令用于将数据填充到标签中，作用与插值表达式类似，但是没有闪烁问题：

<template>
  <span v-text="msg"></span>
</template>

<script>
export default {
  name: "Hello",
  data() {
    return {
      msg: "Hello World",
    };
  },
};
</script>

二、v-html指令介绍及案例讲解

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：

<template>
  <span v-html="msg"></span>
</template>

<script>
export default {
  name: "Hello",
  data() {
    return {
      msg: "<h1>Hello World</h1>",
    };
  },
};
</script>

你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

三、v-if介绍及案例讲解

v-if 指令用于条件性的渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候渲染

<template>
    <div id="app">
        <p v-if="is_show">这是一个p标签</p>
        <p v-if="is_have">我也是一个p标签</p>
    </div>
</template>

<script>
export default {
    data(){
        return{
            is_show: true,
            is_have: false
        }
    }
}
</script>
  • 在 JavaScript 中，true（真值）指的是在布尔值上下文中，转换后的值为真的值。
  • 所有值都是真值，除非它们被定义为 假值（即除 false、0、“”、null、undefined 和 NaN 以外皆为真值）

案例：动态切换内容

<template>
    <div id="app">
        <input type="radio" name="gender" value="男" v-model="msg">男
        <input type="radio" name="gender" value="女" v-model="msg">女
        <input type="radio" name="gender" value="人妖" v-model="msg">人妖
        <input type="radio" name="gender" value="保密" v-model="msg">保密

        <h2 v-if="msg == '女'">你是一个Girl</h2>
        <h2 v-else-if="msg == '男'">你是一个Boy</h2>
        <h2 v-else-if="msg == '人妖'">你是一个LadyBoy</h2>
        <h2 v-else>你是一个神秘的人</h2>
    </div>
</template>

<script>
export default {
    data(){
        return{
            msg: "保密",
        }
    }
}
</script>

四、v-show介绍及案例讲解

  • v-show 和 v-if 的用法和效果看起来是一样的
<template>
    <div id="app">
        <input type="button" value="点击" @click="btn">
        <h2 v-show="a">嗨，我在</h2>
    </div>
</template>

<script>
export default {
    data(){
        return{
            a: true
        }
    },
    methods:{
        btn(){
            this.a = !this.a
        }
    }
}
</script>

v-if和v-show异同介绍

  • v-if 是控制元素是否在 DOM 渲染，实现显示和隐藏
  • v-show 是控制元素的 CSS 属性 display，实现显示和隐藏

v-for

一、v-for介绍及案例讲解

  • v-for 可以循环遍历数据，并渲染出多个标签
  • 在v-for指令操作里 a in b是必要格式
  • v-for 可以循环遍历数据，并渲染出多个标签
<div id="app">
    <p v-for="i in 8">
        {{i}}
    </p>
</div>
在v-for指令操作里 a in b是必要格式

v-for 可以循环遍历数据，并渲染出多个标签

二、循环数组介绍及案例讲解

  • 遍历数组时，i 是数组中的值，k 是索引

遍历数组介绍及案例讲解 ★★★★

<template>
    <div id="app">
        <p v-for="(i, k) in list_">
            {{i}} {{k}}
        </p>
    </div>
</template>
<script>
export default {
    data(){
        return{
            list_: [2,4,6,8,10]
        }
    }
}
</script>

三、循环对象介绍及案例讲解

  • v-for 支持最多三个参数，同时获取遍历对象的key和value值，以及index索引位置要注意的是，此时的key和value和python中的顺序是颠倒的，key在后，value在前

v-for 支持最多三个参数，同时获取遍历对象的key和value值，以及index索引位置

要注意的是，此时的key和value和python中的顺序是颠倒的，key在后，value在前

<template>
    <div id="app">
        <p v-for="(value, key, i) in user">
            {{i}}--{{key}}--{{value}}
        </p>
    </div>
</template>

<script>
export default {
    data(){
        return{
            user: {
                name: "张三",
                age: 18
            }
        }
    }
}
</script>

v-on

一、v-on介绍及案例讲解

v-on给元素绑定对应事件,可以缩写为@

<template>
  <div>
      <! -- <button v-on:click="btn">弹框</button> -->
    <!-- 效果和上面等同 -->
    <button @click="btn">弹框</button>
      
  </button>
  </div>
</template>

<script>
export default {
    methods:{
        btn(){
            alert(111)
        }
    }
}
</script>

二、事件修饰符介绍与案例讲解

1、阻止冒泡 .stop介绍及案例讲解
  • 比如一个按钮在一个div中,并且按钮和div均有自己的事件,那么此时点击按钮,事件会像冒泡一样从按钮开始一直到div进行触发,.stop`用来阻止默认的事件触发行为
<template>
  <div id="app">
      <p @click="pClick">
          <input type="button" value="按钮" @click.stop="btnClick">
      </p>
  </div>
</template>

<script>
export default {
    methods:{
        pClick() {
            console.log("p点击被触发了")
        },
        btnClick() {
            console.log("按钮点击被触发了")
        }
    }
}
</script>
2、阻止默认 .prevent介绍及案例讲解
  • 比如像a标签这样的,在点击时他有默认的跳转动作,可以通过.prevent阻止该默认行为
<template>
  <div id="app">
      <a v-bind:href="url" :id="msg + '123'" @click.prevent="aClick">百度 </a>
  </div>
</template>

<script>
export default {
    name: 'one',
    data(){
        return{
            url: "http://www.baidu.com",
            msg:"bd"
        }
    },
    methods:{
        aClick(){
                  console.log("链接被点击啦")
              }
    }
}
</script>
3、捕获事件 .capture介绍及案例讲解

  • 默认的事件触发处理机制是冒泡机制，通过.capture即可将冒泡顺序从里向外，颠倒顺序

  • 也可理解为在冒泡机制中,谁有该修饰符，先触发谁的事件

<template>
  <div id="app">
      <p @click.capture="pClick">
          <input type="button" value="按钮" @click="btnClick">
      </p>
  </div>
</template>

<script>
export default {
    name: 'one',
    data(){
        return{
            msg:'hello'
        }
    },
    methods:{
        pClick() {
            console.log("p点击被触发了")
        },
        btnClick() {
            console.log("按钮点击被触发了")
        }
    }
}
</script>
4、 自身事件 .self介绍及案例讲解

  • 与capture和冒泡不同,.self只有是自身触发的当前的事件才真正执行处理的回调函数

  • 并且.self只会阻止当前元素的事件触发行为

<template>
    <div @click="divClick" class="div1">
        <p @click.self="pClick" class="p1">
            <input type="button" value="按钮" @click="btnClick">
        </p>
    </div>
</template>

<script>
export default {
    name: 'one',
    data(){
        return{
            msg:'hello'
        }
    },
    methods:{
        divClick() {
            console.log("盒子点击被触发了")
        },
        pClick() {
            console.log("p点击被触发了")
        },
        btnClick() {
            console.log("按钮点击被触发了")
        }
    }
}
</script>
5、 单次事件 .once介绍及案例讲解
  • 使用.once只触发一次事件函数
<template>
    <div id="app">
        <input type="button" value="提交" @click.once="btn">
    </div>
</template>

<script>
export default {
    name: 'one',
    data(){
        return{
            msg:'hello'
        }
    },
    methods:{
        btn(){
            alert(1111)
        }
    }
}
</script>

总结

1.了解MVVM开发模式
2.掌握Vue实例对象构造
3.掌握页面数据渲染
3.掌握v-for、v-on

zcy3536
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
【前端框架开发 | Vue.js | 第一篇】Vue.js框架简介、安装及打包教程
等风来
08-31 2万+
正式开始学习前 确保你已学过前端三件套 HTML CSS JavaScriptVue.js是一种流行的JavaScript前端框架，用于构建交互式的、响应式的用户界面。它是一种轻量级、灵活和易于学习的框架，广泛应用于现代Web应用程序开发中。前端框架那么多，为什么Vue.js非学不可？Vue.js的简洁语法和易用性使得它成为构建现代Web应用程序的优秀选择，无论是小型项目还是大型复杂的应用都能发挥出色的效果。Vue.js使用双向绑定的数据模型，将数据和视图进行关联。
初识 Vue.js 中的 *.Vue文件
11-27
什么是Vue.js？ vue.js是一套构建用户界面的渐进式框架，它采用自底向上增量开发的设计。（自底向上设计方法是根据系统功能要求，从具体的器件、逻辑部件或者相似系统开始，凭借设计者熟练的技巧和丰富的经验，通过...
Vue.js快速入门+项目实战（源码）
热门推荐
王俊的博客
06-12 3万+
Vue.js电影网站项目github 链接（如果觉得有用记得start哦~）:项目源代码链接 目录 前言 安装 Vue.js 1.Vue.js主要特性 2.Vue.js实例 3.Vue.js路由 4.Vue.js模板 5.条件渲染 6.列表渲染 7.事件处理 ES6常用语法 使用Babel进行ES6的转化 WebPack 构建第一个Vue.js项目 Vue......
Vue.js 基础
weixin_58227247的博客
02-21 2042
​ 在使用了 Vue 的页面中，Vue 会，从而页面的结构。 入手Vue ​ 1.想让Vue工作，首先就是创建一个Vue实例，并且要传入一个配置对象 ​ 2.打造 Vue的模板语法 插值语法 用于解析标签体内容 {{ xxx }} xxx 是js表达式,可以直接读取到 data 中的所有属性 ​ 指令语法 用于解析标签(包括:标签属性 标签体内容 绑定事件…) v-bind:href=‘xxx’ 或 简写为 :href=‘xxx’ ,其中 xxx 同样是js表达式,并且可以直接读取到
Vue.js介绍
qq_53841687的博客
07-25 1万+
任真学习，努力向上
Vue.js 简介
wang_zhao_的博客
04-13 1759
一、Vue.js 简介1.1 认识 Vue.js1.2 Vue.js 安装1.3 Vue.js 初体验案例一案例二案例三1.4 Vue.js 的 MVVM1.5 Vue 实例的 options1.6 Vue 的生命周期 1.1 认识 Vue.js Vue (读音 /vjuː/，类似于 view) Vue 是一套用于构建用户界面的渐进式框架，什么是渐进式的呢？ 渐进式意味着你可以将 Vue 作为你应用的一部分嵌入其中，带来更丰富的交互体验体验。 或者如果你希望将更多的业务逻辑使用使用 Vue 实现，
初识简单却不失优雅的Vue.js
10-21
主要为大家介绍了简单却不失优雅、小巧而不乏大匠的Vue.js,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue.js开发教程
最新发布
2301_78112500的博客
12-07 231
1、第一步 引入vue.js
JavaWeb『Vue.js』快速入门
不会敲代码的z的博客
06-02 1548
这是基于javaweb学习的vue基础知识，能大概了解vue的基础用法......
vue.js基础01--基础用法及内部指令
muzidigbig的博客
07-25 4263
一、vue的概述及vue的入门小实例 vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。 如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作D... v-if和v-for为什么不建议同时使用
Vue.js基础知识
lp-Strive的博客
04-30 2756
一、Vue.js是什么？ 它是一套用于构建用户界面的渐进式框架。其设计为自底向上逐层应用。Vue只关心视图层。 二、声明式的渲染 1、 Vue.js的核心是采用简洁的模板语法来声明式地将数据渲染到DOM系统 <div id="app"> {{ message }} </div> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) 输出：Hello Vu...
Vue.js基础教程
Ronychen的博客
04-15 4544
一、简单介绍 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 二、优点 三、安装与部署 直接script标签引入 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 通过
Vue JS
没伞的孩子努力奔跑
07-27 171
一 VUE基本语法 （一）.入门步骤 1.导入vue.js文件 html下部编辑 2.指定区域进行渲染 需要准备div vue.js代码 3.创建VUE.js对象 指定渲染区域 动态调用 （二） 插值表达式: {{key}} 特点: 如果页面没有渲染完成,则直接展现给用户 插值表达式需要直接显示 （三）语法 1.const 定义常量的 * 2.let: 作用和var类似, 有作用域的概念 * 3.var 特点:没有作用域 4.el 指定区域 5.data: 定义属性 案例： &
【前端开发框架之Vue.js的基本介绍】
qq_44735180的博客
01-24 1862
Vue.js的基础知识：Vue的介绍 、学习vue之前拥有的基础、Vue的使用 、Vue的数据绑定原理
Vue.js基础知识解析：探索Vue实例
Why_does_it_work的博客
07-12 1122
Vue.js是一个用于构建用户界面的渐进式JavaScript框架。它被设计为易于理解和集成的，使开发者能够快速构建交互性强、高效、可复用的Web应用程序。Vue.js采用了组件化的开发模式，通过封装可重用的组件，使得构建复杂的UI界面变得简单而直观。
Vue基础知识
weixin_44002920的博客
09-11 339
vue知识点
前端:Vue.js学习
坚持不懈的大白的博客
08-11 357
vue.js学习笔记吧！
VUE.js中文官方文档
极客云曦前端
06-09 9775
目录创建一个 Vue 应用#应用实例#根组件#挂载应用#DOM 中的根组件模板#应用配置#多个应用实例#模板语法#文本插值#原始 HTML#Attribute 绑定#简写#布尔型 Attribute#动态绑定多个值#使用 JavaScript 表达式#仅支持表达式#调用函数#受限的全局访问#指令 Directives#参数 Arguments#动态参数#修饰符 Modifiers#响应式基础#声明响应式状态#响应式代理 vs. 原始值#声明方法#DOM 更新时机#深层响应性#有状态方法#计算属性#基础示例#
精通Vue.js 2：构建动态JavaScript应用
无论你是初识Vue.js还是寻求进阶知识，这本书都能提供宝贵的指导和实践经验，帮助你避免常见问题，提升开发效率。 《Pro Vue.js 2》是一本全面而深入的Vue.js教程，它将帮助开发者建立起坚实的MVC模式理解，掌握Vue...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值