vue的基础使用

最新推荐文章于 2024-08-04 14:44:13 发布

Q_0

最新推荐文章于 2024-08-04 14:44:13 发布

阅读量100

点赞数 1

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_51985718/article/details/118093096

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

vue

day01vue的基础使用

文章目录

vue
一、本章内容
- 1.掌握vue的基本语法
- 2.掌握vue在项目中的应用
二、知识点
总结

一、本章内容

1.掌握vue的基本语法

2.掌握vue在项目中的应用

二、知识点

1.什么是vue.js

	vue.js是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App，Vue语法也是可以用于进行手机App开发的，需要借助于Weex）
	Vue.js是前端的**主流框架之一**，和Angular.js、React.js一起，并称为前端三大主流框架！
	Vue.js是一套构建用户界面的框架，**只关注视图层**，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大项目的开发）
	前端的主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果；

2.为什么学习流行框架

	企业为了提高开发效率：在企业中，时间就是效率，效率就是金钱；
	企业中，使用框架，能够提高开发的效率；
	提高开发效率的发展历程：原生JS -> Jquery之类的类库 -> 前端模板引擎 -> Angular.js / Vue.js能够帮助我们减少不必要的DOM操作；提高渲染效率；双向数据绑定的概念【通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了】
	在Vue中，一个核心的概念，就是让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑；

3.框架和库的区别

	框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。
	例如：node中的express
	库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。
	例如：从Jquery 切换到 Zepto
	例如：从EJS切换到 art-template

4.MVC与MVVM的区别

	M（Model）V（View）C（Controller）是后端的分层开发概念
	Model（模型）：代表一个存取数据的对象或JAVA POJO。它也可以带有逻辑，在数据变化时更新控制器。
	View（视图）：试图代表模型包含的数据的可视化。
	Controller（控制器）：控制器作用于模型和试图上。它控制数据流向模型对象，并在数据变化时更新视图，它使视图和模型分离开。
	MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分Model、View、VM   ViewModel

5.Vue.js的代码结构

1、引入vue.js
2、写视图层，我们要展示的内容
3、实例化Vue（）
	=>data：存放数据
	=>el：这个是控制是哪块视图。
	=>methods：存放我们的方法。

示例：

<body>
    <div id="app">
        <!-- 插值表达式：可以读取我们的变量、 -->
    </div>

</body>
<!-- 1、引入vue的js，引入js之后它会为我们提供了Vue类 -->
<script src="./vue-2.4.0.js"></script>
<script>
    //创建Vue实例,得到 ViewModel
    //  调度层
    var vm = new Vue({
        //  vue控制的区域
        el: '#app',
        // data参数存放我们的数据，这一层就是MVVM里的model层
        data: {
            message: "Hello Vue！！"
        },
        methods: {}
    });
</script>

注意：写方法时我们需要注意this的指向问题

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

如何获取变量值呢？
1、插值表达式{{}}，可以在前后插入一些内容
2、v-text：会替换元素里的内容
3、v-html：可以渲染html界面

示例：

<!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>

7.v-bind

	界面元素属性值的绑定
	1、括号里不加引号的都是我们data里的数据读取
	2、如果想使用字符串需要加上引号
	3、里面可以写表达式、
	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>v-bind这指令用于属性的绑定</title>
</head>

<body>
    <!-- 视图层 -->
    <div id="app">
        <!-- 插值表达式，可以读取我们的变量 -->
        {{ message }}
        <!-- <button v-bind:title="nihao">按钮</button> -->
        <button :title="nihao">按钮</button>
        <input type="text" v-bind:value="message">
    </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!',
                flag: false,
                nihao:'你好世界'
            }
        })
    </script>
</body>
</html>

8.v-on

	1、进行事件的绑定，我们用的最多的是click实践绑定
	2、简写     @
	3、实现跑马灯的效果

示例：

<!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>Document</title>
</head>

