vue脚手架-基础API

一、Vue基本概念

1.1 为什么学习Vue

更少的时间,干更多的活,开发网站速度更快
前端工程师必备技能, 高薪 企业开发都在使用

1.2 Vue是什么?

• 渐进式javacript框架, 一套拥有自己规则的语法
• 官网地址: https://cn.vuejs.org/ (作者: 尤雨溪)

渐进式

• 逐渐进步, 想用什么就用什么, 不必全都使用

web里_渐进式

Vue里_渐进式

1.3 库和框架

• 库: 封装的属性或方法 (例jQuery)
• 框架: 拥有自己的规则和元素, 比库强大的多 (例Vue)

1.4 Vue的学习方式

• 传统开发模式：基于html文件开发Vue
• 工程化开发方式：在webpack环境中开发Vue，这是最推荐, 企业常用的方式

1.5 vue必备插件

vue-devtools

• 右上角-插件-谷歌访问助手-打开Chrome商店-搜索vue-devtools回车-然后添加至Chrome等待下载后自动安装-右上角显示已经添加即代表成功
  

vscode-插件补充

二、@vue/cli脚手架

2.1 @vue/cli脚手架介绍

• @vue/cli是Vue官方提供的一个全局模块包(得到vue命令), 此包用于创建脚手架项目
• 脚手架是为了保证各施工过程顺利进行而搭设的工作平台

@vue/cli脚手架的好处

• 开箱即用
• 0配置webpack
  • babel支持
  • css/less支持
  • 开发服务器支持

2.2 @vue/cli安装

• 全局安装@vue/cli 模块包

yarn global add @vue/cli

• 检测版本(是否安装成功)

vue -V

2.3 @vue/cli 创建项目

• 创建项目(不能由大写字母,中文和特殊符号)

vue create vuecli-demo

• 选择模板和包管理器, 等待脚手架项目创建完毕
  

2.4 @vue/cli 启动开发服务

• cd进入项目下, 启动内置的webpack本地热更新开发服务器 – 浏览项目页面

yarn serve

• 如果未自动弹出浏览器, 手动打开输入提示的域名+端口浏览项目页面
  

2.5 @vue/cli 目录和代码分析

main.js页面

import Vue from 'vue'  //引入Vue对象 类似于<script src="vue.js"></script>
import App from './App.vue'  //App.vue文件里对象引入过来(vue项目页面入口)

Vue.config.productionTip = false  //在控制台有一句提示消息

//实例化一个vue对象
new Vue({
  render: h => h(App),  //准备渲染App页面
}).$mount('#app')   //渲染到index.html文件里id叫app的标签上

2.6 项目架构了解

2.7 @vue/cli 自定义配置

项目中没有webpack.config.js文件，因为Vue脚手架项目用的vue.config.js

vue.config.js页面 (与src并列)

//vue脚手架项目-默认的配置文件名
//webpack+node环境-导出配置 对象
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: { //自定义服务配置
    port: 3000,
    open: true,//自动在浏览器页面打开
  },
  lintOnSave: false,//关闭eslint检查
})

2.8 eslint检查代码

eslint是一种代码检查的工具

处理eslint代码检查

• 方式1: 手动解决掉错误, 以后项目中会讲如何自动解决
• 方式2: 暂时关闭eslint检查(因为现在主要精力在学习Vue语法上), 在vue.config.js中配置后重启服务
  

2.9 单vue文件讲解

• Vue推荐采用.vue文件来开发项目
• template里只能有一个根标签
• vue文件-独立模块-作用域互不影响
• style配合scoped属性, 保证样式只针对当前template内标签生效
• vue文件配合webpack, 把他们打包起来插入到index.html
  

2.10 脚手架项目_清理欢迎界面

三、vue指令

3.1 Vue基础-插值表达式

• 声明式渲染/文本插值
• 语法: {{ 表达式 }}
• 数据变量在data函数里声明
• 表达式:变量 或 常量+运算符组成的 每个表达式原地都有结果
  

3.2 vue基础-MVVM设计模式

设计模式: 是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结

• MVVM(模型, 视图, 视图模型双向关联的一种设计模式)
• 减少dom操作,提高开发效率
  

3.3 Vue指令 v-bind

给标签属性设置Vue变量的值

• 语法：v-bind:属性名="vue变量"
• 简写：:属性名="vue变量"

    <a v-bind:href='url'>点击去百度</a>
    <img :src='imgUrl' alt="">

3.4 Vue指令 v-on

给标签绑定事件

• 语法：v-bind:属性名="vue变量"
• 简写：:属性名="vue变量"
• 方法在methods选项定义
• v-on: 可以简写成@

 	<button v-on:click="count = count + 1">+1</button>
    <button v-on:click="addFn">+1</button>
    <button @click="addFns(5)">+5</button>
    <button @click="subFn">-1</button>

3.5 Vue指令 v-on事件对象

Vue事件处理函数中, 拿到事件对象

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

3.6 Vue指令 v-on修饰符

在事件后面.修饰符名 - 给事件带来更强大的功能

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

    <div @click="father">
      <P @click.stop="son">.stop阻止事件冒泡</P>
      <a @click.prevent.stop href="http://www.baidu.com">去百度</a>
      <p @click.once="twoFn">点击观察事件处理函数执行几次</p>
    </div>

3.7 Vue指令 v-on按键修饰符

给键盘事件, 添加修饰符, 增强能力

• @keyup.enter - 监测回车按键
• @keyup.esc - 监测返回按键
• @keyup.enter.native native(监听组件的原生事件) ==> <el-input / >
• 更多修饰符: https://cn.vuejs.org/v2/guide/events.html

 <div>
    <!-- 绑定键盘按下事件 enter回车 -->
    <input type="text" @keydown.enter="enterFn">
    <!-- 绑定esc修饰符  检测是否触发了取消键 -->
    <hr>
    <input type="text" @keydown.esc="escFn">
  </div>

