AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Vue

2024-01-24 49
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Vue.js是一个开源的JavaScript框架，用于构建用户界面。它采用了组件化的开发方式，让开发者可以将复杂的UI界面拆分成独立的可重用组件，并通过组合这些组件来构建整个应用程序。

1、什么是Vue

  • Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写
  • 基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程关注点放在数据上
  • 官网：： https://cn.vuejs.org

image-20240124095014013

2、Vue快速入门

Vue 核心对象：每一个 Vue 程序都是从一个 Vue 核心对象开始的。

选项列表：

el 选项： 选择器，用于指定视图区域，此区域下的所有表达式、事件等内容都会受到vue的控制。

data 选项：用于保存当前 Vue 对象中的数据。这里设置的数据是初始化数据, 这里的数据改变,引用的地方也会改变

methods 选项：用于定义方法。方法可以直接通过对象名调用，也可以在方法内部通过this来调用。

数据绑定：

在视图部分获取脚本部分的数据。格式：{ {变量名}}

操作流程

1、新建 HTML 页面，引入 Vue.js文件

<script src="js/vue.js"></script>

2、在JS代码区域，创建Vue核心对象，进行数据绑定

new Vue({
   
   
    el:"#div",  //通过id选择器，将视图和vm进行绑定
    data(){
   
   
        return{
   
   
            username:"vue"
        }
    }
})

3、编写视图

<div id="div">
    {
   
   {
   
   username}}
</div>

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello vue</title>
    <!--1、引入vue.js-->
    <script src="js/vue.js"></script>
</head>
<body>

    <!--3、创建视图-->
    <!--{
   
   {}}表示插值表达式-->
    <div id="div">
        {
  
  {username}}
    </div>


    <!--2、在script标签中编写vue核心对象-->
    <script>
        new Vue({
    
    
            el:"#div",  //通过id选择器，将视图和vm进行绑定
            data(){
    
    
                return{
    
    
                    username:"vue"
                }
            }
        })
    </script>
</body>
</html>

3、Vue常用指令

指令：HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for…

常用指令

指令 作用
v-bind 为HTML标签绑定属性值，如设置 href , css样式等
v-model 在表单元素上创建双向数据绑定
v-on 为HTML标签绑定事件
v-if 条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else 条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else-if 条件性的渲染某元素，判定为true时渲染,否则不渲染
v-show 根据条件展示某元素，区别在于切换的是display属性的值
v-for 列表渲染，遍历容器的元素或者对象的属性
v-text 设置标签的文本值 等价于插值表达式
v-html 标签体绑定html代码字符串，类似于innerHTML的功能
3.1、v-text & v-html
指令 作用
v-text 设置标签的文本值
v-html 标签体绑定html代码字符串，类似于innerHTML的功能 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本插值</title>
</head>
<body>
<!--    3、创建视图-->
    <div id="div">
        <!--示例：使用3种方式设置span标签体的内容-->
        <div>方式1：<span>{
  
  {msg}}</span></div>
        <div>方式2：<span v-text="msg"></span></div>
        <div>方式3：<span v-html="msg"></span></div>
    </div>
</body>
<!--1、引入js-->
<script src="js/vue.js"></script>
<script>
    //目标：给视图标签体绑定数据
    //方式1：{
    
    {变量名}} 插入值表达式，标签体绑定文本字符串，类似于innerText的功能
    //方式2：v-text="变量名"，与{
    
    {变量名}}功能一样
    //方式3：v-html="变量名"，标签体绑定html代码字符串，类似于innerHTML的功能
    //       v-html 或 v-text 都是设置在视图标签的属性位置
    // 2、创建核心对象
    new Vue({
    
    
        el:"#div",
        data:{
    
    
            msg:"<h1>Hello Vue</h1>"
        }
    });
</script>
</html>

1、{ {变量名}} 插入值表达式，标签体绑定文本字符串，类似于innerText的功能

2、v-text="变量名"，与{ {变量名}}功能一样

3、v-html="变量名"，标签体绑定html代码字符