<body>
    <div id='app'>
        <button v-on:click="lang">浪起来</button>
        <button @click='didiao'>低调</button>
        <p>{{message}}</p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: '猥琐发育，别浪~~~',
                intervalId: null
            },
            methods: {
                lang() {
                    // 在这里可以直接通过this拿到message
                    // substring() 两个参数代表是一个范围
                    // substr() 第一个参数代表的是位置，第二个参数代表是个数
                    // 我们每次都创建一个新的定时器，旧的并没有被清楚掉
                    // clearInterval(this.intervalId)
                    if (this.intervalId != null) return;
                    this.intervalId = setInterval(() => {
                        let first = this.message.substring(1, 2);
                        let end = this.message.substring(1);
                        this.message = end + first;
                    }, 200);
                },
                didiao() {
                    clearInterval(this.intervalId);
                    this.intervalId = null;
                }
            },
        })
    </script>
    <!--
        1、给这个浪起来添加点击事件
        2、在methods定义一个方法，方法里我们让第一个字放到最后，然后重新给data里的message赋值。
        3、加一个定时器
     -->
</body>
</html>

9.事件修饰符

	1、.stop 阻止冒泡
	2、.prevent   阻止默认事件
	3、.capture   添加事件侦听时使用事件捕获模式
	4、.self  只当事件在该元素本身（比如不是子元素）触发时触发回调
	5、.once  事件只触发一次

示例：

<!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>事件修饰符</title>
    <style>
        .box {
            height: 200px;
            background-color: green;
        }
        .sub-box {
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="box" @click='clickBox'>
            <button @click.stop='clickBtn'>点我</button>
        </div>
        <a href="http://www.baidu.com" @click.prevent='clickA'>baidu</a>
        <h1>capture事件修饰符</h1>
        <!-- 加这个capture修饰符要加在最外层容器 -->
        <div class="box" @click='clickBox'>
            <div class="sub-box" @click.capture='clickSubBox'>
                <button @click='clickBtn'>事件捕获</button>
            </div>
        </div>
        <!-- self事件修饰符，我们实际触发的是这个元素的事件的时候，才会触发事件，通过冒泡或者捕获都不会触发这个事件 -->
        <h1>self事件修饰符</h1>
        <div class="box" @click='clickBox'>
            <div class="sub-box" @click.self='clickSubBox'>
                <button @click='clickBtn'>事件捕获</button>
            </div>
        </div>
        <!-- once事件修饰符修饰的事件只会触发一次 -->
        <button @click.once='clickBtn'>once</button>
        <!-- self只组织了某个特定元素的冒泡
        stop组织所有的事件冒泡 -->
    </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: {},
            methods: {
                clickBox() {
                    console.log('点击了盒子')
                },
                clickBtn() {
                    console.log('点击了按钮');
                },
                clickA() {
                    console.log('点击了a标签')
                },
                clickSubBox() {
                    console.log('点击了sub box')
                }
            },
        })
    </script>
</body>
</html>

10.v-model数据双向绑定

	作用：数据双向绑定
	注意：绑定的是表单控件
	实现了计算器功能

示例：

<!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>计算器</title>
</head>

<body>
    <div id='app'>
        <input type="text" v-model:value='value1'>
        <select v-model:value='opration'>
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model:value='value2'>
        <button @click='calc'>=</button>
        <input type="text" v-model:value='result'>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                value1: '',
                value2: '',
                opration: '+',
                result: ''
            },
            methods: {
                calc() {
                    switch (this.opration) {
                        case '+':
                            this.result = Number.parseFloat(this.value1) + Number.parseFloat(this.value2);
                            break;
                        case '-':
                            this.result = Number.parseFloat(this.value1) - Number.parseFloat(this.value2);
                            break;
                        case '*':
                            this.result = Number.parseFloat(this.value1) * Number.parseFloat(this.value2);
                            break;
                        case '/':
                            this.result = Number.parseFloat(this.value1) / Number.parseFloat(this.value2);
                            break;
                    }
                }
            }
        })
    </script>
</body>
</html>

11.Vue中样式的使用

	使用class样式
	1、数组
	2、三木表达式
	3、数组内置对象（对象的键是样式的名字，值是bool类型）
	4、直接通过对象

