程序员经验分享-hwhale

Vue.js

2023-10-27

Vue.js

简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

  • JavaScript框架：相比于库，框架更为强大，但是用框架必须遵守其规则。
  • 简化DOM操作：对Vue对DOM元素有特殊语法修饰，直接用就完了、
  • 响应式数据驱动：数据改变页面同步更新。

官方文档

Vue作者是中国人，文档对中文支持还是不错的：

Vue基础

起步

  1. 导入开发版本的Vue

    • 开发环境版本，包含了有帮助的命令行警告

      <!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 或引用本地 -->
<script src="../vue.js"></script>
      • 需要注意的是，使用该地址会产生跨域问题，可更换无此问题的cdn源或本地引入

    • 生产环境版本，优化了尺寸和速度

      <!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<!-- 或引用本地 -->
<script src="../vue.min.js"></script>

  2. 创建Vue实例对象

  3. 使用模板语法把数据渲染到页面上

    • 声明式渲染
    • 插值表达式

第一个Vue程序

<!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>
    <div id="app">
        {{message}}
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        })
    </script>
</body>
</html>

插值表达式

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

{{数据名}}

el 挂载点

通过CSS选择器设置Vue示例管理的元素，被命中元素内部被两个大括号修饰的部分会被Vue实例中同名数据替换。

作用范围

作用范围只在Vue实例命中的元素内部生效，且可以对多个挂载点生效，嵌套元素内的挂载点也生效。

<body>
    {{message}}
    <div id="app">
        {{message}}<br>
        {{message}}
        <div>{{message}}</div>
    </div>
</body>

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
})

在这里插入图片描述

可使用的选择器

id选择器、class选择器和标签选择器均可使用，需要注意的是，使用标签选择器时如果存在多个相同的标签，则只会匹配第一个。推荐使用id选择器。

<body>
    <div id="app" class="app">
        {{message}}
    </div>
    <div>
        {{message}}
    </div>
</body>

var app = new Vue({
    // el: '#app', // id选择器可使用
    // el:".app", // class选择器可使用
    el:"div",
    data: {
        message: 'Hello Vue!'
    }
})

在这里插入图片描述

可设置的DOM元素

只支持双标签(即有开头有结尾的标签)，不支持单标签(压根没地写挂载点)。注意，不支持html标签和body标签

<body id="app">
    <div id="app" class="app">
        {{message}}
    </div>
</body>

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
})

在这里插入图片描述
在这里插入图片描述

data数据对象

Vue中用到的数据定义在data中，不仅支持字符串，也支持其他复杂数据类型，遵循js语法即可。

<body>
    <div id="app" class="app">
        {{message}}
        <h1>{{map.a}}&nbsp;{{map.b}}</h1>
        <ul>
            <li>{{array[0]}}</li>
            <li>{{array[1]}}</li>
            <li>{{array[2]}}</li>
        </ul>
    </div>
</body>

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!',
        map:{
            a:"a_value",
            b:"b_value"
        },
        array:["1","2","3"]
    }
})

在这里插入图片描述

Vue指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

v-text

用于将数据填充到标签中，但是是整体替换。

<body>
    <div id="app" class="app">
        <h1 v-text="message1 + '!'">原本内容</h1>
        <h1 v-text="message2 + '!'">原本内容</h1>
        <h1>{{message1 + '!'}}原本内容</h1>
    </div>
</body>

var app = new Vue({
    el: '#app',
    data: {
        message1: 'Hello Vue!',
        message2: 'Hello World!'
    }
})

在这里插入图片描述

v-html

也可以实现v-text功能，但也可以插入并解析HTML代码

<body>
    <div id="app" class="app">
        <p v-html="content1">原本内容</p>
        <p v-html="content2">原本内容</p>
        <p>{{content2}}原本内容</p>
    </div>
</body>

var app = new Vue({
    el: '#app',
    data: {
        content1: 'Hello Vue!',
        content2: '<a href="http://www.baidu.com">百度一下，你就知道</a>'
    }
})

在这里插入图片描述

v-on

插入事件，绑定方法写在 methods 中，可以实现数据修改。

<body>
    <div id="app" class="app">
        <input type="button" value="v-on指令" v-on:click="fun1">
        <input type="button" value="v-on简写" @click="fun2"> <!-- 简写形式 -->
        <h3 @dblclick="change('是你爹')">{{message}}</h3>
    </div>
