Vue第一弹-基础语法和规则

[TOC]

1.npm包的管理器-yarn也是一个包管理器

npm 可以下载依赖
```
$ npm install #下载所有的依赖
$ npm i
```
该命令执行在有package.json的目录下

yarn也可以下载依赖

$ yarn #下载所有依赖
$ yarn install #下载所有依赖

yarn和npm 下载全局包的存放目录是不一样的

全局- 当前计算机下所有位置都可以使用的包

局部- 当前目录才可以使用的包

npm安装全局包

$ npm i -g 包名
$ npm i 包 -g

yarn安装全局包

yarn add bao  global

卸载包

$ npm uninstall bao
$ yarn remove bao

安装yarn

$ npm i -g yarn

查看版本号

$ yarn -v

什么时候都可以用任意的包管理器，但是有一点，不要混用

一旦用了npm 后续就用npm,一旦用了yarn，后续就用yarn

npm的网速限制，下载缓慢，设置淘宝镜像

$ npm config set registry https://registry.npm.taobao.org/

查看淘宝镜像
```
$ npm config get registry
```

2.Vue渐进式和框架

渐进式-逐渐的掌握和学习

学一点就可以做一点-不需要全部学完才能做出东西
插值表达式- 指令

库和框架的概念
库是方法和属性的集合- 工具集
框架-提供一个生产线-按照框架的标准来开发-制定标准和规范

3.Vue脚手架和安装

99%的vue项目都是使用脚手架开发的

规范-效率-便捷
webpack 属于0配置

安装全局的vue脚手架

$ npm i -g @vue/cli #全局全局的vue脚手架

查看是否安装成功
```
$ vue -V
```
创建一个vue项目
```
$ vue create <project-name>
```

初建项目先选择vue2

市场上的百分之九十的老项目都是vue2, 30-40% => vue3

当访问localhost:8080时，如果下面页面，创建项目成功

4. 安装脚手架的问题

在安装脚手架之后，使用vue命令创建项目的时候，会遇到操作系统阻止脚本创建

powershell时微软提供的cmd之外的另一个命令行工具
调用：按住shift + 右键在一个空白处，在此处打开powershell

使用管理员身份打开powershell

搜索处输入p，右键我们的powershell, 用管理员身份打开

打开以后，执行命令
```
$ set-ExecutionPolicy RemoteSigned
```
选择Y
退出powershell,再去创建就可以了。

5.Vue脚手架项目的文件目录

main.js- webpack打包入口
App.vue- 项目根组件
public/index.html - 运行模版- SPA中的单页- Single Page Application
package.json- 存放依赖列表的
vue.config.js- 配置深度定制的webpack的一些文件

6. Vue入口的实例化过程

main.js为项目总入口 ```javascript import Vue from “vue” // 导入Vue依赖包 import App from “./App.vue” // 导入自定义组件

Vue.config.productionTip = false // 提示消息

new Vue({ render: (h) => h(App), // 渲染函数App组件 }).$mount(“#app”) // 挂载到真实的dom元素上

new Vue({ render: function (h) { return h(App) } }).$mount(“#app”) // 挂载

<a name="pvGuy"></a>
## 7.改变vue项目的启动端口和自动打开
> 新建vue.config.js

```javascript
const { defineConfig } = require("@vue/cli-service")
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 8888, //改变启动端口
    open: true, // 自动打开浏览器
  },
})

改变这个配置文件，必须重启

如果说想要打开固定的地址 http://localhost:8888
协议头：主机名：端口号
localhost-本机服务的域名
localhost- 127.0.0.1- host配置-操作系统配置文件

hosts存放目录- windows-c:/windows/System32/drivers/etc/hosts文件

VsCode中禁用相关的js插件- 保留 Vetur,Eslint

8.暂时关闭eslint的检查

在vue.config.js中加入一个属性即可 ```javascript const { defineConfig } = require(“@vue/cli-service”) module.exports = defineConfig({ transpileDependencies: true, devServer: { // host: “127.0.0.1”, // IP地址 host: “localhost”, // 本机域名 port: 8888, //改变启动端口 open: true, // 自动打开浏览器 }, lintOnSave: false // 关闭脚手架自带的 eslint的检查 })

<a name="Oy2yJ"></a>
## 9. 单文件组件的介绍

- html + css + js融合成一个文件.vue文件
```vue
<template>
   <div>老高哈喽啊</div>
