Vue

为什么学？

目标：更少的时间，做更多的事情，开发网站速度快，效率高。

​ 1.主要就是开发更效率更简洁，易于维护，快快快

​ 2.现阶段很多项目都是vue开发的

​ 3.是前端必备的技能

​ 4.市场需求高，会vue拿高薪！

Vue是什么？

本质：Vue是渐进式javascript框架。 https://cn.vuejs.org/

渐进式：逐步进步，不用全部使用。

在我们之前的学习中，其实已经接触了渐进式的概念

HTML让页面拥有结构->CSS让页面生动->JS让页面动起来。这也是一种渐进式。

库和框架

​ 库：封装属性或者方法(如：axios，query.js)

​ 框架：拥有自己的规则和样式，比库强大(vue.js)

Vue开发模式

vue有两种开发的模式：

​ 1.传统开发模式

​ 2.工程化开发模式:基于webpack环境中开发vue,企业通用！

Vue脚手架

为什么用：webpack自己配置环境非常麻烦，Vue脚手架解决了这个问题

@vue/cli

​ 是Vue官网提供的一个全局模块包，用于创建脚手架项目

​ 作用：保证各施工过程顺利进行而搭建的工作平台

特点：

​ 1.开箱即用

​ 2.0配置webpack

​ 3.babel,css,less支持

​ 4.开发服务器支持

@vue/cli安装

注意：把模块包安装到全局，电脑拥有VUE命令才可以创建脚手架！

1.下载全局模块包

​ 打开运行输入-cmd

npm install -g @vue/cli

注意：如果报错，就停止Ctrl+c，重新输入指令下载

2.查看版本

vue -V

3.创建项目

vue create vuecli-demo // 项目名 

注意：项目名不能是大写

4.切换进文件夹，运行

cd vuecil-demo

npm run serve
# 或
yarn serve

@vue/cli目录主要文件含义

node_modules 存放npm的项目依赖包
public/index.html 浏览器运行的页面
src/main.js 打包入口文件，项目入口
src/App.vue 页面根组件，vue项目入口
package.json npm依赖包声明文件

@vue/cli项目运行流程

在main.js进入，里面实例化 一个Vue，渲染App.vue挂载到index.html中

@vue/cli自定义配置

​ src并列出新建vue.config.js

/* 覆盖webpack的配置 */
module.exports = {
  devServer: { // 自定义服务配置
    open: true, // 自动打开浏览器
    port: 3000
  }
}

注意：项目没有webpack.config.js文件，@vue/cli用的是vue.config.js

eslint

是一个提示我们，报错的一个代码检测工具

注意：暂时关闭此代码检测工具，在vue.config.js中配置

module.exports = defineConfig{
	lintOnSave: false // 关闭eslint检测
}

单vue文件

特点：

​ 1.JS具有独立作用域

​ 2.style作用域可以是全局也可以是局部 配合scoped

​ 3.templata只能有一个根标签

​ 4.vue文件具有独立作用域，互不影响

清理欢迎界面

Vue指令

MVVM设计模型

​ 本质：M数据V视图MV双向绑定

​ 作用：是对一般问题的通用解决方案,减少DOM操作，提高开发效率

1.插值表达式

​ 语法：{{表达式}}

​ 表达式：变量，属性，三元，方法，数字

​ 表达式变量声明在data方法的返回对象里

<template>
<h1>{{ msg }}</h1>
<h2>{{ obj.name }}</h2>
<h3>{{ obj.age > 18 ? "成年" : "未成年" }}</h3>
</template>

<script>
export default {
  data() {
    return {
      msg: `黄某 傻逼`,
      obj: {
        name: `小黄`,
        age: "22",
      },
}

注意：if语句,for语句不是表达式，是语句！

2.v-bind

​ 作用：给标签绑定属性

​ 语法：v-bind:属性="Vue变量",简写：：属性名=“vue变量”

    <!-- v-bind:给标签绑定属性 语法:v-bind:属性名="变量名" -->
    <a v-bind:href="baiduURL">百度</a>
    <img :src="imgURL" alt="" />

  data() {
    return {
      // 🐇Vue变量声明在 data方法的返回对象中！！！
      baiduURL: `https://www.baidu.com`,
      imgURL: `https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png`,
      num: 0,
    };
  },

3.v-on

作用：给标签绑定事件

语法：

​ 1.v-on事件名="少量代码"

​ 2.v-on事件名="方法"

​ 3.v-on事件名="方法(参数)"

注意：调方法要声明在methods中，与data方法同级

<template>
  <div>
    <p>计数器：{{ num }}</p>
    <button v-on:click="num += 1">加1</button>
    <button v-on:click="addThree">加3</button>
    <button v-on:click="addFn(5)">加5</button>
    <button v-on:click="addFn(10)">加10</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    addThree() {
      this.num += 3;
    },
    addFn(addNum) {
      this.num += addNum;
    },
  },
};
</script>

简写：

​ 语法：@事件名=“方法”

<a @click="fn"></a>

v-on 事件对象

语法：

​ 1.当语法中无参数时，形参直接接收

​ 2.当语法中有参数时，声明$event代表事件对象，固定写法

<a @click="fn"></a>
<a @click="hi(10, $event)"></a>

methods: {
    fn(event) {
      event.preventDefault();
    },
    hi(num, e) {
      e.preventDefault();
    },
}

v-on修饰符

语法：@事件名.修饰符="方法"

修饰符：