3.2、v-if & v-show
指令 作用
v-if 条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else 条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else-if 条件性的渲染某元素，判定为true时渲染,否则不渲染
v-show 根据条件展示某元素，区别在于切换的是display属性的值 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件渲染</title>
</head>
<body>
    <div id="div">
        <!--
        示例1：使用v-if控制div标签显示
          有四个条件：type值等于A或B或C或D，则显示"优秀"或"良好"或"及格"或"不及格"所在的div
-->
        <div v-if="type=='A'">优秀</div>
        <div v-else-if="type=='B'">良好</div>
        <div v-else-if="type=='C'">及格</div>
        <div v-else>不及格</div>

        <!--
        示例2：使用v-show控制div显示与隐藏
        -->
        <div v-show="type=='A'">优秀</div>
        <div v-show="type=='B'">良好</div>
        <div v-show="type=='C'">及格</div>
        <div v-show="type=='D'">不及格</div>


    </div>
</body>
<script src="js/vue.js"></script>
<script>
    /*
    * 目标：讲解if条件表达式
    * if语法：
    *   <标签名 v-if="条件">标签体</标签名>  条件成立标签存在，否则整个标签会被删除
    *   <标签名 v-else-if="条件">标签体</标签名>  条件成立标签存在，否则整个标签会被删除
    *   <标签名 v-else="条件">标签体</标签名>  上面的条件都不成立就会这个成立，这个标签就会存在，否则整个标签会被删除
    * show语法：      
    *    <标签名 v-show="true">标签体</标签名>  设置标签显示
    *    <标签名 v-show="false">标签体</标签名> 设置标签不显示
    *    
    * v-if与v-show区别：
    *    相同点：都是控制元素是否显示
    *    不同点：底层原理不一样
    *        v-if 如果条件为false，页面中根本没有这个元素
    *        v-show如果条件为false，页面中有这个元素只不过它的display属性值为none
    * */
    new Vue({
    
    
        el:"#div",
        data:{
    
    
            type:"B"
        }
    });
</script>
</html>
3.3、v-for
指令 作用
v-for 列表渲染，遍历容器的元素或者对象的属性 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表渲染</title>
</head>
<body>
<div id="div">
    <!--v-for：列表渲染，遍历容器的元素或者对象的属性。-->
    <h3>v-for循环方式1：固定循环次数</h3>
        <!--
          语法：<标签名 v-for="变量名 in 整数">{
   
   {num}}</标签名>
          示例：输出5遍hello world
        -->
        <div v-for="i in 5">{
  
  {i}}</div>

    <h3>v-for循环方式2：遍历普通数组</h3>
         <!--
          语法：<标签名 v-for="变量名 in 数组">{
   
   {element}}</标签名>
          示例：遍历的数组：names:["张三","李四","王五"]，输出打印格式：姓名：xxx
         -->
        <div v-for="name in names">{
  
  {name}}</div>

    <h3>v-for循环方式3：遍历对象数组</h3>
        <!--
          语法：<标签名 v-for="element in 对象数组">{
   
   {element}}</标签名>
               element含义：遍历对象数组中每个对象
          示例：遍历对象数组，对象数组如下，输出格式：姓名,年龄
                 students:[
                        {name:"张三",age:23},
                        {name:"李四",age:25},
                        {name:"王五",age:28}
                    ]

        -->
        <div v-for="student in students">name:{
  
  {student.name}}，age:{
  
  {student.age}}</div>

    <h3>v-for循环方式4：遍历对象数组带索引</h3>
        <!--
         语法：<标签名 v-for="(element,i) in 对象数组">{
   
   {element}}</标签名>
              element含义：遍历的数组中每个元素对象
              i含义：循环的索引
         示例：遍历对象数组，对象数组如下，输出格式：姓名,年龄,索引
                 students:[
                        {name:"张三",age:23},
                        {name:"李四",age:25},
                        {name:"王五",age:28}
                    ]
        -->
        <div v-for="(student,index) in students">name:{
  
  {student.name}}，age:{
  
  {student.age}},index:{
  
  {index}}</div>


</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
    
    
        el:"#div",
        data:{
    
    
            names:["张三","李四","王五"],
            student:{
    
    
                name:"张三",
                age:23
            },
            students:[
                {
    
    name:"张三",age:23},
                {
    
    name:"李四",age:25},
                {
    
    name:"王五",age:28}
            ]
        }
    });