</template>

Vue2.x-有且只有一个根节点

Vue3.x去除了这个限制

js- 导出基于这个单文件组件的逻辑和数据 ```vue


- css
```vue
<style scoped>
  li{
    list-style: none;
  }
 </style>

style不给scoped的情况下- 有可能会出现冲突

scoped会给当前所有的css类生成一个hash值-类名唯一

10. 安装Vue开发者工具

chrome有非常强大的插件系统

Vue脚手架配套的开发者工具

安装开发者工具

找到扩展程序

加载解压的程序

安装完成后，请先重启chome浏览器

注意: 以上操作只能适用vue项目

11.Vue-插值表达式

vue更新元素内容，采用插值表达式

数据驱动视图- 数据变化则视图变化

在App.vue(根组件) 中实现插值表达式

数据存于data函数中 ```vue

``` - 在插值表达式中，可以直接获取到 data中返回的数据 > 实际上，是this.name this.age, this指向的是当前的App.vue的组件实例 - 为什么Vue2.0中data不是一个对象而是一个返回对象的函数？ > 开发了一个组件-组件会被用无数次，用一次，就相当于实例化一次这样能保证组件实例之间的数据是相互独立的。 ## 12.MVVM的设计模式 - vue采用了MVVM的架构设计模式 1. 数据驱动视图 M- Model-数据模型-对应Vue中的data数据- 响应式数据-数据变化是可以被监测的
V-View -视图层- 对应我们的要展示的页面结构- 会有插值表达式-嵌入响应式数据
VM- 代表了 M 和 V之间的绑定关系，相当于一个桥梁，可以实现数据的双向流动 > 数据变化- 视图变化 a => 1 => 2 => 视图 2 > 视图变化 - 数据变化 ## 13.Vue中的指令-v-bind - 指令是作用在标签上的一种新的语法-给标签扩展功能 v-bind的作用：给标签绑定变量 ```vue 百度百度 ``` v-bind后面跟的是表达式-可以是变量-可以是一个运算结果 > 只有在写：之后才可以是表达式，否则只能是字符串 ```vue


<a name="fllVB"></a>
## 14. Vue中的指令-v-on
> v-on是专门来绑定事件的

语法
```vue
<button v-on:click="执行代码" >+1</button>
<button v-on:click="方法名">+1</button>
<button v-on:click="方法名(参数)">+1</button>
<button @click="方法名(参数)">+1</button>

案例

<template>
  <div id="app">
    <h1>当前的计数：{{ count }}</h1>
    <p>
      <!-- v-on:事件名 执行代码-->
      <button v-on:click="count = count + 1">+1</button>
    </p>
    <p>
      <!-- v-on:事件名="函数名" -->
      <button @click="addCount">+1</button>
    </p>
    <p>
      <!-- v-on:事件名="函数(参数)" -->
      <button @click="addCount2(5)">+5</button>
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  // 存放的是可调用方法
  methods: {
    addCount() {
      this.count++;
    },
    addCount2(value) {
      this.count += value;
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

methods存放的是所有的逻辑和方法- 任何方法都需要在methods中定义

在方法中获取变量改变变量都需要使用this
template模版中不需要使用this

15.Vue指令v-on中的事件对象

绑定事件 -没有() 的语法情况下，默认第一个参数就是参数对象 ```vue

``` 2. 绑定事件- 有()情况下，需要手动获取$event来传入事件对象 ```vue

> $是vue实例对象中所有的属性的标记- Vue的属性或者方法都以$开头

<a name="lreyD"></a>
## 16.Vue中的事件修饰符

