Vue基础知识（常用指令）

已于 2024-03-15 15:11:33 修改
阅读量635 收藏 9
点赞数 14
文章标签： vue.js 前端 javascript
于 2024-03-14 20:42:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53869844/article/details/136706671
版权

1.Vue下载

Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

学习Vue之前，需要安装18.0或者更高版本的Node.js

Node.js (nodejs.org)

2.Vue的基本使用

在Vue中，区分开发环境和生产环境，开发环境可以清晰的看清楚源码，生产环境就是见源码进行压缩，我们一般使用生产环境。

开发环境版本：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

生产环境版本

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

【1】复制生产环境绝对路径，浏览器打开：

【2】将代码全部复制下来，保存在本地vue.js文件下：

【3】如何查看成功引入vue文件

创建一个HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="js/vue.js"></script>
    <script>
         alert(Vue)
    </script>
</body>
</html>

如果弹出一个function，就表示引入成功

3.Vue的插值语法

插值语法通过一对{{}}进行书写，内部是对data数据管理中心进行渲染，也可以是表达式mousetache（胡子）是双大括号学名，也叫（胡子语法）。

1.双大括号渲染的是a的属性值

<body>
    <div id="app">
        {{a}}
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vue = new Vue({
            // 挂载点，所有的Vue的方法和属性都必须在对应的挂载根标签内部使用
            el: '#app',
            // 数据管理中心，所有的Vue的数据都在data对象中
            data:{
                a: 100
            },
            // 方法，对应的Vue事件方法清单
            methods:{
            }
        })
    </script>
</body>

2.内部也可以存放表达式

{{a >= 100 ? 20 : 10}}

注意：只可以写简单的表达式(简单判断，三元表达式)，复杂的不行（比如if）。

4.指令

4.1v-if 和 v-show

4.1.1v-if

通过一个布尔表达式对dom的上树和下数进行渲染。

【1】通过data带有布尔值进行渲染

<body>
    <div id="app">
    <p v-if="boo">第一行</p>
    <p v-if="!boo">第二行</p>
        
    </div>
    <script src="js/vue.js"></script>
    <script>
      var vue=new Vue({
          el:'#app',
          data:{
              boo: false
          }
      })
    </script>
</body>

【2】通过使用表达式进行逻辑判断，这里加入v-else-if和v-else

<body>
    <div id="app">
        <h2>{{boo}}</h2>
        <p v-if='boo >= 0 && boo <= 5'>我是5</p>
        <p v-else-if='boo >= 6 && boo <= 10'>我是10</p>
        <p v-else-if='boo >= 11 && boo <= 15'>我是15</p>
        <p v-else-if='boo >= 16 && boo <= 20'>我是20</p>
        <p v-else="boo > 20">我是大于20</p>
        <button @click="add">按我加一</button>
        
    </div>
    <script src="js/vue.js"></script>
    <script>
    var vue=new Vue({
        el:'#app',
        data:{
            boo: 0
        },
        methods:{
          add(){
              this.boo++;
          }
        }
    })
    </script>
</body

4.1.1v-if

v-show和v-if情况类似，但是原理不一样，v-show是通过控制display属性来进行显示和隐藏的。

<body>
    <div id="app">
    <p v-show="boo>5">加到5了</p>
    <button @click="add">按我加一</button>
        
    </div>
    <script src="js/vue.js"></script>
    <script>
    var vue=new Vue({
        el:'#app',
        data: {
            boo: 0
        },
        methods:{
            add(){
                this.boo++;
            }
        }
    })
    </script>
</body>

v-show和v-if的使用场景区分：

切换页面特别频繁：v-show

切换页面涉及范围特别大并不是特别频繁：v-if

4.2v-for

v-for是vue 的循环指令，作用是遍历数组（对象）的每一个值：

【1】遍历对象的使用：设置key的目的是让他每一个都渲染得到，通过胡子语法进行

<body>
    <div id="app">
        <ul>
            <li v-for="(item,key,index) in obj" :key="index">{{index}}-{{key}}:{{item}}</li>
        </ul>
    </div>
    <script src = "js/vue.js"></script>
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                obj:{
                    name: '小明',
                    age: '17岁',
                    height: '175cm',
                    sex: '男',
                    hobby: '打篮球'
                }
            }
        })
    </script>
</body>