3.8 翻转文字案例

<template>
  <div>
    <h1>{{ msg }}</h1>
    <button @click="toFan">反转世界</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello Word'
    }
  },
  methods: {
    toFan() {
      //截取字符串返回数组
      let arr = this.msg.split('')
      console.log('arr', arr);
      arr = arr.reverse(arr)
      console.log('arr', arr);
      //把数组拼接
      this.msg = arr.join('')
    }
  }
}
</script>

3.9 Vue指令 v-model

value属性和Vue数据变量, 双向绑定到一起(暂时只能用在表单标签上)

• 语法: v-model="Vue数据变量"
• 双向数据绑定
  • 变量变化 -> 视图自动同步
  • 视图变化 -> 变量自动同步

3.10 表单数据的双向绑定

<template>
  <div>
    <div>
      <span>来自于哪里</span>
      <!-- 下拉菜单v-model绑定在select上 -->
      <select v-model="from">
        <option value="baijin">北京</option>
        <option value="shanghai">上海</option>
        <option value="shenzhen">深圳</option>
      </select>

      <!-- 复选框 -->
      <div>
        <!-- 重要 遇到复选框 v-model的变量值 非数组(关联的是复选框的checked属性) -->
        <!-- 数组类型 关联的是复选框的value属性 -->
        <span>复选框:</span>
        <input type="checkbox" v-model="hobby" value="抽烟">抽烟
        <input type="checkbox" v-model="hobby" value="喝酒">喝酒
        <input type="checkbox" v-model="hobby" value="写代码">写代码
      </div>
    </div>

    <!-- 单选框 -->
    <div>
      <span>性别</span>
      <input type="radio" value="男" v-model="gender" name="sex">男
      <input type="radio" value="女" v-model="gender" name="sex">女
    </div>
    <!-- 文本域 -->
    <div>
      <span>自我介绍</span>
      <textarea v-model="intro" cols="30" rows="10"></textarea>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      from: '',
      hobby: [],
      gender: '女',
      intro: ''
    }
  }
}
</script>

3.11 Vue指令 v-model修饰符

让v-model拥有更强大的功能

• 语法: v-model.修饰符="Vue数据变量"
  • .number 以parseFloat转成数字类型
  • .trim 去除首尾空白字符
  • .lazy 在change时触发而非inupt时

<div>
    <div>
      <span>
        年龄
      </span>
      <!-- .number修饰符 把值parseFloat转数值 -->
      <!-- 再赋予给v-model对应的变量 -->
      <input type="number" v-model.number="age">
    </div>

    <div>
      <!-- trim修饰符只去除首位两边的空格 -->
      <span>人生格言</span>
      <input type="text" v-model.trim="motto">
    </div>

    <div>
      <!-- .lazy失去焦点并且内容改变(onchenge事件) -->
      <span>个人简介</span>
      <textarea v-model.lazy="intro"></textarea>
    </div>
  </div>

3.12 Vue指令 v-text和v-html

更新DOM对象的innerText/innerHTML

• 语法
  • v-text="Vue数据变量 (把值当成普通字符串显示)"
  • v-html="Vue数据变量 (把值当成标签进行解析显示)"
• 注意: 会覆盖插值表达式

<div>
    <!-- v-text 和 v-html 会覆盖插值表达式  -->
    <p v-text="str"></p>
    <p v-html="str"></p>
  </div>

3.13 Vue指令 v-show和v-if

控制标签的隐藏或出现

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

<template>
  <div>
    <!--  v-show用display:none 隐藏 (频繁切换使用)-->
    <h1 v-show="isShow">v-show</h1>
    <!-- v-if用dom树上移除 -->
    <h1 v-if="isOk">v-if</h1>
    <!-- v-if v-else -->
    <p v-if="age >= 18">成年了</p>
    <p v-else>未成年</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      isOk: false,
      age: 18,
    }
  }
}
</script>

3.14 Vue指令 v-for

• 语法:
  • v-for="(值变量, 索引变量) in 目标结构"
  • v-for="值变量 in 目标结构"
• 可以遍历数组 / 对象 / 数字 / 字符串 (可遍历结构)
• v-for的临时变量名不能用到v-for范围外
• 谁想循环就把v-for写谁身上
• in前后由空格

<template>
  <div id="app">
    <!-- 语法1 v-for='(值变量名,索引变量名) in 目标' -->
    <ul>
      <!-- 想要循环谁  就写在谁的身上 -->
      <li v-for="(item, index) in arr" :key="index">
        {{ item }}-----{{ index }}
      </li>
    </ul>

    <!-- 语法二 v-for="值变量名 in 目标" -->
    <ul>
      <li v-for="item in stuArr" :key="item.id">
        <span>{{ item.name }}</span>
        <span>{{ item.sex }}</span>
        <span>{{ item.hobby }}</span>
      </li>
    </ul>

    <!-- v-for遍历对象 -->
    <ul>
      <li v-for="(value, key) in tObj">
        {{ value }}-----{{ key }}
      </li>
    </ul>

    <!-- v-for遍历数字 -->
    <div v-for="i in count">{{ i }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ["小明", "小欢欢", "大黄"],
      stuArr: [
        {
          id: 1001,
          name: "孙悟空",
          sex: "男",
          hobby: "吃桃子",
        },
        {
          id: 1002,
          name: "猪八戒",
          sex: "男",
          hobby: "背媳妇",
        },
      ],
      tObj: {
        name: "小黑",
        age: 18,
        class: "1期",
      },
      count: 10,
    };
  },
};
</script>