Vue2.x基础

最新推荐文章于 2024-06-13 15:14:05 发布

快秃头的小爽

最新推荐文章于 2024-06-13 15:14:05 发布

阅读量610

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_52218117/article/details/127270468

版权

概述

Vue目前是国内市场上最流行的前端应用开发框架之一。目前主流的是Vue2.x,现在Vue3.x也开始有很多公司使用。
Vue2.x官方文档:https://v2.cn.vuejs.org | https://v2.cn.vuejs.org/v2/guide/
Vue3.x官方文档:https://cn.vuejs.org | https://cn.vuejs.org/guide/introduction.html

第一章认识Vue

1.什么是Vue?

官方描述:Vue (读音 /vjuː/ ，类似于 view ) 是一套用于构建用户界面的渐进式
框架。与其它大型框架不同的是， Vue 被设计为可以自底向上逐层应用。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整
合。另一方面，当与现代化的工具链以及各种支持类库结合使用时， Vue 也完
全能够为复杂的单页应用提供驱动。
结论：Vue (读音 /vjuː/ ，类似于 view )，是一个用于快捷、高效开发前端应
用的渐进式框架！

2.引入Vue支持

（1）下载Vue框架
https://v2.cn.vuejs.org/v2/guide/installation.html
（2）项目中引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 引入开发版本的vue框架 -->
    <script src="./vue.js"></script>
</body>
</html>

第二章 Vue基础语法

1.基础语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个Vue应用</title>
</head>
<body>
    <div id="app">
        <!-- 4.id="app"的div中，可以直接使用Vue实力的数据 -->
        <h2>msg1: {{ message }}</h2>
    </div>
    <script src="./vue.js"></script>
    <script>
        // 1.创建一个Vue实例
        const app = new Vue({
            // 2.el:将实例挂载到id=app的div上
            el: "#app",
            // 3.data:声明使用的数据
            data: {
                message: "hello Vue!"
            }
        })
    </script>
</body>
</html>

2.插值表达式

作用：通过插值表达式语法，可以将实例对象中data选项中的数据，在页面中进行渲染
语法:

{{ 变量名称 }}

练习代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>插值表达式语法</title>
</head>
<body>
    <div id="app">
        <h3>插值表达式输出数据</h3>
        <p>直接输出数据：{{ message }}</p>
        <p>字符串拼接（简单运算）:{{ message + ":" + version}}</p>
        <p>数据拼接(隐式转换):{{ times + "周" }}</p>
        <p>数据运算：{{ (times-1) + "周" }}</p>
        <p>内部函数：{{ times.toFixed(2) }}</p>
        <p>自定义函数：{{ strReverse(message) }}</p>
        <p>三元运算符：{{ times >= 2 ? '学习周期': '项目周期' }}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                // 声明在实例中的数据
                message: '学Vue',
                version: 'V2.25',
                times: 2
            },
            methods: {
                // 声明自定义函数
                strReverse(str) {
                    return str.split('').reverse().join('');
                }
            }
        })
    </script>
</body>
</html>

注意：插值表达式可以直接渲染输出变量中的数据

3.内置指令

指令directive:描述了Vue中进行简单DOM操作的语法！
语法：

<div v-名称 v-名称="数据"></div>

（1）v-text/v/html

作用：网页中渲染数据

v-text:用于渲染普通文本数据
v-html:用于渲染富文本数据

<div>普通插值表达式：{{ message }}</div> 
<div>v-text指令：<span v-text="message"></span></div>
<div>v-html指令：<span v-html="message"></span></div>

（2）v-once

作用：网页中一次性加载数据，一般配合其他指令一起使用

 <div>v-once指令：<span v-html="message" v-once></span></div>

（3）v-show

作用：条件渲染指令,按照给定的条件通过控制display:none|block样式，让数据显示/隐藏进行切换

<div>v-show指令：<span v-show="isLogin">尊敬的管理员您好，欢迎访问系 统</span></div>

（4）v-if

作用：条件渲染指令,功能上支持多分支语法

<div>v-if指令：
  <span v-if="isLogin">尊敬的会员您好，欢迎访问本系统</span>
  <span v-else>您还没有登录 [登录] [注册]</span>
  <p v-if="score > 80 && score <= 100">优秀</p>
  <p v-else-if="score >= 60 && score <= 80">良好</p>
  <p v-else-if="score >= 0 && score < 60">不合格</p>
  <p v-else>分数不合法</p>
</div>

（5）v-for

作用：一种循环指令，用于数组/集合数据的循环，称为列表渲染指令

<div>
 v-for指令：循环遍历数据<br />
  <span v-for="name in jobs"> {{ name }} =</span><br />
  <span v-for="(name, index) in jobs">{{index + ":" + name}} =
</span><br />
  <span v-for="(name, index) in jobs" v-bind:key="name">
{{name}} =</span>
</div>

######（6）v-bind
作用：给标签属性，动态设置数据

<div>
  <p>v-bind指令：动态操作标签属性(属性的值不再是普通数据，而是一个变量)
</p>
  <p>v-bind:src="单词"，这里的这个单词就会当成变量进行使用</p>
  <p>v-bind:src=".."语法，可以简化为：:src="..." </p>
  <img v-bind:src="img1" alt=""
style="width:200px;height:auto">
  <img :src="img2" alt="" style="width:200px;height:auto">
</div>

（7）v-on

作用：给标签添加事件

<div>
 v-on指令操作：
  <button v-on:click="handler1">点击触发事件</button>
  <button @click="handler2">简洁事件语法</button>
</div>

（8）v-model

作用：提供给表单数据双向绑定的指令

<div>
 v-model指令：主要用于表单元素的双向绑定指令
  <p>账号：<input type="text" v-model="username"></p>
  <p>用户输入的数据：<strong>{{ username }}</strong></p>
</div>

4.样式操作

网页中标签的样式，就是通过行内样式和外联样式直接进行修饰；但是网页中经
常出现一些通过修改样式实现的动态特效，Vue中不推荐 DOM 操作，需要借助变量完成标签样式的动态控制
代码练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .inverse-bg {
            background-color: #333;
            color: white;
        }

        .bg {
            background: aliceblue;
        }

        .fred {
            color: orangered;
        }
    </style>
</head>
<body>
     <div id="app">
           <h2>class样式设置</h2>
           <p :class="{'inverse-bg': isReverse}">class对象语法设置样式 【重点】</p>
           <p :class="['bg', 'fred']">class 数组方式设置样式</p>
           <p class="bg fred">class 普通语法样式</p>
         </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                isReverse: false,//是否显示反色样式
            }
        })
    </script>
</body>
</html>