【2】v-for遍历JSON对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,td,th{
            border: 1px solid #111;
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <div id="app">
        <table>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>身高</th>
            </tr>
            <tr v-for="(item,index) in arr">
                <!-- JOSN中的姓名 -->
                <td>{{item.name}}</td>
                <!-- JOSN中的年龄 -->
                <td>{{item.age}}</td>
                <!-- JOSN中的性别 -->
                <td>{{item.sex}}</td>
                <!-- JOSN中的身高 -->
                <td>{{item.height}}</td>
            </tr>
        </table>
    </div>
    <script src = "js/vue.js"></script>
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                arr: [
                    {name:'小明',age: '17',sex:'男',height: '168'},
                    {name:'小红',age: '18',sex:'女',height: '165'},
                    {name:'小周',age: '19',sex:'男',height: '178'},
                    {name:'小刚',age: '20',sex:'男',height: '167'}
                ]
            }
        })
    </script>
</body>
</html>

4.3v-text 和 v-html

v-html和v-text都是渲染文本的指令，使用场景会有不同

现在我们学习的渲染方法

  • 双大括号插值：{{}}
  • v-text
  • v-html

【1】双大括号和v-text渲染结果类似，但是略有不同：

1.双大括号在渲染结果之前，隐约会有编译之前的文本显示，v-text是没有这种现象的

2.双大括号更灵活，中间是可以添加内容的，v-text只能渲染data中的数据，中间不允许插入内容

<p>-----------{{a}}------------</p>
<p v-text="a">--------------------</p>

【2】双大括号和v-text与v-html有本质的不同，v-html会识别模板，但是v-html也不可以添加文本，这里的h1标签被识别了。

<body>
    <div id="app">
        <p v-html='a'>--------------</p>
    </div>
    <script src = "js/vue.js"></script>
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                a:'<h1>我是要插值的内容</h1>'
            }
        })
    </script>
</body>

4.4v-cloak

v-cloak指令的作用是vue实例渲染后结束关联

双大括号在编译之后遇到网络延时的时候会出现文本内容

v-cloak结合CSS能够解决这个问题

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        {{a}}
    </div>
    <script src = "js/vue.js"></script>
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                a:'我是渲染的指令-v-cloak'
            }
        })
    </script>
</body>
</html>

注意：有的博客或者网站上写的是v-clock，并且不会报错，其实它指的就是v-cloak。

4.5v-once

v-once的作用是只会渲染对应元素一次，数据更新不会引起视图的更新，目的是为了优化页面的性

能。

 <h2 v-once>{{a}}</h2>

案例：

<body>
    <div id="app" v-clock>
        <h2 v-once>{{a}}</h2>
        <button @click="add">按我加1</button>
        <button @click="minus">按我减1</button>
    </div>
    <script src = "js/vue.js"></script>
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                a: 100
            },
            // 事件方法
            methods:{
                add() {
                    this.a ++
                    console.log(this.a)
                },
                minus() {
                    this.a --
                    console.log(this.a)
                }
            }
        })
    </script>
</body>

4.6v-pre

v-pre就是跳过元素编译过程，直接显示元素内部文本，特点就是跳过大量的没有指令的节点

<body>
    <div id="app" v-clock>
        <h2 v-pre>{{a}}</h2>
    </div>
    <script src = "js/vue.js"></script>
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                a: 100
            }
        })
    </script>
</body>

4.6v-on

v-on是给元素添加事件监听，可以简写为@

【1】原生的JavaScript的事件监听：

事件名称

方法

点击

onclick

双击

ondblclick

鼠标移上

onmouseenter

鼠标离开

onmouseleave

鼠标滑过

onmousemove

鼠标移除

onmouseout

失去焦点

onblur

聚焦

onfocus

键盘事件

onkeydown

【2】Vue中的使用

一律去除on，添加v-on或者@符号

<button @click="add">点击加1</button>
<button v-on:click="minus">点击减1</button>

注意：

1.所有的方法都只能写在Vue的methods方法中

      var vue = new Vue({
            el: "#app",
            data: {
                a: 100
            },
            methods:{
                add() {
                    this.a++
                },
                minus(){
                    this.a--;
                }
            }
        })

2.原生的JavaScript的事件方法是不能和vue混用的：这个写上去不会报错，但是没效果

<button onclick="add">点击加1</button>

3.同名方法会有覆盖，后写的方法会覆盖先写的方法

【3】方法中传入参数

<button @click="add(5)">点击加5</button>
methods:{
    add(event) {
        this.a+=event
        }
}

4.7v-bind

v-bind属性的作用是将普通的w3c属性变为动态属性，让属性具有动态能力

【1】案例：我这里有五张照片，我想让他实现轮播效果

使用动态属性加载：

<img v-bind:src="'images/'+url+'.jpg'" alt="">

此时vue会编译带有v-bind的属性，然后返回编译结果：