示例：

<!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>

	使用内联样式
	1、直接在元素上通过  ：style 的样式，书写样式对象
	2、将样式对象，定义到data中，并直接引用到  ：style中
		=>在data上定义样式
		=>在元素中，通过属性绑定的形式，将形式对象应用到元素中
	3、在 ：style中通过数组，引用多个data上的样式对象
		=>在data上定义样式
		=>在元素中，通过属性绑定的形式，将形式对象应用到元素中

示例：

<!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属性

	1、遍历数组：参数（item，index）in for
	2、遍历对象：参数（value，key，index）in for
	3、遍历数字：num in 10（数字）
	4、key在使用v-for的时候都需要去设置key
		=>让界面元素和数组里的每个记录进行绑定
		=>key只能是字符串或者数字
		=>key必须是唯一的

示例：

<!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>循环</title>
</head>

<body>
    <!-- 视图层 -->
    <div id="app">
        <!-- 插值表达式，可以读取我们的变量 -->
        <ul>
            <!-- v-for直接加在循环的元素上 -->
            <!-- 语法使用形参 in 数组对象 -->
            <li v-for="(item,index) in list">{{item.name}}数组的下标{{index}}</li>
        </ul>
        <h1>迭代对象</h1>
        <ul>
            <!-- v-for直接加在循环的元素上 -->
            <!-- 先是值，后是对象的键 -->
            <li v-for="(value,key,index) in user">对象的键：{{key}}，对象的值：{{value}},数组的下标{{index}}</li>
        </ul>
        <h1>迭代数字</h1>
        <ul>
            <!-- v-for直接加在循环的元素上 -->
            <!-- 先是值，后是对象的键 -->
            <li v-for="num in 10">你好</li>
        </ul>
        <h1>v-for的key</h1>
        <button @click='add'>add</button>
        <ul>
            <!-- key是字符串或者数字 -->
            <li v-for='(item,index) in list' :key='item.id'>
                <input type="checkbox"> {{item.name}}数组的下标{{index}}
            </li>
        </ul>
    </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层
            methods: {
                add() {
                    // this.list.push({
                    //     userId: 10,
                    //     name: '新来的'
                    // })
                    this.list.unshift({
                        userId: 10,
                        name: '新来的'
                    })
                }
            },
            data: {
                message: 'Hello Vue!',
                user: {
                    userId: 19,
                    name: '测试name',
                    age: 18
                },
                list: [{
                        id: 1,
                        name: '张三1'
                    },
                    {
                        id: 2,
                        name: '张三2'
                    },
                    {
                        id: 3,
                        name: '张三3'
                    },
                    {
                        id: 4,
                        name: '张三4'
                    },
                    {
                        id: 5,
                        name: '张三5'
                    }
                ]
            }
        })
    </script>
</body>
</html>

注意：2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。当Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 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

示例：

<!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>条件显示</title>
</head>

<body>
    <!-- 视图层 -->
    <div id="app">
        <button @click='change'>切换</button>
        <!-- 不会进行页面渲染的 -->
        <p v-if='flag'>{{ message }}</p>
        <!-- 使用display：none进行元素的隐藏 -->
        <div v-show='flag'>{{ message }}</div>
        <!-- 如果我们需要频繁切换的时候选择v-show -->
        <!-- 状态不会频繁改变的时候使用v-if -->
    </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!',
                flag: false
            },
            methods: {
                change() {
                    this.flag = !this.flag
                }
            },
        })
    </script>
</body>

</html>

总结

以上内容为vue基础使用的笔记总结！！！！

Q_0

关注

1
点赞
踩
0

收藏

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

vueday01vue的基础使用文章目录vue一、知识点二、使用步骤1.引入库2.读入数据总结一、知识点二、使用步骤1.引入库代码如下（示例）：import numpy as npimport pandas as pdimport matplotlib.pyplot as pltimport seaborn as snsimport warningswarnings.filterwarnings('ignore')import sslssl._create_defaul
复制链接

扫一扫

专栏目录