</body>

var app = new Vue({
    el: '#app',
    data:{
        message:"我"
    },
    methods:{
        fun1:function(){
            alert("Hello");
        },
        fun2:function(){
            alert("World!");
        },
        change:function(p1){
            this.message += p1;
        }
    }
})

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

v-show

根据表达式真假切换元素显示和隐藏，操纵的是样式。

<body>
    <div id="app" class="app">
        <input type="button" value="LED开关" @click="LED">
        <input type="button" value="age++" @click="AgeUp"><br>
        <img v-show="open" src="../images/LED_OPEN.jpg" alt=""><br>
        <img v-show="close" src="../images/LED_OFF.jpg" alt=""><br>
        <img v-if="age>=18" src="../images/FBI_Warning.jpg" alt="" height="100" >
    </div>
</body>

var app = new Vue({
    el: '#app',
    data:{
        open:false,
        close:true,
        age:17
    },
    methods:{
        LED:function(){
            this.open=!this.open;
            this.close=!this.close;
        },
        AgeUp:function(){
            this.age++;
        }
    }
})

在这里插入图片描述
------》 在这里插入图片描述

v-if

根据表达式真假切换元素显示和隐藏，操纵的是DOM元素。

如上例，实现效果相同，但实现方式不同：

在这里插入图片描述
---------》 在这里插入图片描述

v-bind

用于绑定元素属性

<body>
    <div id="app" class="app">
        <img v-bind:src="imgSrc" alt="" height="150" > <br>
        <img :src="imgSrc" alt="" height="150" > <!-- 简写形式 -->
    </div>
</body>

var app = new Vue({
    el: '#app',
    data:{
        imgSrc:"../images/FBI_Warning.jpg"
    }
})

在这里插入图片描述

v-for

Vue界的 for-each 循环。

<body>
    <div id="app" class="app">
        <ul>
            <li v-for="(item, index) in array">
                {{index+1}}array:{{item}}
            </li>
        </ul>
    </div>
</body>

var app = new Vue({
    el: '#app',
    data:{
        array:["a","b","c"]
    }
})

在这里插入图片描述

v-model

获取和设置表单元素的值(双向数据绑定)

<body>
    <div id="app" class="app">
        <input type="text" v-model="message" @keyup.enter="GetMessage">
        <h3>{{message}}</h3>
    </div>
</body>

var app = new Vue({
    el: '#app',
    data: {
        message: "我"
    },
    methods: {
        GetMessage: function () {
            alert(this.message);
        }
    }
})

在这里插入图片描述
------》 在这里插入图片描述

axios

常用网络请求库

导入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
基础语法

  • get

    axios.get(地址?查询字符) //查询字符格式为 key=value&key2=value2&key······

  • post

    axios.post(地址,参数对象) //参数对象格式为 {key=value, key2=value2, key······}

  • then

    axios.get(地址?查询字符).then(function(response){},function(err){});
axios.post(地址,参数对象).then(function(response){},function(err){});

示例：

<body>
    <input type="button" value="get" class="get">
    <input type="button" value="post" class="post">
</body>

/*
接口1：随机笑话
请求地址：https://autumnfish.cn/api/joke/list
请求方法：get
请求参数：num(笑话条数，数字)
响应内容：随机笑话
*/
document.querySelector(".get").onclick = function(){
    axios.get("https://autumnfish.cn/api/joke/list?num=2")
        .then(function(response){
        console.log(response);
    },function(err){
        console.log(err);
    })
}
/*
接口2：用户注册
请求地址：https://autumnfish.cn/api/user/reg
请求方法：post
请求参数：username(用户名，字符串)
响应内容：注册成功或失败
*/
document.querySelector(".post").onclick = function(){
    axios.post("https://autumnfish.cn/api/user/reg",{username:"Kiang"})
        .then(function(response){
        console.log(response);
    },function(err){
        console.log(err);
    })
}

在这里插入图片描述
在这里插入图片描述

Vue + axios

使用Vue与axios结合比使用原生语法要更好记、简便。

<body>
    <div id="app">
        <input type="button" value="获取笑话" @click='getJoke'>
        <p>{{joke}}</p>
    </div>