<body>
    <div id="app" v-clock>
        <div>
            <img v-bind:src="'images/'+url+'.jpg'" alt="">
        </div>
        <button @click="add">点击加1</button>
        <button @click="minus">点击减1</button>
    </div>
    <script src = "js/vue.js"></script>
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                url: 0
            },
            methods:{
                add(event) {
                    this.url ++
                    if(this.url >= 5) {
                        this.url = 0;
                    }
                },
                minus(){
                    if(this.url <= 0) {
                        this.url = 5;
                    }
                    this.url --
                }
            }
        })
    </script>
</body>

点击加1减1之后图片切换，实现轮播效果

【2】v-bing的简写

可以将v-bind简写为：

<img :src="'images/'+url+'.jpg'" alt="">

4.8v-model

v-model属性是使用在表单元素中，作用是实现表单和数据的双向绑定

【1】基本使用

使用了v-model之后，数据就能根据表单输入的改变而改变

姓名：<input type="text" v-model="name">
{{name}}

vue的核心之一：双向数据绑定

【2】案例：问卷调查

<body>
    <div id="app" v-clock>
        <h2>问卷调查</h2>
        <p>
            姓名：<input type="text" v-model="name">
        </p>
        <p>
            性别：
            <input type="radio" name="sex" value="男" v-model="sex">男
            <input type="radio" name="sex" value="女" v-model="sex">女
        </p>
        <p>
            爱好：
            <input type="checkbox" name="hobby" value="打篮球" v-model="hobby">打篮球
            <input type="checkbox" name="hobby" value="跳舞" v-model="hobby">跳舞
            <input type="checkbox" name="hobby" value="读书" v-model="hobby">读书
        </p>
        <p>
            籍贯：
            <select name="native" id="" v-model="native">
                <option value="河北">河北</option>
                <option value="河南">河南</option>
                <option value="山东">山东</option>
                <option value="山西">山西</option>
                <option value="湖南">湖南</option>
                <option value="湖北">湖北</option>
            </select>
        </p>
        <p>
            您填写的表单内容为：姓名：{{name}}，性别：{{sex}}，爱好：{{hobby}}，籍贯：{{native}}
        </p>
        <button @click="submit">提交</button>
    </div>
    <script src = "js/vue.js"></script>
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                name: '',
                sex: '男',
                hobby: [],
                native: '河北'
            },
            methods:{
                submit() {
                    //汇总信息提交到后端
                    let obj = {
                        name: this.name,
                        sex: this.sex,
                        hobboy: this.hobby,
                        native: this.native
                    }
                    console.log(obj)
                }
            }
        })
    </script>
</body>

没输入数据时：数据显示如下

输入数据之后：表单内容有显示

