重生之再学Vue - @vue/cli脚手架 vue的基本指令

2023-10-11 09:05:16

Vue的基本概念

vue是一个渐进性式javascript框架,一套拥有自己规则的语法

1.渐进式:逐步进步,想用什么就用什么,不必全部使用

2.框架与库的区别:

库:封装的属性或方法比如jQuery

框架:拥有自己的语法规则和元素

@vue/cli脚手架

第一步全局安装vue/cli

yarn global add @vue/cli

可以使用vue -V来查看是否安装成功

出现版本号就说明安装成功

第二部创建项目

vue create vuecli-demo

后面为项目明可以自定义但是不能有大写字母, 中文和特殊符号

选择模块和包管理器回车等待安装完成即可进入下一步

输入提示的代码即可启动内置的webpack本地热更新开发服务器 – 浏览项目页面

如果为弹出浏览器,手动打开输入替代的域名加端口浏览项目页面

脚手架目录分析

1.脚手架主要文件的作用

脚手架自定义配置

首先新建一个与sec文件平级的vue.config.js文件填入配置用yarn serve重启开发服务器

在vue.config.js中配置

modules.exports = {
    devServer: {//自定义服务配置
        port: 3000,//定义端口号
        open:true//自动开启浏览项目页面
    }
}

脚手架eslint

eslint是代码检查工具,违反规定就会报错

如果写代码违反了eslint的规则就会出现报错

可以手动解决掉错误如下

脚手架清理欢迎页面

assets 和 components 文件夹下的一切都删除掉 (不要默认的欢迎页面)清空App.vue里面的代码

vue的基本指令

在don标签中,直接插入vue数据变量我们加做差值表达式

语法:{{表达式}}

以v-开头的标签属性,叫做指令

1. v-bind 2. v-on和修饰符 3. v-model和修饰符 4. v-html 5. v-show和v-if以及v-else 6. v-for

v-bind

语法 v-bind:属性名="vue变量"

简写: :属性名="vue变量" v-bind可以简写为:

v-on 事件绑定

语法 v-on:事件名=“methods中的函数名" v-on:事件名=“methods中的函数名(实参)" 可以简写为 @事件名=“methods中的函数名" 方法在menthods选项定义

修饰符

.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器

v-model双向绑定

语法: v-model="Vue数据变量" 双向数据绑定变量变化 -> 视图自动同步视图变化 -> 变量自动同步暂时只能用在表单标签上修饰符: .number 以parseFloat转成数字类型 .trim 去除首尾空白字符 .lazy 在change时触发而非input时

v-html

语法: v-html="Vue数据变量" 注意: 会覆盖插值表达式

v-show和v-if

语法: v-show="Vue变量" v-if="Vue变量" 原理 v-show 用的display:none隐藏 (频繁切换使用) v-if 直接从DOM树上移除高级 v-else的使用

v-show与v-if的区别

v-show 是用 css 方式 , 显示 / 隐藏标签 v-if 是从 DOM 树上 , 添加 / 移除 v-if 可以配合 v-else 使用

v-for

语法: v-for="(值变量, 索引变量) in 目标结构" v-for="值变量 in 目标结构" 注意: v-for的临时变量名不能用到v-for 范围外

码农公寓