小白浅学Vue3

QGS-CD

已于 2024-01-16 23:38:03 修改

阅读量1.1k

点赞数 20

文章标签： vue

于 2024-01-14 12:27:45 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_47268883/article/details/135581526

版权

v-if 、v-else-if 、v-else

前端环境

编码工具: VSCode

依赖管理:NPM

项目构建: Vuecli

NPM的全称是Node Package Manager，是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。2020年3月17日，Github宣布收购npm，GitHub现在已经保证npm将永远免费。

依赖管理NPM安装配置

NPM官网

https://nodejs.org/en/download/

下载安装完成后

验证 Node.js 是否已成功安装

node -v

在nodejs安装目录创建node_global和node_cache文件夹

cmd命令，依次输入：
npm config set prefix "D:\Nodejs\node_global"
npm config set cache "D:\Nodejs\node_cache"

npm config set prefix “D:\Nodejs\node_global”：将 Node.js 全局安装包的安装路径设置为 “D:\Nodejs\node_global”。在使用 npm install -g 命令全局安装 Node.js 模块时，将会将模块安装到指定的目录中。
npm config set cache “D:\Nodejs\node_cache”：将 Node.js 模块缓存路径设置为 “D:\Nodejs\node_cache”。在使用 npm install 命令安装 Node.js 模块时，将会将模块缓存到指定的目录中。

修改系统环境变量

F:\Program Files\nodejs\node_global

NODE_PATH

F:\Program Files\nodejs\node_modules

使用npm install express -g全局安装 Express 模块

说明文件权限不够，允许完全控制得以解决

更改 npm 的默认源为淘宝源
npm config set registry https://registry.npm.taobao.org

恢复默认的 npm 官方源
npm config set registry https://registry.npmjs.org

查看当前npm 源的 URL

使用淘宝源全局安装 cnpm。cnpm 是一个基于 npm 的淘宝定制版，可以在国内更快地安装 Node.js 包

npm install -g cnpm --registry=https://registry.npm.taobao.org

创建Vue项目

npm init vue@latest

安装依赖npm install

VITE v5.0.11 ready in 479 ms

➜ Local: http://localhost:5173/

➜ Network: use --host to expose

➜ press h + enter to show help

模板语法

文本插值{ { }}

最基本的数据绑定形式是文本插值，“Mustache”语法

支持三元表达式

<template>

    <p>{
  { msg }}</p>

</template>

<script>

export default{

    data(){

        return{

            msg:"123"

        }

    }

}

</script>

v-html

插入HTML，使用v-html，而{ { }}只是插入纯文本

<template>

    <p>{
  { msg }}</p>

    <p>{
  { ok ? 'yes':'no' }}</p>

    <p><span v-html="insertHtml"></span></p>

</template>


<script>


export default{

    data(){

        return{

            msg:"123",

            ok:true,

            insertHtml:"<a href='https://www.baidu.com'></a>"

        }

    }

}

</script>

属性绑定

{ { }}不能在attributes中使用，绑定arrtibute需要使用v-bind, v-bind的缩写:className

v-bind将元素的attribute与组件的dynamicld属性保持一致。如果绑定的值是null遇undefined，则将attribute从渲染的元素上移除

<template>
    <div v-bind:class="divColour">
        123
    </div>
</template>

<script>

export default{
    data(){
        return{
            divColour:"Colourclass"
        }
    }
}

</script>

v-bind简写

<template>
    <div :class="divColour">
        123
    </div>
</template>

<script>

export default{

    data(){

        return{

            divColour:"Colourclass"
        }
    }
}

条件渲染

v-if 、v-else-if 、v-else

<template>

    <!-- <div v-if="no">看不见</div>

    <div v-if="ok">看得见</div>
    <div v-else>123</div> -->
   
    <div v-if="no">1</div>
    <div v-else-if="ok">2</div>
    <div v-else>3</div>
</template>

<script>
export default{
    data(){
        return{
            ok:true,
            no:false
        }
    }
}

</script>

v-show

相同点：v-if与v-show都可以动态控制dom元素显示隐藏

不同点：v-if显示隐藏是将dom元素整个添加或删除，而v-show隐藏则是为该元素添加css--display:none，dom元素还在。

v-if是惰性的，也是真实的按条件渲染，应为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。条件区块只有条件首次变为true时才被渲染。

v-show元素无论初始条件如何，始终会被渲染，只有CSS的display属性会被切换

v-if有更高的切换开销，而v-show有更高的初始化渲染开销。

v-if应用场景更适合初始化，只渲染一次

v-show应用场景更适合频繁的切换

列表渲染v-for

    <div>
        <p v-for="name in names">{
  { name }}</p>
    </div>

Index，数组下标

    <div>
        <p v-for="(name,index) in names">{
  { index }} : {
  { name }}</p>
    </div>

可以使用of代替in，of更接近javaScript迭代器语法

    <div>
        <p v-for="(name,index) of names">{
  { index }} : {
  { name }}</p>
     </div>


    <div>
        <p v-for="(value,key,index) of user"> {
  { key }}  :{
  { value }} : {
  { index }} </p>
    </div>