Vue基本知识1，安装创建以及常用指令

Vue基本知识1，安装创建以及常用指令

1. Vue的概念

1. 概念
   vue是一个渐进式的JavaScript开发框架；基于MVVM实现数据驱动的框架
   官网
   还可以用来做SPA(single page web application)： 一个网页就是一个应用；例如网易云

2. 特点

• 体积小
• 速廈快
• 数据双向绑定
• 生态丰富学习成本低

2. 安装vue-cli，环境的搭建

1. 全局安装脚手架， Vue命令；只需安装一次

yarn global add @vue/cli

2. 创建项目

vue create项目名称
创建项目有几个选项

• 选择安装的Vue版本，选第三个自己选择配置, 用上下箭头选择；babel是转语法工具

Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
Manually select features

• 接下来会有几个选项；空格选择或者取消选择

Babel
TypeScript
Progressive Web App (PWA) Support
Router
Vuex
CSS Pre-processors
Linter / Formatter // 启用后要求用大驼峰命名，两个单词以上等等。
Unit Testing
E2E Testing

• 选择版本

3.x
2.x

• 选择语言

Sass/SCSS (with dart-sass)
Less
Stylus

• 配置文件怎么放；默认都可以

In dedicated config files
In package.json

• 回车即可， 千万不要按y键

Save this as a preset for future projects? (y/N)

• 选择自己的安装命令；这里我喜欢yarn，所以选择yarn

use yarn
use npm

• 安装完成要继续执行给出的代码

cd 项目名称
yarn serve //运行

• 执行后会给出两个网址，一个本地， 一个虚拟服务器

Local: http://localhost:8080/
Network: http://172.20.10.4:8080/

• 选择一个在浏览器运行即可

3. 项目结构说明

.git 隐藏文件 官方仓库，直接删除
node_modules 依赖包
public 静态首页目录
src 项目开发目录，新有用户写的代码都在这里面
src/assets 公共静态资源目录，图片、css、宇体等资源都可以放在这里
src/components 组件目录，所有的子组件都放在这里
src/App.vue vue的根组件
src/main.js 主模块
.gitignore git忽略列表
babel.configjs babel的配置文件
jsconfig.json js配置文件
package.json 包描述文件
package-lock.json版本锁
package-lock.json版本锁
vue.configjs vue的配置文件

如果删除了某个文件报错，去App.vue删除对应路径即可
比如：

assets/logo.png 删除
components/ HelloWorld.Vue 删除

//去 => 项目名.Vue
//删除
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>

import HelloWorld from './components/HelloWorld.vue'
components: {
    HelloWorld
  }

4. 安装VSCode插件，帮助写Vue代码

1. Vuter
2. Vue VSCode Snippets
3. Vue Language Features (Volar)

5. 组件化

1. 什么是组件？

组件(component)
组件就是网页的零部件，一个网页的一个部分就是一个组件，可以由多人开始同一 个网而的各种组件

2. 单文件组件

1. 一个XXX.vue的文件就是一个单文件组件，由 template、script、style三部分组成。

• XXX.vue的的html模版就是网页的结构

<template>
    //html模版；有且只有一个根标签
</template>

<script>
    //js业务逻辑
</script>

<style scoped>
    //样式
    //scoped：加了这个属性说明样式是局部样式，样式只针对当前组件生效
</style>

2. 快捷语法；

• vbl 快速写出结构，更好
• vbase 快速写出结构

3. 创建新的组件
   在components文件夹下创建XXX.vue文件；主文件引入使用；注意文件名最好大驼峰

3. 使用自定义组件，谁要使用组件谁就引入注册

1. 引入组件 （引入一个已经写好的xxx。mue 组件）名字随便取

import MyButton from “组件路径”

还可以这样引入；@代表src文件。

import MyBtn from ‘@/components/MyBtn.vue’

2. 注册组件（在components 里面注册）

export default {
  components: {
    MyButton,
  }
}

3. 使用组件（通过标签名使用）

<MyButton></MyButton>

大驼峰可以改写成：

<my-button></my-button>

6. Mustach 表达式和配置选项；（胡须表达式）

1. 数据声明（属性）

// 数据声明
  data() {
    return {
      name: '张三'
    }
  }

2. 将数据渲染到页面上

<div>
    <!-- 将数据渲染到页面上 -->
    <h1>你好，{{ name }}</h1>
</div>

3. 方法的声明方式

 // 方法
  methods: {
    print() {
      this.names = '123',
      this.pwd = '123'
    }
  }

数据用data方法return出去， 方法放入methods:对象中
方法属性都写在这里面：

export default {
}

7. 常用指令

1. 什么是指令

vue指令是指标签上的 v-* 模式的厲性，，可以实现很多数据遍历、渲染、事件绑定等等功能
所有的指令可以去官网查看

2. v-text和 v-html

区别在于：一个只能渲染文字，一个还能渲染标签；

<!-- 相当于h2.innerText -->
<h2 v-text="msg"></h2>

<!-- 相当于h2.innerHTML -->
<h2 v-html="msg"></h2>

这里msg是暴露出来的数据

