vue（1）vue第一天一、vue概念 1.什么是vue 渐进式javacript框架, 一套拥有自己规则的语法，更少

vue第一天

一、vue概念

1.什么是vue

渐进式javacript框架, 一套拥有自己规则的语法，更少的时间, 干更多的活. 开发网站速度快，市场上90%工作都要求会Vue, 会Vue拿高薪, 甚至JAVA或测试都要学点Vue（官网地址: cn.vuejs.org/ ）

2.用vue开发的网站，哔哩哔哩、掘金、少数派

3.推荐学习网站 mdn

developer.mozilla.org/zh-CN/

4.资源下载（taobao将失效）

npm config set registry https://registry.npmmirror.com

二、@vue/cli脚手架

1.什么是脚手架

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

2.cmd-vue项目创建命令

（1）更改下载资源（命令）

npm config set registry https://registry.npmmirror.com

（2）下载包（命令）

npm install -g @vue/cli

（3）查版本号

vue -V

（4）创建项目

vue create 项目名称(不能中文、符合)

2.开启服务器

（1）cd进入自定义项目下，启动内置的webpack本地热更新开发服务器-浏览器项目页面

cd 项目名称(不能中文、符合)

npm run serve

（2）通过浏览器进入本地端口

http://localhost:8080/
http://192.168.75.45:8080/

3.项目重要文件

node_modules----依赖包文件

index.html----浏览器运行网页

main.js----项目入口

app.vue----项目根组件，渲染入口

package.json----记录项目依赖包声明

4.配置端口号

1.在vue.config.js上配置

module.exports = defineConfig({
  devServer: {
    port: 3000,
    open: true,
  },
});

5.main.js、app.vue和index.html关系

①main.js – 项目打包主入口 – Vue初始化

②App.vue – Vue页面主入口

③index.html – 浏览器运行的文件

④main.js => App.vue => index.html

6.提示未使用的变量（禁用，需开启删除此段代码即可），并重启服务npm run serve

eslint是一种代码检查的工具

方式1: 手动解决掉错误, 以后项目中会讲如何自动解决

方式2: 暂时关闭eslint检查(因为现在主要精力在学习Vue语法上), 在vue.config.js中配置后重启服务

module.exports = defineConfig({
  lintOnSave: false,  // 禁用检查提示，不写此段默认打开
});

7.单vue文件

vue推荐采用.vue文件开发项目

template只有一个根标签

vue文件独立模块，作用域互不影响

style配合scoped属性，保证样式只针对当前的template内标签失效

vue文件配合webpack，把他们打包起来插入到index.html

8.清理脚手架项目

（1）assets 和 components 文件夹下的一切都删除掉 (不要默认的欢迎页面)

（2）src/App.vue默认有很多内容, 可以全部删除留下template和script和style的框

三、vue指令

1.插值表达式

（1）在dom标签中, 直接插入vue数据变量（可以动态显示dom中的内容）

（2）语法{{}}，里面不能是语句（for 、if），msg和obj是vue数据变量要在js中data函数里声明

<template>
  <div>
    <h1>{{ msg }}</h1>
    <h2>{{ obj.res }}</h2>
    <h3>{{ obj.ans === "行" ? "答对了" : "答错了" }}</h3>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "你行不行",
      obj: {
        res: "你猜猜看",
        ans: "行",
      },
    };
  },
};
</script>

<style></style>

2.MVVM设计模式

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

3.v-bind 绑定属性（简写<img `:src`="imgUrl" alt="" />）

<template>
  <div>
    <p>
      <a v-bind:href="baiduUrl">百度</a>
    </p>
    <p>
      <img v-bind:src="imgUrl" alt="" />
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      baiduUrl: "https://www.baidu.com/",
      imgUrl:
        "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
    };
  },
};
</script>

<style></style>

4.v-on 绑定标签事件（简写：<button `@click`="add(20)">加20）

<template>
  <div>
    <h1>计数：{{ count }}</h1>
    <button v-on:click="count = count + 1">加1</button>
    <button v-on:click="subj">减1</button>
    <button v-on:click="add(5)">加5</button>
    <button v-on:click="add(10)">加10</button>
    <button v-on:click="add(15)">加15</button>
    <button v-on:click="add(20)">加20</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    subj() {
      this.count--;
    },
    add(num) {
      this.count += num;
    },
  },
};
</script>

<style></style>

5.v-on事件对象(event.preventDefault() 阻止默认行为)

（1）语法

①无传参，通过形参直接接收

②传参，通过$event指代事件对象传给事件处理函数

<template>
  <div>
    <a href="https://www.baidu.com/" @click="fn">百度</a>
    <a href="https://www.baidu.com/" @click="fn(10, $event)">百度</a>
  </div>
</template>

<script>
export default {
  methods: {
    fn(event) {
      event.preventDefault();
    },
    fn(num, event) {
      event.preventDefault();
    },
  },
};
</script>

<style></style>

6.v-on修饰符

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

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

<template>
  <div @click.stop="btn1">
    父
    <div @click.stop="btn2">子</div>
  </div>
</template>

<script>
export default {
  methods: {
    btn1() {
      console.log("父");
    },
    btn2() {
      console.log("子");
    },
  },
};
</script>

