vue基础

最新推荐文章于 2024-08-08 15:28:54 发布

可爱de蓝胖子

最新推荐文章于 2024-08-08 15:28:54 发布

阅读量1k

点赞数 19

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_63757502/article/details/137064136

版权

一、vue基础使用（作者是尤雨溪）

1.1 、什么是vue.js

一套用于构建用户界面的渐进式框架。采用自底向上增量开发的设计。（单页面应用程序）
vue.js 是前端的主流框架之一，和Angular.js 、React.js 一起，并成为前端三大主流框架

1.2、 vue的核心理念

数据驱动视图，组件化开发

1.3 、为什么学习流行框架

轻量级框架：只关注视图层，是一个构建数据的试图集合
简单易学：国人开发，中文文档，不存在语言障碍，易于理解和学习
视图、数据、结构分离：使数据的更改更为简单
不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作
虚拟DOM：不再使用原生的dom操作节点极大解放dom操作
运行速度更快：相比较与react而言，vue存在很大的优势

1.4、框架和库的区别

框架：是一套完整的解决方案，对项目的侵入性加大，如果要更换框架，则需要重新架构整个项目
库：提供的一个小功能，对项目的入侵性较小，如果这个库无法满足需求，更换一个库即可

1.5 、MVC和MVVM的区别

MVC是一种设计模式，表示“Model-View-Controller”，是后端的分层开发概念
**M:模型层——model，【处理数据，与数据库打交道】**负责处理数据（是应用程序中用于处理应用程序数据逻辑的部分，模型对象负责在数据库中存取数据）
V：视图层——view，【展示数据，发送请求】 负责终端界面展示（是应用程序中处理程序显示的部分，视图是依据模型数据创建的）
**C:调度层——controller，【接受数据，响应数据，返回数据】**是应用程序中处理用户交互的部分，控制器接受用户的输入并调用模型和视图去完成用户的需求，负责维护两者之间数据传递，控制器本身不输出任何东西和做任何处理，他只是接受请求并决定调用那个模型构建处理请求，然后在确定用那个视图来显示返回的数据
MVVM表示“Model-View-ViewModel”，是前端视图层的概念，主要关注于视图层分离
**M：模型层——model，【用来处理逻辑关系】**就是业务逻辑相关的数据对象，通常从数据库映射而来，我们可以说是与数据库对应的model。
**V: 视图层——view，【用来展示数据】**展示出来的用户界面。
**VM：视图模型层——view-model，【用来连接view和model，承上启下的作用】**连接view和model的桥梁。因为model层中的数据往往是不能直接跟view中控件——对应上的，所以需要在定义一个数据对象专门对应view上的控件，而viewModel就是把model对象封装成可以显示和接受输入的界面数据对象。
在这里插入图片描述
view和viewModel之间通过双向数据绑定建立联系，当view变化时，会自动更新到viewModel，反之亦然

1.6 、vue.js的代码结构

1.引入vue.js
2.书写视图层
3.实例化Vue（）

<html>
<head>
   <!-- 1. 引入vue.js -->
   <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
   <!-- 2. 书写视图层 -->
   <div id="app">
   </div>
</body>
<script>
   // 3. 实例化Vue()
   let vm = new Vue({
       el: "#app", // 控制区域
       data: { // 存放数据
           message: 'Hello Vue!' // 存放的数据
       },
       methods: { // 存放的方法
       }
   })
</script>
</html>

1.7 、展示数据的几种方式

插值表达式{{}}：可以插入内容并进行简单的计算
v-text、v-html：
a. v-text：类似于js中innerText，将覆盖元素中所有现有的内容
b . v-html：类似于js中innerHTML，内容按普通HTML插入

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-text="message">被v-text覆盖掉的文字</div>
        <div v-text="content">被v-text覆盖掉的文字</div>
        <div v-html="message">被v-html覆盖掉的文字</div>
        <div v-html="content">被v-html覆盖掉的文字</div>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            message: '要展示的内容',
            content: "<span>这是一段富文本</span>"
        },
        methods: {}
    })
</script>
</html>

v-text与v-html的区别：
相同：都会覆盖原来的元素
不同：v-text不会解析富文本，v-html会解析富文本
富文本：由便签和属性组成的字符串
9. v-bind
当元素的属性值要求为变量时，比如class属性、style属性、value属性、href属性等等、只要是属性，我们就可以使用v-bind来绑定
元素的属性绑定：
v-bind：属性简写：属性
可以写表达式，也可以调用定义好的方法，拿到是方法的返回值

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-bind:value="message">
        // 简写
        <input type="text" :value="message">
        <img v-bind:src="link" alt="" width="300">
        // 简写
        <img :src="link" alt="" width="300">
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            message: '输入框内展示的内容',
            link: 'https://lmg.jj20.com/up/allimg/1113/041620104229/200416104229-8-1200.jpg'
        },
        methods: {}
    })
</script>
</html>

v-on
事件的绑定：v-on：事件类型简写； @事件类型

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <button v-on:click="show">点击显示内容</button>
  			// 简写
        // <button @click="show">点击</button>
        <p v-text="message"></p>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            message: ''
        },
        methods: {
            show() {
              // methods中拿到data中的数据 用this获取
                this.message = '点击按钮后页面中展示的文本内容'
            }
        }
    })
</script>
</html>

1.8、事件修饰符

.stop阻止冒泡：阻止事件继续向外传播冒泡：从里向外