data() {
    return {
      msg: '你好啊<b>我的</b>朋友'
    }
}

3. v-show和v-if

1. v-show 表达式来决定标签显示或者隐藏；通过css的display来控制
2. 2. v-if 表达式决定创建或者删除标签

<h2 v-show="msg>=18">你好啊</h2>
<h2 v-if="msg>=18">真的</h2>

3. v-if 和 v-for尽量不要一起用

4. v-else 和 v-else-if

1. v-else要和v-if一起使用；两个标签必须挨在一起

<div v-if="num>22">好</div>
<div v-else>不好</div>

2. v-else-if要配合v-if一起使用，v-else不一定要用

<h2 v-if="num>30">大</h2>
<h2 v-else-if="num>20">中</h2>
<h2 v-else>小</h2>

5. v-for；遍历数组和对象

用于遍历数组和对象

1. 用法1：只遍历值，不遍历索引； 冒号是v-bind的简写

<!-- <h2 v-for="变量名 in 数组或对象" :key="v">{{ v }}</h2> -->
<h2 v-for="v in arr" :key="v">{{ v }}</h2>

2. 用法2: 遍历值和索引

<h2 v-for="(v,i) in arr" :key="i">{{i}} - {{ v }}</h2>

3. 用法3：遍历对象；v是值，k是键名，i是索引

<h2 v-for="(v,k,i) in obj" :key="v">{{v}} - {{k}} - {{i}}</h2>

• 遍历对象时还可以不去遍历索引

<h2 v-for="(v,k) in obj" :key="v">{{v}} - {{k}}</h2>

4. 偶遇一个奇怪的报错
   代码已经没有问题了，但还是报错！；只需要将一些空格删除并重输入即可

6. v-model；数据双向绑定

用于实现数据双向绑定，主要用于表单元素：input 、select、 textarea
button按钮要type：button ， 不然会提交

1. MVVM架构模式
   页面的输入框改变数据后，数据改变页面显示数据的元素就会改变
2. 示例

<!-- 数据双向绑定 -->
<p><input type="text" v-model="names"></p>
<p><input type="password" v-model="pwd"></p>
<!-- 数据改变这里就改变 -->
<h2>{{ names }}</h2>
<h2>{{ pwd }}</h2>

7. v-on事件处理

1. 写法

• 简写@事件名=“函数名”
• 一般写法v-on:click=“函数名”

2. 示例：

<button type="button" @click="print">提交</button>

3. 下方的事件函数

export default {
  // 方法
  methods: {
    print() {
      this.names = '123',
      this.pwd = '123'
    }
  }
}

8. v-bind 给属性绑定动态数据

1. 绑定动态数据
   示例：点击改变数据；（数据操作）

<h1 :title="title" @click="title = '标题'">今天星期3</h1>

export default {
    data() {
      return {
        title: '我是大标题'
      }
    },
}

还可以用来改变标签其它的属性， 比如input的type

2. 绑定style样式（样式操作）
   这里的css是一个变量，为一个对象，用它来控制样式

<h1 :style="css" @click="changeText">今天星期3</h1>

export default {
    data() {
      return {
        css: {
          color: '#f00', 
          fontSize: '100px'
        } 
      }
    },
    methods: {
      changeText() {
        this.css.color = '#00f'
        this.css.fontSize = '15px'
      }
    }
}

3. 绑定class （样式操作）

• 首先声明一些样式

// 声明样式
  .show1 {
    font-size: 100px;
    color: green;
  }
  .show2 {
    font-size: 200px;
    color: lightcoral;
  }

• 声明变量稍后控制样式，方法切换样式

export default {
    data() {
      return {
        className: 'show1' // 默认类名
      }
    },
    
    methods: {
      // 点击改变类名
      changeClass() {
        this.className =this.className === 'show1' ? 'show2' : 'show1'
      }
    }
}

• className是上面的变量名；点击切换样式。

<!-- 绑定class数据，绑定点击事件 -->
<h1 :class="className" @click="changeClass">今天星期3吧</h1>

4. 类名操作2；另外一种方式来操作类名
   多个类名就用逗号隔开即可

<h1 :class="{show1: true, show2: false}"></h1>

9.其它指令

1. v-pre 不編译 Mustache 模板表达式，直接当成普通的字符串输出
2. v-cloak 隐藏 Mustache 表达式，直到有数据后，才显示出来
3. v-once 只渲染一次，数据再变也不会渲染

8. 利用指令存放数据在标签

1. 直接存是不能做到的，必须用 ：data-自定义属性的方式, 才能把属性存到标签
   注意绑定的函数不能有括号

<td><button @click="deleTr" v-bind:data-h="i">删除</button></td>

// 2: 点击删除对应索引的数组元素
deleTr(e) {
    this.list.splice(e.target.dataset.h, 1)
}

2. 方法2 ， 索引可以直接从函数传进来；注意，事件函数是有括号的；用于传参。

<td><button @click="deleTr(i)">删除</button></td>

// 2: 点击删除对应索引的数组元素
      deleTr(i) {
        this.list.splice(i, 1)
        console.log(this.list);
      }