VUE-基础使用

最新推荐文章于 2024-07-27 07:15:00 发布

我们仰望同一片星空

最新推荐文章于 2024-07-27 07:15:00 发布

阅读量55

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_49491274/article/details/130960897

版权

Vue核心理念：数据驱动视图、组件化

1.什么是vue.js

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！

Vue是单页面框架，通过默认让某一个页面显示，来模拟一个页面跳转的方式

2.为什么学习流行框架

企业为了提高开发效率：在企业4E2D，时间就是效率，效率就是金钱；

提高开发效率的发展历程：原生JS -> Jquery之类的类库 -> 前端模板引擎 -> Angular.js / Vue.js

能够帮助我们减少不必要的DOM操作；提高渲染效率；双向数据绑定的概念【通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了】

在Vue中，一个核心的概念，就是让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑；

3.框架和库的区别

框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。

库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。

4.MVC与MVVM的区别

MVC 是后端的分层开发概念;moudle,view,controller

MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分Model（模型层）、View（视图层）、VM ViewModel(数据调度:插值表达式);

5.Vue.js的代码结构

引入vue.js

写视图层，我们要展示的内容

实例化Vue()

data：存放数据

el：这个控制是哪块视图——控制区域

methods：放我们的方法

写方法的时候我们需要注意this的指向问题：vue方法中的this指向vue实例

6.插值表达式、v-cloak、v-text、v-html

v-clock：防止界面闪烁

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-clock防止界面闪烁</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>

<body>
    <!-- 视图层 -->
    <div id="app">
        <!-- 在我们vue加载之前v-cloak是存在，vue加载结束之后v-cloak就隐藏了，利用这个特性可以实现：界面防止闪烁 -->
        <p v-cloak>
            -----------{{ message }}---------------
        </p>
        <!-- 使用v-text给界面元素赋值 -->
        <!-- 如果我们想在变量之前或者后面加一些内容的话使用插值表达式 -->
        <!-- 如果我们想直接覆盖元素内容的话使用v-text指令 -->
        <p v-text='message'>------------------------</p>
        <p v-text='html'>------------------------</p>
        <!-- 通过v-html指令把字符串解析成html的内容 -->
        <p v-html = 'html'>1111</p>
    </div>

    <!-- 1、引入vue的js，引入js之后他为我们提供了Vue类 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // 调度层
        var vm = new Vue({
            // vue控制的区域
            el: '#app',
            // data参数存放我们的数据，这一层就是mvvm里的model层
            data: {
                message: 'Hello Vue!',
                html:'<h1>这是一个很大的标题</h1>'
            }
        })
    </script>
</body>

</html>

插值表达式{{}}，可以在前后插入一些内容

v-text：会替换掉元素里的内容，不会解析富文本，会覆盖原有内容

v-html：可以渲染html界面，会解析富文本，会覆盖原有内容

7. v-bind：界面元素属性值的绑定，简写‘：’

界面元素属性值的绑定

括号里不加引号的都是我们data里的数据读取
如果想使用字符串需要加上额外的引号，如：src=“’https://’+src1”
里面可以写表达式，如：src=“baseurl+src1”
里面也可以调用定义好的方法，拿到的是方法的返回值

示例：<button v-bind:title="nihao">按钮</button>

简写：<button :title="nihao">按钮</button>

8. v-on：进行事件的绑定，简写：‘@’

示例：<button v-on:click="lang">浪起来</button>

简写：<button @click="lang">浪起来</button>

9.事件修饰符

.stop 阻止冒泡,本身阻止冒泡后，本身还有，外边就没有了

.prevent 阻止默认事件

可链式调用，既可以组织冒泡，又可以阻止默认

比如：@click.prevent.stop

.capture 添加事件侦听器时使用事件捕获模式

.self 只当事件在该元素本身（比如不是子元素）触发时触发回调

.once 事件只触发一次

10. v-model数据双向绑定

作用：数据双向绑定，数据驱动视图，数据发生变化，页面会对应更新，页面数据更新，数据也会更新
注意：绑定的是表单控件

示例：

11. Vue中样式的使用

使用class样式:

数组
三目表达式
数组内置对象（对象的键是样式的名字，值是Boolean类型）
直接通过对象

<!DOCTYPE html>
<html lang="zh_cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>class样式的使用</title>
    <style>
        .first {
            color: red;
        }

        .second {
            font-size: 25px
        }
    </style>
</head>

<body>
    <div id='app'>
        <p class="first second">这是一段文字...</p>
        <!-- 使用vue设置多个样式的时候可以使用数组 -->
        <p :class="[pClass,flag?'second':'']">这是一段文字...</p>
        <!-- 当我们根据某个条件显示某个样式的时候可以使用对象的方式 -->
        <!-- 对象里的键就是我们显示的样式，值是个bool类型，就是我们是否显示这个样式 -->
        <p :class="[pClass,{'second':flag}]">这是一段文字...</p>
        <!-- 直接使用对象，对象里的键就是我们显示的样式，值是个bool类型，就是我们是否显示这个样式 -->
        <p :class="{'first':false,'second':true}">这是一段文字...</p>
    </div>
    <!-- 1、引入vue的js，引入js之后他为我们提供了Vue类 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // 调度层
        var vm = new Vue({
            // vue控制的区域
            el: '#app',
            // data参数存放我们的数据，这一层就是mvvm里的model层
            data: {
                message: 'Hello Vue!',
                pClass: 'first',
                flag: true
            }
        })
    </script>
</body>
</html>

使用内联样式

直接在元素上通过 :style 的形式，书写样式对象
将样式对象，定义到 data 中，并直接引用到 :style 中
1. 在data上定义样式
2. 在元素中，通过属性绑定的形式，将样式对象应用到元素中
在 :style 中通过数组，引用多个 data 上的样式对象
1. 在data上定义样式
2. 在元素中，通过属性绑定的形式，将样式对象应用到元素中

4. 利用函数返回值，在函数名后加小括号调用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>style样式的使用</title>
</head>

<body>
    <!-- 视图层 -->
    <div id="app">
        <!-- 插值表达式，可以读取我们的变量 -->
        <!-- !!!键如果包含-的话，我们必须要加上引号 -->
        <div :style="{'font-size':'32px'}">{{message}}</div>
        <div :style="textStyle">{{message}}</div>
        <div :style="[textStyle,textStyle2]">{{message}}</div>
        <div :style="getStyle(2)">{{message}}</div>
    </div>

    <!-- 1、引入vue的js，引入js之后他为我们提供了Vue类 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // 调度层
        var vm = new Vue({
            // vue控制的区域
            el: '#app',
            // data参数存放我们的数据，这一层就是mvvm里的model层
            data: {
                message: 'Hello Vue!',
                textStyle: {
                    color: 'red',
                    'font-size': '50px'
                },
                textStyle2: {
                    'font-weight': '600'
                }
            },
            methods: {
                getStyle(num) {
                    let obj = {
                        color: 'red',
                        'font-size': '50px'
                    };
                    if (num == 1) {
                        obj.color = 'red'
                    } else {
                        obj.color = 'green'
                    }
                    return obj
                }
            },
        })
    </script>
</body>

</html>

12. V-for和key属性

遍历数组，参数(item,index) in list
遍历对象，参数(value,key,index) in list
遍历数字，num in 10 (1~10)，从1开始
key在使用v-for的时候都需要去设置key：提高重排效率

·让界面元素和数组里的每个记录进行绑定

· key只能是字符串或者数字

· key必须是唯一的

13. v-if与v-show区别

区别：
1. v-if是通过删除添加dom元素来实现显示和隐藏
2. v-show是通过设置display:none来实现隐藏
应用场景：
1. v-if只修改一次或少次的时候可以使用v-if
2. v-show频繁切换的时候可以使用v-show

我们仰望同一片星空

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE-基础使用

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层不仅易于上手，还便于与第三方库或既有项目整合。Vue.js是前端的主流框架之一，和Angular.jsReact.js一起，并成为前端三大主流框架！Vue是单页面框架，通过默认让某一个页面显示，来模拟一个页面跳转的方式。
复制链接

扫一扫