<html>
<head>
   <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
   <style>
       #one {
           width: 400px;
           height: 400px;
           background-color: rgb(128, 210, 245);
       }
       #two {
           width: 300px;
           height: 300px;
           background-color: rgb(228, 193, 244);
       }
       #three {
           width: 200px;
           height: 200px;
           background-color: rgb(250, 235, 158);
       }
   </style>
</head>

<body>
   <div id="app">
       <div id="one" @click="one">
           <!-- 给two盒子的点击事件添加.stop修饰符 阻止冒泡 -->
           <div id="two" @click.stop="two">
               <div id="three" @click="three"></div>
           </div>
       </div>
   </div>
</body>
<script>
   let vm = new Vue({
       el: "#app",
       data: {},
       methods: {
           one() {
               console.log('单击one盒子了');
           },
           two() {
               console.log('单击two盒子了');
           },
           three() {
               console.log('单击three盒子了');
           }
       }
   })
</script>
</html>

在这里插入图片描述

.capture 添加事件捕获模式捕获：从外向里先捕获后冒泡

<body>
    <div id="app">
        <!-- 给one盒子的点击事件添加捕获.capture修饰符 -->
        <div id="one" @click.capture="one">
            <div id="two" @click="two">
                <div id="three" @click="three"></div>
            </div>
        </div>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {},
        methods: {
            one() {
                console.log('单击one盒子了');
            },
            two() {
                console.log('单击two盒子了');
            },
            three() {
                console.log('单击three盒子了');
            }
        }
    })
</script>

在这里插入图片描述
3. . self 当事件作用于本身的时候触发

<body>
    <div id="app">
        <div id="one" @click="one">
            <!-- 给two盒子的点击事件添加.self修饰符 -->
            <div id="two" @click.self="two">
                <div id="three" @click="three"></div>
            </div>
        </div>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {},
        methods: {
            one() {
                console.log('单击one盒子了');
            },
            two() {
                console.log('单击two盒子了');
            },
            three() {
                console.log('单击three盒子了');
            }
        }
    })
</script>

在这里插入图片描述
4. .once 只触发一次

<body>
    <div id="app">
        <div id="one" @click="one">
            <!-- 给two盒子的点击事件添加.once修饰符 -->
            <div id="two" @click.once="two">
                <div id="three" @click="three"></div>
            </div>
        </div>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {},
        methods: {
            one() {
                console.log('单击one盒子了');
            },
            two() {
                console.log('单击two盒子了');
            },
            three() {
                console.log('单击three盒子了');
            }
        }
    })
</script>

在这里插入图片描述
5. .prevent 阻止默认事件

<body>
    <div id="app">
        <!-- 给链接标签的点击事件添加.prevent修饰符 -->
        <a href="#" @click.prevent="tap">点击链接</a>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {},
        methods: {
            tap() {
                console.log('阻止默认事件');
            }
        }
    })
</script>

在这里插入图片描述

1.9 数据双向绑定（表单控件）v-model

原理：
通过数据劫持结合发布订阅模式的方式来实现的，通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布信息给订阅者,触发相应的监听回调来渲染视图

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model:value=first> + <input type="text" v-model:value=second> <button
            @click="add">=</button> <input type="text" v-model:value=result>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            first: '',
            second: '',
            result: ''
        },
        methods: {
            add() {
                // 获取到的input框的value值都是字符串类型
                this.result = Number(this.first) + Number(this.second)
            }
        }
    })
</script>
</html>

在这里插入图片描述

1.10 vue中的样式的使用

使用class样式
a. 数组
b.三目表达式
c. 对象对象的键是样式的名字，值是Boolean类型
d. 数组内置对象
使用style样式
a. 直接在元素上通过 :style 的形式，书写样式对象
b. 对象
c.数组内置对象
d.函数返回值

1.11 v-for和key属性

遍历数组

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- item：数组的每一项   index：数组的索引（索引从0开始） -->
        <div v-for="(item,index) in list" :key="item">{{item}}</div>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            list: [
                1, 2, 3, 4
            ]
        },
        methods: {}
    })
</script>
</html>

遍历对象

<html>
<head>
   <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
   <div id="app">
       <!-- value：值   key：键   index：索引 -->
       <div v-for="(value,key,index) in obj" :key="value">{{value}}</div>
   </div>
</body>
<script>
   let vm = new Vue({
       el: "#app",
       data: {
           obj: {
               name1: '小明',
               name2: '小红',
               name3: '小花',
               name4: '小亮',
           }
       },
       methods: {}
   })
</script>
</html>

遍历数字遍历的为遍数

<!-- 索引从1开始 -->
<div v-for="num in 10">{{num}}</div>

key属性
a. 必须是唯一值
b.必须是数字或者字符串
c. 作用:提高重排效率,就地复用

1.12 v-if和v-show的区别

相同点:都可以进行元素的隐藏
不同点:v-if通过删除DOM元素进行隐藏,v-show通过display:none进行隐藏
应用场景:v-if用于少次的切换,v-show应用于频繁切换

可爱de蓝胖子

关注

19
点赞
踩
30

收藏

觉得还不错? 一键收藏
1
评论
vue基础

一、vue基础使用（作者是尤雨溪）1.1 、什么是vue.js一套用于构建用户界面的渐进式框架。采用自底向上增量开发的设计。（单页面应用程序）vue.js 是前端的主流框架之一，和Angular.js 、React.js 一起，并成为前端三大主流框架1.2、 vue的核心理念数据驱动视图，组件化开发1.3 、为什么学习流行框架轻量级框架：只关注视图层，是一个构建数据的试图集合简单易学：国人开发，中文文档，不存在语言障碍，易于理解和学习视图、数据、结构分离：使数据的更改更为简单不需要
复制链接

扫一扫