</script>
</html>
3.4、v-on
指令 作用
v-on 为HTML标签绑定事件 
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件绑定</title>
</head>

<body>
    <div id="div">
        <div>{
  
  {name}}</div>
        <!--
            v-on：为 HTML 标签绑定事件
            完整语法：<标签名 v-on:事件名="vue中methods里面的函数名()"></标签>
            简写语法：<标签名 @事件名="vue中methods里面的函数名()"></标签>
        -->
        <button v-on:click="change()">单击_改变div的内容</button>
        <button v-on:dblclick="change()">双击_改变div的内容</button>

        <button @click="change()">简写单击_改变div的内容</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
    
    
        el:"#div",
        data:{
    
    
            name:"javascript"
        },
        methods:{
    
    
          change(){
    
    
                if(this.name=="javascript"){
    
    
                    this.name="vue"
                }else {
    
    
                    this.name = "javascript"
                }
            }
        }
    });

</script>
</html>
3.5、v-bind
指令 作用
v-bind 为HTML标签绑定属性值，如设置 href , css样式等 
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绑定属性</title>
    <style>
        .my{
    
    
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div id="div">
        <!--
            示例2：使用完整模式（<标签 v-bind:属性名="变量名">）给href属性绑定模型数据url
        -->
        <a v-bind:href="url">百度</a>
        <br>
        <!--
            示例3：使用简化模式（<标签 :属性名="变量名">）给href属性绑定模型数据url
        -->
        <a :href="url">百度</a>
        <br>
        <!--
            示例4：使用简化模式给class属性绑定模型数据cls
        -->
        <div :class="cls">我是div</div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    /*
    * 目标：使用vue中指令v-bind给标签属性绑定数据
    * 语法1：完整模式
    *       <标签 v-bind:属性名="变量名">
    * 语法2：简化模式
    *       <标签 :属性名="变量名">   //v-bind可以省略
    * 注意： <标签 属性名="{
    
    {变量名}}"> 这是不可以的，插入值表达式{
    
    {变量名}} 只能放在标签体内
    * */
    new Vue({
    
    
        el:"#div",
        data:{
    
    
            url:"https://www.baidu.com/",
            cls:"my"
        }
    });
</script>
</html>
3.6、v-model

双向数据绑定

  • ​ 更新 data 数据，html页面中的数据也会更新。
  • ​ 更新html页面数据，data 数据也会更新。

image-20240124130706657

指令 作用
v-model 在表单元素上创建双向数据绑定 
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单绑定</title>
</head>
<body>
    <div id="div">
        <form autocomplete="off">
            <!--
                单向绑定: model数据改变了  ==》 视图的数据也会变
                         视图的数据改变了，Model不会被影响
            -->
            姓名_单向绑定：<input type="text" name="username" v-bind:value="username">
            <br>
            <!--
                双向绑定：model数据改变了 《==》 视图的数据也会变
                        视图的数据改变了，Model会被影响
            -->
            姓名_双向绑定：<input type="text" name="username" v-model="username">
            <br>

        </form>

        <hr>
        <h3>{
  
  {username}}</h3>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    /*
    * 目标：使用v-model实现MVVM双向数据绑定
    *      注意：不用v-model就是单向，使用就是双向
    * */
    new Vue({
    
    
        el:"#div",
        data:{
    
    
            username:"张三",

        }
    });
</script>
</html>

4、Vue生命周期

从Vue实例创建到销毁的整个过程

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)

状态 阶段周期 视图和模型状态
beforeCreate 创建前 视图对象没有，模型对象没有
created 创建后 视图对象没有，模型对象有
beforeMount 载入前 视图对象有，模型对象有，没有绑定数据
mounted 挂载完成 试图对象有，模型对象有，数据绑定，可以数据展现：发送异步请求获取服务器数据返回模型，然后和视图进行绑定
beforeUpdate 更新前 更新模型数据前，视图显示旧的数据
updated 更新后 更新模型数据后，视图显示新的数据
beforeDestroy 销毁前 视图和模型对象没有销毁
destroyed 销毁后 视图和模型对象都被销毁

image-20240124161331906

