Vue-cli创建及部分常用指令

最新推荐文章于 2024-03-30 19:39:09 发布

eiai007

最新推荐文章于 2024-03-30 19:39:09 发布

阅读量275

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/eiai007/article/details/126293511

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

vue的基本概念

vue是一种渐进式javascript框架，拥有一套自己规则的语法

渐进式：逐渐进步，想用什么就用什么，按需使用

什么是库和框架？
- 库：封装的属性和方法
- 框架：拥有自己的规则和元素，比库强大的多
Vue的开发方式？
- 传统开发模式：基于html/css/js文件开发vue
- 工程化的开发方式：在webpack环境中开发vue，这是最推荐，企业常用的方法

@vue/cli脚手架

webpack自己配置环境很麻烦，下载@vue/cli包，用vue命令创建脚手架项目

@vue/cli是Vue官方提供的一个全局模块包，用于创建脚手架项目

@vue/cli安装

全局安装命令

yarn global add @vu/cli
# OR
npm install -g @vue/cli

创建项目

# vue和create是命令
vue create （文件名)

启动内置的热更新本地服务器
```
npm run serve
# or
yarn serve
```

@vue/cli目录和代码分析

vuecil-demo        # 项目目录
    ├── node_modules # 项目依赖的第三方包
    ├── public       # 静态文件目录
      ├── favicon.ico# 浏览器小图标
      └── index.html # 单页面的html文件(网页浏览的是它)
    ├── src          # 业务文件夹
      ├── assets     # 静态资源
        └── logo.png # vue的logo图片
      ├── components # 组件目录
        └── HelloWorld.vue # 欢迎页面vue代码文件 
      ├── App.vue    # 整个应用的根组件
      └── main.js    # 入口js文件
    ├── .gitignore   # git提交忽略配置
    ├── babel.config.js  # babel配置
    ├── package.json  # 依赖包列表
    ├── README.md    # 项目说明
	└── yarn.lock    # 项目包版本锁定和缓存地址

主要文件及含义

node_modules下都是下载的第三方包
public/index.html – 浏览器运行的网页
src/main.js – webpack打包的入口文件
src/App.vue – vue项目入口页面
package.json – 依赖包列表文件

@vue/cli项目架构了解

请添加图片描述

@vue/clic自定义配置

vue.config.js配置

module.exports = {
  devServer: { // 自定义服务配置
    open: true, // 自动打开浏览器
    port: 3000 // 改变端口号
  }
}

@vue/cli_eslint的了解

是一个代码检查工具

关闭eslint检查可在vue.config…js中配置后重启服务
```
lintOnSave:false
```

简单Vue指令

vue指令，实质上就是特殊的html标签属性，特点：v-开头

v-bind

语法：v-bind:属性名=“vue变量”

简写：:属性名=“vue变量”

<!-- vue指令-v-bind属性动态赋值 -->
<a v-bind:href="url">我是a标签</a>
<img :src="imgSrc">

把vue变量的值，赋予给dom属性上，影响标签显示效果

v-on

事件绑定

语法

v-on:事件名=“要执行的少量代码”
- v-on:事件名=“methods中的函数”
- v-on:事件名=“methods中的函数(实参)”
- 简写: @事件名=“methods中的函数”

 <!-- vue指令:   v-on事件绑定-->
 <p>你要买商品的数量: {{count}}</p>
 <button v-on:click="count = count + 1">增加1</button>
 <button v-on:click="addFn">增加1个</button>
 <button v-on:click="addCountFn(5)">一次加5件</button>

 <button @click="subFn">减少</button>

 <script>
     export default {
         methods: {
             addFn(){ // this代表export default后面的组件对象(下属有data里return出来的属性)
                 this.count++
             },
             addCountFn(num){
                 this.count += num
             },
             subFn(){
                 this.count--
             }
         }
     }
 </script>

vue事件处理函数时，拿到事件对象

语法：

无传参, 通过形参直接接收
传参, 通过$event指代事件对象传给事件处理函数

<template>
  <div>
    <a @click="one" href="http://www.baidu.com">阻止百度</a>
    <hr>
    <a @click="two(10, $event)" href="http://www.baidu.com">阻止去百度</a>
  </div>
</template>

<script>
export default {
  methods: {
    one(e){
      e.preventDefault()
    },
    two(num, e){
      e.preventDefault()
    }
  }
}
</script>

@事件名.修饰符

语法：
- @事件名.修饰符=“methods里函数”
  
  常用事件
  - .stop - 阻止事件冒泡
  - .prevent - 阻止默认行为
  - .once - 程序运行期间, 只触发一次事件处理函数

  <template>
    <div @click="father">
      <!-- vue对事件进行了修饰符设置, 在事件后面.修饰符名即可使用更多的功能 -->
      <button @click.stop="btn">.stop阻止事件冒泡</button>
      <a href="http://www.baidu.com" @click.prevent="btn">.prevent阻止默认行为</a>
      <button @click.once="btn">.once程序运行期间, 只触发一次事件处理函数</button>
    </div>
  </template>

  <script>
  export default {
    methods: {
      father(){
        console.log("father被触发");
      },
      btn(){
        console.log(1);
      }
    }
  }
  </script>

键盘事件

语法：

@keyup.enter - 监测回车按键

@keyup.esc - 监测返回按键

<template>
  <div>
    <input type="text" @keydown.enter="enterFn">
    <hr>
    <input type="text" @keydown.esc="escFn">
  </div>
</template>

<script>
export default {
 methods: {
   enterFn(){
     console.log("enter回车按键了");
   },
   escFn(){
     console.log("esc按键了");
   }
 }
}
</script>