lethell肖
关注
Vue基础知识分享
08-07
在"Vue基础知识分享"这个压缩包中，我们有三个关键的学习资源：一个关于Vue基本知识的PPT，一份基于Vue官网实现的简单代码示例，以及一个详细讲述Vue基本操作的Word文档。这些资料将帮助我们深入理解Vue的核心概念和...
vue开发中常用的基础知识.txt
最新发布
06-10
### Vue.js 基础知识详解 #### 一、Vue 实例 在 Vue.js 中，所有功能的基础都是从创建一个 Vue 实例开始的。这个实例是 Vue 的核心部分，它包含了许多配置项，如 `data`、`methods`、`computed`、`watch` 等，这些...
vue下载
djh052900的博客
03-15 5153
第一步： 安装 node.js （如果已安装就不用装了，当然如果你想安装最新版本的node.js最好是从新安装一遍） node.js安装官网地址 https://nodejs.org/zh-cn/ 安装完成之后 win+r 键 打开运行 输入cmd 打开命令行窗口 输入 node -v 命令 打印出版本号 在输入 npm -v 命令 打印出版本号 可以输出版本号就安装成功了 切换npm安装源地址，输入命令 npm config set registry https://registry.n
vue文件下载
笑到世界都狼狈的博客
03-15 2093
首先说明一下，在文件下载这边踩了个坑，花了好长时间才解决！就是后台给的接口返回的是一个二进制文件流，但是前端请求返回的结果将二进制文件流改成了字符串，所以导致下载一直不成功。这个方法是一个现成的下载组件，使用之前要先安装，在导入，然后跟方法二一样，接口调用成功后，调用方法fileDownload即可。如果你遇到文件下载不成功，且有使用mock.js的话，赶紧长点心，不然真的累死都不知道为啥一直下载不成功。接下来开始步入正题，我下面零零碎碎有好几种下载下载方法，大家可以根据自己的意愿选择下载方法。
vue简单下载
qq_39432715的博客
09-21 183
这个是前端贴的原来一个人的代码，自己改了一点，没大改，还可以封装很多，比如download之后的返回，还有一些传参，都可以封装的，或者写的更优雅，附一段之前同事写的前端同步下载${this${getToken有时间就封装封装，写的优雅些。
（详细）用js的生成a标签下载文件、并携带请求头
大雾起了清晨
01-10 4470
在 JavaScript 中使用标签下载文件时，直接通过标签的点击事件触发下载，是无法设置请求头的，因为这是一个简单的 GET 请求。如果你需要设置请求头，通常会使用 XMLHttpRequest 或 Fetch API 进行更复杂的请求。
下载完vue时，“ vue不是内部或外部的命令 ”
努力奔跑的小不点
05-18 211
这个时候在计算机全局搜索vue.cmd 找到路径 配置全局环境变量 配置完成重新启动电脑
vue最常用基础知识
05-31
以下将详细介绍Vue.js的一些基础知识，为构建Vue知识体系提供坚实的基础。 一、Vue实例及选项 Vue实例是使用Vue.js开发应用的入口点，通过new Vue()来创建。实例的选项（options）定义了其行为，常用选项包括： 1....
二Vue基础知识.pdf
07-13
Vue.js是一个构建用户界面的渐进式框架，旨在提高Web开发效率。它的核心库只关注视图层，易于学习和使用，同时允许开发者引入其他库...掌握这些基础知识点，对于进一步学习Vue框架、进行Vue项目开发具有重要的意义。
【Vue基础知识点速查手册 - 面试指南】从指令到计算属性,让Vue不再难懂
08-22
内容概要: - 涵盖了Vue的基础知识点,如指令、方法、计算属性等 - 列出了常用的指令语法,如v-...这是一份针对Vue基础知识点的速查手册,可以帮助初学者快速回顾和掌握Vue的基础语法,也可供开发者面试前进行知识点整理。
vue.js的安装与常用指令
ccq0133的博客
01-04 1791
Vue.js（通常简称为 Vue）是一种流行的 JavaScript 前端框架，用于构建用户界面。它采用了组件化的开发方式，通过将用户界面拆分为独立的可复用组件，使开发者能够更轻松地构建大型、复杂的应用程序。Vue.js 的核心思想是响应式数据绑定和组件化。它通过使用双向数据绑定机制，将数据与 DOM 元素进行关联，当数据变化时，页面会自动更新。同时，Vue.js 也提供了丰富的指令系统，用于操作 DOM 元素、控制显示和隐藏、处理用户输入等。
Vue项目安装
qq_38949829的博客
09-07 401
vue项目安装配置
vue 自定义指令实现下载功能
护着我的发际线的博客
11-20 232
vue内点击url下载文件最佳解决方案_小李@123的博客-CSDN博客_vue点击链接下载文件
vue 常用插件以及下载指令
weixin_41470307的博客
08-06 3963
安装淘宝镜像 cnpm npm install -g cnpm –registry=https://registry.npm.taobao.org 1.全局安装 vue-cli cnpm install –global vue-cli 2.测试是不是安装好 npm -v(要在有node的前提下运行如果成功会显示版本号) node -v(要在有node的前提下运行如果成功会显示版本号...
vue中下载文件的几种方式
weixin_52307122的博客
02-07 181
vue中下载文件的几种方式
vue 入门 vue的安装 常用指令 表达式
不是程序员的程序员博客
12-30 187
Vue是的介绍 是什么 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 Vue渐进式的理解 Vue只关注视图层。 Vue通...
Vue下载安装步骤的详细教程(亲测有效) 2 安装与创建默认项目
水w的博客
02-27 5134
Vue下载安装步骤的详细教程(亲测有效) 2 安装与创建默认项目
vue下载与部分指令详解
没有简介
09-09 918
vue下载与部分指令详解
vue的下载功能
only_zing的博客
02-06 1382
Vue的四种下载功能
vue.js基础知识
05-28
Vue.js是一种流行的JavaScript框架，用于构建交互式Web界面。以下是Vue.js的一些基础知识： 1. Vue实例：Vue应用程序始于一个Vue实例，它是Vue应用程序的根实例，可以通过new Vue()创建。 2. 模板语法：Vue使用模板语法来将数据绑定到HTML模板中，可以使用{{}}插值表达式和指令来操作DOM元素。 3. 组件：组件是Vue中的一个重要概念，可以将应用程序拆分为可重用和独立的组件。每个组件都有自己的状态和行为，并可以接受父组件传递的属性。 4. 计算属性：计算属性是一种Vue提供的属性，用于根据已有的属性计算出新的属性值。计算属性可以缓存结果，只在相关依赖发生改变时才重新计算。 5. 生命周期钩子函数：Vue提供了一系列生命周期钩子函数，用于在Vue实例的不同阶段执行代码。常用的生命周期函数包括created、mounted、updated和destroyed等。 6. 观察者和观察者监听器：Vue通过观察者模式来实现数据绑定，当数据发生变化时，观察者会通知相关的观察者监听器进行更新。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值