1. .stop阻止事件冒泡行为

2. .prevent阻止默认行为

3. .once只能触发一次事件

<a href="https://www.baidu.com" @click.prevent="oh">我不跳</a>

<div>
  	<div @click="parent">父亲
      <div @click.stop="child">儿子</div>
	</div>
</div>

<button @click.once="check">抽奖</button>

v-on按键修饰符

语法：

​ 1.@keydown.enter 按下回车触发

​ 2.@keydown.esc 按下退出触发

<div>
    <div>用户：<input type="text" @keyup.esc="login"/></div>
    <div>密码：<input type="text" @keydown.enter="login"/></div>
</div>

5.课堂案例

​

<div>
    <h1>{{ message }}</h1>
    <button @click="reWord">逆转世界</button>
</div>

export default {
  data() {
    return {
      message : 'Hello Word'
    }
  },
  methods: {
    reWord(){
      const array = this.message.split("")
      array.reverse()
      this.message = array.join("")
    }
  }
}

🐇总结:

​ 1.先做静态，在做动态

​ 2.绑定事件

​ 3.字符串转数组 .split("")

​ 4.数组翻转 .reverse()

​ 5.数组转字符串 .join("")

6.v-model

本质：

​ 1.value属性和vue数据变量双向绑定

​ 2.变量变化，视图就变。视图变化，变量就变

语法：v-model="vue变量"

<h1>{{ username }}</h1>
    <div>用户：<input type="text" v-model="username" /></div>
    <div>密码：<input type="password" v-model="password" /></div>
    <button @click="login">登录</button>

export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    login(){
      console.log(this.username,this.password);
    }
  },
};

表单组件

<p>
      <select v-model="city">
        <option value="汕头">汕头</option>
        <option value="两英">两英</option>
        <option value="河浦">河浦</option>
      </select>
    </p>

    <p>
      爱好：<input type="checkbox" value="看视频 " v-model="hobby" />看视频
      <input type="checkbox" value="敲代码 " v-model="hobby" />敲代码
      <input type="checkbox" value="打机 " v-model="hobby" />打机
    </p>

    <p>
      <input type="radio" value="男" v-model="sex" />男
      <input type="radio" value="女" v-model="sex" />女
    </p>

    <p>自我介绍：<textarea v-model="info" cols="30" rows="10"></textarea></p>
    <input type="checkbox" v-model="agree" />是否同意用户协议

export default {
  data() {
    return {
      city: "",
      /*  hobby:"" */ // 默认是选中checked的属性 会全选
      hobby: [], // 多选框 给数组的方式
      sex: "",
      agree: false,
      info: "",
    };
  },
  methods: {
    login() {
      console.log(this.city);
    },
  },
};

🐇总结：

​ 1.下拉列表中，v-model写在select上，绑定的value值是option的value值

​ 2.v-model 默认绑定 cheked属性

​ 3.在复选框有两种情况：

​ 当变量是非数组：绑定的是布尔类型,checked的属性

​ 当变量是数组：绑定的是选中项的value

双向绑定修饰符

语法：v-model.修饰符="vue变量"

修饰符：

​ 1..number转数字

​ 2..trim去除首尾空白

​ 3..lazy失去焦点时再更新变量

<div>
    <!-- v-model.修饰符 -->
    <!-- 1.字符串转换为数字  .number-->
    <p>年龄：<input type="number" v-model.number="age" /></p>
    <!-- 2.去除首位空白 .trim-->
    <p>用户名：<input type="text" v-model.trim="username" /></p>
    <!-- 3.失去焦点再更新变量 .search-->
    <p>搜索：<input type="text" v-model.lazy="search" /></p>
  </div>

export default {
  data() {
    return {
      age: "",
      username: "",
      search: "",
    };
  },
};

7.v-for

作用：遍历数据，渲染列表

语法：

​ 1.v-for="变量 in 数据"

​ 2.v-for="(变量,索引下标) in 数据"

注意：

​ 1.v-for的变量名 不能设置到v-for范围外

​ 2.v-for可以遍历数组/对象/数字/字符串

	<ul>
      <h2>遍历数组</h2>
      <li v-for="value in list">{{ value }}</li>
      <br>
      <li v-for="(value, index) in list">{{ index + 1 }}{{ value }}</li>
    </ul>

    <ul>
      <h2>遍历对象</h2>
      <li v-for="value in obj">{{value}}</li>
      <br>
      <li v-for="(value,key) in obj">{{key}}:{{value}}</li>
    </ul>

    <ul>
      <h2>遍历字符串</h2>
      <li v-for="value in message">{{value}}</li>
      <br>
      <li v-for="(value,index) in message">{{index}}{{value}}</li>
    </ul>

    <ul>
      <h2>遍历数字</h2>
      <li v-for="value in number">{{value}}</li>
      <br>
      <li v-for="value in 10">{{value}}</li>
    </ul>

对this的理解

​ 调用本质：APP.vue是一个组件，组件在实例化vue的时候把data的变量绑定在了this上，把methods方法赋值到this上。所以在methods中就可以通过this. 拿到数据

如何学？

​ 1.每天知识点自测，最好了如指掌

​ 2.记住Vue指令作用，基础语法-弄一个字典

​ 3.课堂案例，练习，作业反复敲

​ 4.学会查找问题和解决问题方式-弄错题集

总结：Vue是渐进式JS框架，有自己的规则。要记住语法！！重复使用，多总结！！！