<style></style>

7.v-on按键修饰符

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

语法: @keydown.enter - 监测回车按键 @keydown.esc - 监测返回按键

@keyup.enter - 监测回车按键弹起 @keyup.esc - 监测返回按键弹起

<template>
  <div>
    <label for="">用户名：<input type="text" /></label>
    <label for="">用户名：<input type="password" @keyup.enter="fn" /></label>
  </div>
</template>

<script>
export default {
  methods: {
    fn() {
      console.log("enter触发");
    },
  },
};
</script>

<style></style>

更多修饰符: cn.vuejs.org/v2/guide/ev…

6.点击翻转

分析： ①：定义变量先静后动message:‘HELLO, WORLD’ ②：插值表达式赋予到dom上, 准备按钮和文字 ③: 按钮绑定点击事件和函数 ④: 对message值用split拆分, 返回数组 ⑤: 数组元素翻转用reverse方法 ⑥: 再把数组用join拼接成字符串赋予给message 注意：因为Vue是MVVM设计模式, 数据驱动视图, 所以视图自动改变

<template>
  <div>
    <!-- 插入表达式 -->
    <h1>{{ msg }}</h1>
    <!-- 绑定事件 -->
    <button @click="fn">逆天改命</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "Hello,World",
    };
  },
  methods: {
    fn() {
      // 字符串用split方法转数组
      const arr = this.msg.split("");
      console.log(arr);
      // 数组倒转
      arr.reverse();
      // 拼接并更新msg
      this.msg = arr.join("");
    },
  },
};
</script>

<style></style>

7.v-model

目标：value属性和Vue数据变量, 双向绑定到一起

语法: v-model="Vue数据变量" 双向数据绑定变量变化 -> 视图自动同步视图变化 -> 变量自动同步例子, 做个注册表单, 了解v-model在各种表单标签如何使用

<template>
  <div>
    <h1>{{ username }}</h1>
    <h1>{{ password }}</h1>
    <label for="">用户名： <input type="text" v-model="username" /></label>
    <label for=""
      >密码： <input type="password" v-model="password" @keyup.enter="login"
    /></label>
    <button @click="login">login</button>
  </div>
</template>

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

<style></style>

8.v-model-form表单案例

<template>
  <div>
    <p>
      <select v-model="city">
        <option value="广州">广州</option>
        <option value="深圳">深圳</option>
        <option value="东莞">东莞</option>
      </select>
    </p>
    <p>
      爱好： <input type="checkbox" v-model="hobby" value="篮球" />篮球
      <input type="checkbox" v-model="hobby" value="羽毛球" />羽毛球
      <input type="checkbox" v-model="hobby" value="足球" />足球
    </p>
    <p>
      性别： <input type="radio" v-model="gender" value="男" />男
      <input type="radio" v-model="gender" value="女" />女
    </p>
    <p>
      <textarea v-model="content"></textarea>
    </p>
    <button @click="fn">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      city: "",
      hobby: [],
      gender: "",
      content: "",
    };
  },
  methods: {
    fn() {
      console.log(this.city, this.hobby, this.gender);
      console.log(this.content);
    },
  },
};
</script>

<style></style>

9.v-model修饰符

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

.number 以parseFloat转成数字类型 .trim 去除首尾空白字符 .lazy 在change时触发而非input时(失去焦点时)

<template>
  <div>
    <p>年龄：<input type="text" v-model.number="age" /></p>
    <p>年龄：<input type="text" v-model.trim="content" /></p>
    <p><textarea v-model.lazy="infor"></textarea></p>
    <button @click="fn">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: 18,
      content: "",
      infor: "",
    };
  },
  methods: {
    fn() {
      console.log(this.age);
      console.log(this.content);
      console.log(this.infor);
    },
  },
};
</script>

<style></style>

10.v-for

目标：列表渲染, 所在标签结构, 按照数据数量, 循环生成

语法: v-for="值变量 in 目标结构" v-for="(值变量, 索引变量) in 目标结构" 目标结构: 可以遍历数组 / 对象 / 数字 / 字符串 (可遍历结构) 注意: v-for的临时变量名不能用到v-for范围外

<template>
  <div>
    <ul>
      <li v-for="k in list">{{ k }}</li>
    </ul>
    <ul>
      <li v-for="(k, i) in list">{{ i + 1 }}:{{ k }}</li>
    </ul>

    <h1>遍历对象</h1>
    <ul>
      <!-- 遍历对象，k是对象的属性值 -->
      <li v-for="k in obj">{{ k }}</li>
    </ul>
    <ul>
      <li v-for="(k, i) in obj">{{ i }}:{{ k }}</li>
    </ul>

    <h1>字符串遍历</h1>
    <ul>
      <!-- 遍历字符串，每个字符单独遍历 -->
      <li v-for="k in msg">{{ k }}</li>
    </ul>

    <h1>数字遍历</h1>
    <ul>
      <!-- for遍历数字，从1开始当前数字2 -->
      <li v-for="k in 5">{{ k }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ["chen", "wang", "li", "zhang"],
      obj: {
        name: "laowan",
        age: 18,
      },
      msg: "hddu",
    };
  },
  methods: {},
};
</script>

<style></style>

vue（1）