- 修饰符提供更简便的处理 阻止冒泡-阻止默认事件-事件执行一次的功能
- stop  阻止冒泡
- prevent 阻止默认行为
- once  只执行一次
```vue
<template>
  <div id="app" @click="divClick">
    <!-- stop修饰符 阻止事件冒泡 -->
    <button @click.stop="btnClick">触发事件</button>
    <!-- 阻止默认事件 -->
    <a @click.prevent.stop="aClick" href="https://www.baidu.com">百度</a>
    <!-- once 只执行一次 -->
    <button @click.once="btnClick">once触发</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  // 存放的是可调用方法
  methods: {
    btnClick() {
      console.log("btn触发");
    },
    divClick() {
      console.log("div触发");
    },
    aClick() {
      console.log("a触发");
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

17. Vue中-键盘修饰符

keyup.enter 回车
keydown.esc 退出 ```vue


<a name="xbXQ9"></a>
## 18.Vue小作业-翻转世界
实现代码
```vue
<template>
  <!-- 初始变量 点击按钮- 进行翻转  点一次翻转一次 -->
  <div id="app">
    <h1>{{ str }}</h1>
    <button @click="reverseStr">翻转</button>
  </div>
</template>


<script>
export default {
  // 先定义变量
  data() {
    return {
      str: "Hello LaoGao",
    };
  },
  methods: {
    reverseStr() {
      // 翻转
      this.str = this.str.split("").reverse().join("");
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

19. v-model的用法

v-model=”变量”

只作用在表单上 ```vue

``` - v-model语法糖-是一种简写 - v-bind和v-on组合形成的一种效果 ```vue


<a name="UUXhk"></a>
## 20- v-model绑定其他表单类型

- select
- checkbox
```vue
<template>
  <div id="app">
    <h1>{{ likeFood }}</h1>
    <!-- v-model绑定select标签 来源于 option的value值 -->
    <select v-model="likeFood">
      <option value="火锅">火锅</option>
      <option value="江镇大包">江镇大包</option>
      <option value="钵钵鸡">钵钵鸡</option>
    </select>
    <!-- checkbox
      v-model- 非数组- 布尔值
      v-model- 多选
     -->
    <input type="checkbox" v-model="isMarry" />是否已婚

    <hr />
    <h2>{{ hobbyFood }}</h2>
    <input type="checkbox" value="漳州卤面" v-model="hobbyFood" />漳州卤面
    <input type="checkbox" value="沙县小吃" v-model="hobbyFood" />沙县小吃
    <input type="checkbox" value="兰州拉面" v-model="hobbyFood" />兰州拉面
    <input type="checkbox" value="隆江猪脚饭" v-model="hobbyFood" />隆江猪脚饭
  </div>
</template>

<script>
export default {
  data() {
    return {
      likeFood: "",
      isMarry: true,
      hobbyFood: [],
    };
  },
  methods: {
    changeUserName(event) {
      this.username = event.target.value;
    },
  },
};
</script>

<style>
</style>

radio ```vue


- textarea

<a name="gpxKF"></a>
## 21.v-model的修饰符

- number- 转成数字
- trim-去除空格
- lazy-会在失去焦点时才通知数据
```vue
<template>
  <div>
    <!-- number类型 -->
    <input type="text" v-model.number="age" />
    <textarea v-model.trim="intro"></textarea>
    <input type="text" v-model.lazy="name" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: "1",
      intro: " 我今年18岁 ",
      name: "芜湖",
    };
  },
};
</script>

<style>
</style>

组件的引入

一个.vue文件就是一个组件 ```vue

```

厦门一期webpack和vue基础

1.npm包的管理器-yarn也是一个包管理器

2.Vue渐进式和框架

3.Vue脚手架和安装

4. 安装脚手架的问题

5.Vue脚手架项目的文件目录

6. Vue入口的实例化过程

8.暂时关闭eslint的检查

10. 安装Vue开发者工具

11.Vue-插值表达式

My Name is {{ name }}

age: {{ age }}

sex: {{ sex }}

marry: {{ isMarry ? “已婚” : “未婚” }}

hobby: {{ hobby }}

personal-email: {{ personal.email }}, personal-address {{ personal.address }}

公积金：{{ salary * 0.12 }}

15.Vue指令v-on中的事件对象

17. Vue中-键盘修饰符

19. v-model的用法

{{ username }}

{{ username }}

组合命令

{{ likeFood }}

{{ hobbyFood }}

{{ myWork }}

{{ intro }}

组件的引入