文章标签：
JavaScript
前端开发
容器
数据格式
开发者
小小小林
目录
相关文章
我是快乐的嘟嘟
|
19天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具，正确配置和运行预渲染操作，结合其他 SEO 策略，可以实现更好的搜索引擎优化效果。同时，需要不断地监控和优化预渲染效果，以适应不断变化的搜索引擎环境和用户需求。
我是快乐的嘟嘟
117 63
我是快乐的嘟嘟
|
5天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking？
通过以上针对 Webpack 或 Rollup 的配置方法，就可以在 Vue 项目中有效地启用 Tree Shaking，从而优化项目的打包体积，提高项目的性能和加载速度。在实际配置过程中，需要根据项目的具体情况和需求，对配置进行适当的调整和优化。
我是快乐的嘟嘟
64 26
html的七十二变
|
5天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时，性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题，并提供了优化建议，帮助开发者提高应用性能。
html的七十二变
25 8
html的七十二变
|
5天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中，合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法，有效提升应用的响应性和可维护性。
html的七十二变
18 7
html的七十二变
|
5天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化，但使用场景不同。`computed` 用于计算属性，依赖于其他数据自动更新；`watch` 用于监听数据变化，执行异步或复杂操作。
html的七十二变
22 5
游客ady5kpv352g3u
|
4天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客！我是一名自学了2年半前端的大一学生，熟悉JavaScript与Vue，目前正在向全栈方向发展。如果你从我的博客中有所收获，欢迎关注我，我将持续更新更多优质文章。你的支持是我最大的动力！🎉🎉🎉
游客ady5kpv352g3u
15 3
html的七十二变
|
6天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法，包括 props、事件、Vuex 状态管理等，帮助开发者选择最适合项目需求的通信方式，提高开发效率和代码可维护性。
html的七十二变
21 5
游客ady5kpv352g3u
|
4天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客！我是瑞雨溪，一名热爱JavaScript和Vue的大一学生。自学前端2年半，熟悉JavaScript与Vue，正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等，希望能对你有所帮助。关注我，持续更新中！🎉🎉🎉
游客ady5kpv352g3u
13 2
html的七十二变
|
6天前
|
存储 JavaScript
Vue 组件间如何通信
Vue组件间通信是指在Vue应用中，不同组件之间传递数据和事件的方法。常用的方式有：props、自定义事件、$emit、$attrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
html的七十二变
17 4
游客zi3qmblbcdexu
|
11天前
|
JavaScript
Vue基础知识总结 4：vue组件化开发
Vue基础知识总结 4：vue组件化开发
游客zi3qmblbcdexu
33 6

热门文章

最新文章

  • 1
    vite 如何做到让 vue 本地开发更快速？
  • 2
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 3
    自制简单的range（Vue）
  • 4
    vite原理之解析.vue文件
  • 5
    如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
  • 6
    vue 里怎么使用 echarts 实现地图自动轮播功能、自定义 tooltip 悬浮位置提示、自定义 label 标签位置样式？
  • 7
    Vue3中的jsx的简单体验，在vue3中使用jsx语法
  • 8
    vue里怎么使用pdf.js实现pdf文件的预览功能
  • 9
    vue3的动态组件 component （点击顶部切换下面展示对应的组件内容）
  • 10
    Vue+ElementUI 搭建后台管理系统（实战系列八）
  • 1
    vue代码优化方案
    54
  • 2
    前端框架与库 - Vue.js基础：模板语法、数据绑定
    134
  • 3
    在Vue中，子组件向父组件传递数据
    77
  • 4
    【vue3】Argumnt of type ‘history:RouterHistory；}is not assignable to paraeter of type ‘RouterOptions‘.
    98
  • 5
    【vue3】vue3中路由hash与History的设置
    212
  • 6
    【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
    1140
  • 7
    【vue】 el-table解决分页不能筛选全部数据的问题
    473
  • 8
    【vue】 vue2 监听滚动条滚动事件
    144
  • 9
    【天地图】vue 天地图 T is not defined
    176
  • 10
    【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面，显示空白bug不能编辑
    616

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • React 入门与实战

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索
    • 下一篇
    阿里云OSS设置跨域访问