小白浅学Vue3(上)

简介: 小白浅学Vue3

前端环境


编码工具: 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


666


相同点: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>


状态管理


Vue默认通过“就地更新”策略来更新通过v-for渲染的元素列表。当数据项的顺序改变时,Vue就地更新每一个元素,不会移动位置,确保元素在原本的指定位置上。


为给Vue一个提示,以便可以跟踪每个节点的标识,从而重用和重新排序现有元素,需为每个元素提供唯一的attribute(key)


v-for中添加key是通过v-bind绑定特殊attribute


推荐在任何时候为v-for提供唯一的attribute(key)


实际场景中不推荐使用index作为key,使用数据源中的唯一值,如数据库表中的唯一ID

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


事件


用法:v-on:click=”handler” 或 @click=”handler”


事件


  1. 内联事件:事件被触发执行的内联javaScript语句(类似onclick)
  2. 方法事件:指组件上指定的方法的属性名或路径


内联事件处理


内联事件通常用于简单场景


+1

 

{{ count }}


方法事件处理


推荐使用

<button @click="addCount">+1</button>
    <p>{{ count }}</p>
methods:{
        addCount(){
            this.count +=1;
        }
    },


事件传参

<input type="text" v-model="message">
    <button @click="addCount(message.$event)">+1</button>
    <p>{{ message }}</p>
 methods:{
        //event对对象
        addCount(msg,e){
            console.log(msg);
            //e.target.innerHTML ="+"+this.count
            this.count +=1;
        }
    },


事件修饰符


处理事件时经常调用event.stopPropagation()或event.preventDefault()。


Vue为v-on提供了常用的修饰符


.stop  .privent  .once  .enter等


.privent阻止触发

<a @click.prevent="clickhandle" href="https://www.baidu.com/">baidu</a>


.stop 阻止冒泡事件

<div @click="clickhandle">
        <p @click.stop="addCount('P')">冒泡</p>
    </div>


以下类推


.once只执行一次

.enter回车触发


小白浅学Vue3(中):https://developer.aliyun.com/article/1431692

目录
相关文章
|
5天前
|
JavaScript 前端开发 索引
「Vue3系列」Vue3 条件语句/循环语句
在 Vue 3 中,你可以使用条件语句来动态地控制模板中的渲染内容。Vue 提供了多种方式来实现条件渲染,包括 `v-if`、`v-else-if`、`v-else` 和 `v-show` 指令。
27 0
|
6天前
Vue3框架中让table合计居中对齐
Vue3框架中让table合计居中对齐
|
6天前
Vue3 子/父组件相互调用
Vue3 子/父组件相互调用
27 0
|
6天前
|
JavaScript
vue3 使用element plus 打包时 报错
vue3 使用element plus 打包时 报错
13 0
|
25天前
|
JavaScript 前端开发 API
vue3快速上手
vue3快速上手
77 0
|
6天前
Vue3 子传父 暴露数据 defineExpose
Vue3 子传父 暴露数据 defineExpose
Vue3 子传父 暴露数据 defineExpose
|
25天前
|
JavaScript 前端开发 网络架构
Vue3项目中使用vue-router
Vue3项目中使用vue-router
40 0
|
2天前
|
JavaScript 前端开发 数据安全/隐私保护
Vue3——如何实现页面访问拦截
Vue3——如何实现页面访问拦截
|
2天前
|
JavaScript 前端开发 开发者
浅谈Vue 3的响应式对象: ref和reactive
浅谈Vue 3的响应式对象: ref和reactive