</body>

var app = new Vue({
    el:"#app",
    data:{
        joke:"随机笑话"
    },
    methods:{
        getJoke:function(){
            var that = this;
            axios.get("https://autumnfish.cn/api/joke")
                .then(function(response){
                that.joke = response.data;
            },function(err){
                console.log(err);
            })
        }
    }
})

在这里插入图片描述
—》在这里插入图片描述

Vue组件

非单文件组件

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

<body>
    <div id="root">
        <!-- 第三步：编写组件标签 -->
        <school></school>
        <hr>
        <!-- 第三步：编写组件标签 -->
        <student></student>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    //第一步：创建school组件
    const school = Vue.extend({
        template: `
            <div class="demo">
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
                <button @click="showName">点我提示学校名</button>	
            </div>
        `,
        data() {
            return {
                schoolName: 'testSchool',
                address: 'testAddress'
            }
        },
        methods: {
            showName() {
                alert(this.schoolName)
            }
        },
    })

    //第一步：创建student组件
    const student = Vue.extend({
        template: `
            <div>
                <h2>学生姓名：{{studentName}}</h2>
                <h2>学生年龄：{{age}}</h2>
            </div>
        `,
        data() {
            return {
                studentName: '张三',
                age: 18
            }
        }
    })

    new Vue({
        el: '#root',
        //第二步：注册组件（局部注册）
        components: {
            school,
            student
        }
    })
</script>
</html>

Vue CLI

简介

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，使用Vue脚手架之后我们开发的页面将是一个完整的系统，它提供：

  • 通过 vue-cli 实现的交互式的项目脚手架，通过执行命令方式即可下载相关依赖
  • 通过@vue/cli + @vue/cli-service-global 实现的零配置原型开发。
  • 一个运行时依赖 ( @vue/cli-service )，该依赖：
    • 可升级；
    • 基于 webpack 构建，并带有合理的默认配置；
    • 可以通过项目内的配置文件进行配置；
    • 可以通过插件进行扩展。
  • 一个丰富的官方插件集合，集成了前端生态中最好的工具。
  • 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

安装

  1. 环境准备：需要安装配置 node.js

    1. 配置淘宝镜像

      npm config set registry https://registry.npm.taobao.org

      验证

      npm config get registry

    2. 配置下载位置

      npm config set cache "D:\npm\cache"
npm config set prefix "D:\npm\global"

      验证

      npm config ls

  2. 执行安装命令

    npm install -g vue-cli

  3. 创建第一个Vue脚手架项目

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

前端开发学习笔记

vuejs

javascript

前端

Vue.js 的相关文章

随机推荐

  • [linux-sd-webui]图生文，blip/deepbooru

    GitHub pharmapsychotic clip interrogator Image to prompt with BLIP and CLIPImage to prompt with BLIP and CLIP Contribute

  • 【hadoop学习之路】Spark-SQL 实验报告 RDD转DataFrame

    1 Spark SQL 基本操作 1 1 需求 将下列JSON格式数据复制到Linux系统中 并保存命名为employee json id 1 name Ella age 36 id 2 name Bob age 29 id 3 name

  • Pandas处理日期数据

    一 pandaas日期处理的作用 将2018 01 01 1 1 2018等多种日期格式映射成统一的格式对象 在该对象上提供强大的功能支持 几个概念 1 pd to datetime pandas的一个函数 能将字符串 列表 series变

  • 数据结构——个人学习笔记

    系列目录 数据结构第一章绪论 数据结构第二章线性表 文章目录 系列目录 2 1线性表的定义和特点 2 2线性表的操作定义 2 3线性表的顺序表示和实现 线性表的重要基本操作 1 初始化线性表 参数用指针 2 插入 新增 3 取值 4 查找

  • easy modbus tcp

    public static void Main string args ModbusClient modbusClient new ModbusClient 190 201 100 100 502 Ip Address and Port o

  • Android组件化和插件化的概念，android快速开发框架

    开发单个模块时可以共享资源和工具类 可以针对单个模块测试 开发调试时不需要对整个项目进行编译 多人合作时可以只关注自己的业务模块 把某一业务当成单一项目来开发 可以灵活的对业务模块进行组装和拆分 4 组件化开发的主要思路 就是将一个Modu

  • c++求行列式的值（全排列法）

    用全排列的方式求行列式的值 递归体现在全排列中 上代码 f函数是求行列式的值 include

  • flink中通过jdbc查询结果集使用 flink table api 创建临时视图

    1 maven依赖

  • [转]QNX_HMI_crank工程的系统移植

    如果你认为本系列文章对你有所帮助 请大家有钱的捧个钱场 点击此处赞助 赞助额0 1元起步 多少随意 声明 本文只用于个人学习交流 若不慎造成侵权 请及时联系我 立即予以改正 锋影 email 174176320 qq com 开发软件 Cr

  • python如何输出多个星号_如何使用python输出连续星号？

    小编依稀记得 自己初学编程时候 第一节课 老师就给我们演示了输出连续星号内容 那时候真感叹python的神奇 重温一遍这个内容 入门小伙伴们可以来看下啦 有关语法 用嵌套打印小星星 需求 在控制台连续输出五行 每一行星号的数量依次递增 使用

  • 如何从配置文件中获取属性

    在项目中添加了一个腾讯云的短信业务 领导说要我把这个项目整合到原本的业务中去 业务那么多 怎么搞 继续询问后得知 是整合到原本的短信业务中 原本用的短信业务是短信猫来发短信 问 需要前端加传的参数吗 答 不允许 继续询问得知 是要在配置文件

  • [转]Tangram框架应用开发的一般模式

    框架其实就是一种开发模式 用tangram框架开发应用程序意味着选择一种面向接口 模块化的开发方式 这和传统的Delphi应用程序开发方式有一定区别 对于刚刚接触框架的童鞋可能不知道如何下手 因此有必要把框架的一般开发方式说明一下 不过框架

  • 深入分析HBase Compaction机制

    Compaction介绍 Compaction是buffer gt flush gt merge的Log Structured Merge Tree模型的关键操作 主要起到如下几个作用 1 合并文件 2 清除删除 过期 多余版本的数据 3

  • 二叉树算法

    每日一句 少年就是少年 他们看春风不喜 看夏蝉不烦 看秋风不悲 看冬雪不叹 看满身富贵懒察觉 看不公不允敢面对 只因他们是少年 目录 用递归和非递归两种方式实现二叉树的先序 中序 后序遍历 递归方法 非递归方法 如何完成二叉树的宽度优先遍历

  • 报文摘要算法

    1 报文摘要算法 报文摘要算法是一种将任意长度报文转换成固定长度的报文摘要算法 它具有以下六个特点 能够作用于任意长度的报文 产生有限位数的标识信息 易于实现 具有单向性 具有抗碰撞性 具有高灵敏性 1 1 MD5 1 1 1 添加填充位

  • Pytorch —— nn.Module类(nn.sequential)

    对于前面的线性回归模型 Logistic回归模型和神经网络 我们在构建的时候定义了需要的参数 这对于比较小的模型是可行的 但是对于大的模型 比如100 层的神经网络 这个时候再去手动定义参数就显得非常麻烦 所以 PyTorch 提供了两个模

  • STM32CubeMX+Keil5+Proteus实现按键控制LED灯（入门篇）

    嵌入式HAL库实战项目 本文说明 STM32CubeMX安装和使用 Keil实现按键控制LED亮灭 Proteus仿真 补 Proteus连线问题 总结 本文说明 学生党 之前学习过嵌入式的课程 跟着正点原子的视频一步一步地构建项目的工程

  • nodejs日志管理 log4js使用详解

    一 首先是在项目中安装 log4js npm install log4js save 注 log4js日志级别 分别为 lt 权值从小到大 gt all lt trace lt debug lt info lt warn lt error

  • 数据分析 数据规约

    一 概念 数据规约 Data Reduction 是指在尽可能保持数据原貌的前提下 最大限度地精简数据集 数据规约又分为2类 属性规约 和 数值规约 二 属性规约 1 概念 属性规约 Attributes Reduction 是指通过减少数

  • Vue.js

    Vue js 简介 Vue 读音 vju 类似于 view 是一套用于构建用户界面的渐进式框架 JavaScript框架 相比于库 框架更为强大 但是用框架必须遵守其规则 简化DOM操作 对Vue对DOM元素有特殊语法修饰 直接用就完了 响

热门标签