Vue-安装-组件-指令

1.介绍

Vue是一个构建用户界面（UI）的 JS库。
是一个构建数据驱动的渐进式框架，Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。基于MVVM (Model View VievModel)设计模式书写。

Vue只关注视图层，可以快速创建用户界面。
Vue的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
特点：

• 体积小 gzip压缩后33K，并且不依赖其他基础库。

• 更高的运行效率，基于虚拟DOM，一种可以预先通过JS（在内存中）进行各种运算，把最终的DOM操作计算出来并优化的技术啊。由于这种对DOM操作的预处理操作，并没有真实操作DOM，所以叫做虚拟DOM；

• 双向数据绑定，让开发者不用再去操作DOM对象，把更多的精力投入到业务逻辑上；

2.安装

2.1.安装node.js

官网：https://nodejs.org/en/

2.2.安装yarn

官网：https://yarn.bootcss.com/

2.3.安装vue-cli

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，是一个官方脚手架，可以帮助我们快速创建vue项目工程目录。

1、全局安装vue-cli
>> yarn global add @vue/cli

2、创建项目
>> vue create 项目名     

3、进入项目目录，启动项目
>> yarn run serve

注意：如果安装完后，输入vue --version提示不是内部或外部命令，请输入yarn config list查看yarn包安装目录，定位到prefix路径下面，将vue.cmd用记事本打开，查看路径，并将该路径配置到系统环境变量下即可

一级目录:
 node_modules       //>> 依赖的第三方模块
 public             //>> vue服务器静态文件目录，只有唯一的一个index.html
 src                //>> 我们的开发目录，最重要的目录，源文件（我们写的代码）目录
 .gitignore         //>> git忽略列表
 babel.config.js    //>> es6编译配置
 package-lock.json  //>> 包描述文件（记录更详细，记住当时的版本信息）
 package.json       //>> 包描述文件
 README.md          //>> 说明文档

二级目录:
src：
    assets          //>> 静态资源 styles images fonts
    components      //>> 组件,是.vue的文件,主要是公用的小组件
    views           //>> 页面级别的组件
    App.vue         //>> 整个应用的顶级组件.
    main.js         //>> 入口文件

3.组件

组件：封装起来的具有独立功能的UI部件，整个UI是一个通过小组件构成的大组件，每个组件只关心自己部分的逻辑，彼此独立。

特点：

• 可重用
• 可组合
• 易维护

3.1.单组件构成

// XXX.vue
<template>
  <div>
    <!-- HTML: 这里写HTML结构，注意有且仅有一个根节点-->
  </div>
</template>

<script>
// 这里写JS代码，默认需要暴露出去一个实例对象
export default {};
</script>

<style>
/* 这里写css样式 */
</style>

注意：

• style标签上可以通过 lang =”less”选择预处理语言（有些需要安装对应的loader模块）。
• style标签上可以通过 scoped,让样式私有化。

3.2.自定义组件

步骤：

• 引入组件（引入已经写好的xx.vue）
• 注册组件（在components里注册）
• 使用组件（通过标签名使用）

第一步：在components里创建Demo.vue，作为一个小组件

第二步：在Demo.vue先搭建好架构

<template>
	<div>
        
    </div>
</template>

<script>
export default {};
</script>

<style>
</style>

第三步：写点东西,并在export中导出该小组件,name是给该小组件命名，这关系到后面的import导入

<template>
  <div>
    <span>hello vue</span>
  </div>
</template>

<script>
export default {
  name: "Demo",
};
</script>

<style scoped>
span {
  color: red;
}
</style>

第四步：在src下创建Demo-app.vue作为大组件（顶级组件）

第五步：同样在Demo-app.vue下书写三层架构，并使用import引入刚刚在components中写好的Demo.vue小组件

<template>
  <div>
  </div>
</template>
<script>
import Demo from "./components/Demo.vue";
export default {};
</script>
<style>
</style>

第六步：在export的components中注册小组件，并将小组件挂载在<template>上

<template>
  <div>
    <Demo /> 将引入的Demo组件中的内容挂在这里
  </div>
</template>
<script>
import Demo from "./components/Demo.vue";
export default {
  name: "myVue",
  components: {
    Demo,
  },
};
</script>
<style>
</style>

第七步：在main.js中引入创建好的顶级组件Demo-app.vue

import { createApp } from 'vue'
import App from './Demo-app.vue'
createApp(App).mount('#app')

第八步：启动项目使用命令yarn run serve可以看到效果了

注意事项：

• 在写自定义组件时，<template>下一定要有根标签例如例子中的<div>，有且只有一个
• 在大组件（顶级组件）中注册小组件时，先import导入，再在components中注册，最后挂载在<template>顶级节点下
• main.js是项目的入口文件，它引入了融合了很多小组件的顶级组件，并将它创建在index.html中的标签上

Tips:

script中的是js代码注释用//

template中的是html代码注释是用<!---->

4.Mustach表达式及配置选项

4.1.data配置选项 与 mustach模板语法

在Demo.vue中动态的更新数据

<template>
  <div>
    <span>hello {{ username }}</span> <!--胡须表达式，用于把data中的数据，输出到html模板中 -->
  </div>
</template>

<script>
export default {
  name: "Demo",
  data() { //data选项用于准备数据，data是一个“函数”， 返回一个对象，对象中再写各种数据
    return {
      username: "spiderman",
    };
  },
};
</script>

<style scoped>
span {
  color: red;
}
</style>

胡须表达式还可以调用同类型方法

<template>
  <div>
    <span>hello {{ username.concat(" and superman") }}</span>
  </div>
</template>

<script>
export default {
  name: "Demo",
  data() {
    return {
      username: "spiderman",
    };
  },
};
</script>

<style scoped>
span {
  color: red;
}
</style>

5.指令

指令是写在标签上的一种自定义属性，主要是把vue实例中的数据，输出到html中（vue实例对象和html关联）

5.1.v-text 和 v-html

都可以把数据渲染到一对标签中间，但是v-text不能识别html标签，v-html可以解析html标签。
作用： 页面动态数据的回显（常见：v-text直接用“{{表达式}}”替代，v-html显示富文本数据）

<template>
  <div>
    <span>hello {{ username.concat(" and superman") }}</span>
    <!--内容直接渲染在div框内-->
    <div v-text="text"></div>
    <div v-html="html"></div>
  </div>
</template>

<script>
export default {
  name: "Demo",
  data() {
    return {
      username: "spiderman",
      text: "today is sunday",
      html: "<h1>enjoy life</h1>",
    };
  },
};
</script>

<style scoped>
span {
  color: red;
}
</style>

5.2.v-show 和 v-if

v-show: 通过控制css的display属性，来控制显示和隐藏。
v-if: 删除或重建DOM。
区别： 如果是频繁的切换显示隐藏，就是用v-show；v-if频繁操作dom，性能低。

作用： 控制页面内容显示隐藏（常见：v-show显示/隐藏切换频繁，v-if显示/隐藏切换不频繁，但对隐藏安全要求较高）。

<template>
  <div>
    <!--isShow为true则显示false不显示-->
    <span v-show="isShow">look at me</span>
    <span v-if="week === 1">开心</span>
    <span v-if="week === 2">很开心</span>
    <span v-if="week === 3">巨开心</span>
  </div>
</template>

<script>
export default {
  name: "Demo",
  data() {
    return {
      isShow: false,
      week: 3,
    };
  },
};
</script>

<style scoped>
span {
  color: red;
}
</style>

5.3.v-if v-else-if 和 v-else

这几个指令需要配合使用，逻辑和js中的条件判断语句一致，会从上往下，找到满足条件的第一个表达式，渲染该DOM.（指令元素间，必须紧密相间）
作用： 用于页面结构中的逻辑判断。（常见：根据场景的不同，制定不同的显示规则）

<template>
  <div>
    <!--根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。-->
    <span style="color: red" v-if="age > 60 && age <= 100">老年了</span>
    <span style="color: goldenrod" v-else-if="age > 30 && age <= 60">中年</span>
    <span style="color: green" v-else-if="age > 18 && age <= 30">青少年了</span>
    <span style="color: yellow" v-else-if="age >= 0 && age <= 18">儿童</span>
    <span style="color: yellow" v-else>非正常年龄</span>
  </div>
</template>

<script>
export default {
  name: "Demo",
  data() {
    return {
      age: 60,
    };
  },
};
</script>

<style scoped>
span {
  color: red;
}
</style>

5.4.v-for

循环数组或对象，用于根据模板，批量生产显示内容。

//>> 循环数组
<ul>
   <li v-for=”(元素的值， 元素的索引) in 数组”></li>
</ul>

//>> 循环对象
<ul>
   <li v-for=”(元素的值， 键名，元素的索引) in 对象”></li>
</ul>

<template>
  <div>
    <!--循环数组 key必须存在-->
    <ul>
      <li v-for="(value, index) in season" :key="index">
        --值--{{ value }}--索引--{{ index }}
      </li>
    </ul>
    <br />
    <ul>
      <li v-for="(value, key, index) in person" :key="index">
        {{ key }}--{{ value }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Demo",
  data() {
    return {
      season: ["春", "夏", "秋", "冬"],
      person: {
        name: "zhang xiao long",
        age: "56",
        hobby: "coding",
      },
    };
  },
};
</script>

<style scoped>
span {
  color: red;
}
</style>

5.5.v-model

只能使用于表单，让表单和数据双向绑定。
适用的标签：
input(输入框 单选框 多选框) select textarea
作用： 用于获取用户输入表单的值（常见：表单数据获取）

<template>
  <div>
    <form action="#">
      <input v-model="inputValue" type="text" /> 输入的值 {{ inputValue }}
    </form>
    <hr />
    <input type="radio" v-model="radio" value="0" />男
    <input type="radio" v-model="radio" value="1" />女
    {{ radio }}
    <hr />
    <!--复选框是一个数组-->
    <input type="checkbox" v-model="checkbox" value="sing" />唱歌
    <input type="checkbox" v-model="checkbox" value="dance" />跳舞
    <input type="checkbox" v-model="checkbox" value="read" />看书
    {{ checkbox }}
    <hr />
    <select v-model="select">
      <option value="0">--请选择--</option>
      <option value="gd">广东</option>
      <option value="xz">西藏</option>
      <option value="xj">新疆</option>
    </select>
    {{ select }}
    <hr />
    <textarea v-model="textarea"></textarea> {{ textarea }}
  </div>
</template>

<script>
export default {
  name: "Demo",
  data() {
    return {
      inputValue: "请输入内容",
      radio: 0,
      checkbox: ["sing", "dance"],
      select: "gd",
      textarea: "大家好,我是练习时长两年半的实习生",
    };
  },
};
</script>

<style scoped>
span {
  color: red;
}
</style>

5.6.v-bind

将data中的数据绑定到标签上,作为标签的属性！为一个标签属性绑定一个值:

为一个标签属性绑定一个值:

<标签 v-bind:标签属性名字=“表达式”></标签>

 <div id="myDiv">
        <img v-bind:src="src"/>
    </div>

简写形式:

<标签 :标签属性名字=“表达式”></标签>

 <div id="myDiv">
        <img :src="src"/>
    </div>

为一个标签绑定一个对象作为该标签的多个属性

<标签 v-bind=“对象”></标签>

 <div id="myDiv">
        <img v-bind="options"/>
    </div>

v-bind绑定style

<标签 :style=”{ color: ‘red’, backgroundColor: ‘green’ }” ></标签>

v-bind绑定class

语法：<标签 :class=”{ 类名1: flag1, 类名2: flag2 }” ></标签>
注意：flag是true，就有这个类，是false，就没有这个类

6.其他指令

• v-pre
  不编译Mustache模板表达式，直接当成普通的字符串输出
• v-cloak
  隐藏Mustache表达式，直到有数据后，才显示出来
• v-once
  只渲染1次，后续数据改变，不会重新渲染。

7.事件

事件核心4要素：
事件源（HTML元素）
事件句柄（事件名称）
事件处理函数（事件回调函数）
事件对象（记录事件上下文信息）

v-on: 事件名 
绑定事件 （简写 @）
<标签 v-on:事件类型=”函数名”></标签>
<标签 @事件类型=”函数名”></标签>
<标签 @事件类型=”函数名(参数)”></标签>

• 使用表达式

<template>
  <div>
    <button @click="num++"></button> {{ num }}
  </div>
</template>

<script>
export default {
  name: "Demo",
  data() {
    return {
      num: 0,
    };
  },
};
</script>
<style scoped>
span {
  color: red;
}
</style>

• 使用函数，函数写在methods里面

<template>
  <div>
    <button @click="count(12, 23)"></button>{{ num }}
  </div>
</template>

<script>
export default {
  name: "Demo",
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    count(num1, num2) {
      this.num = num1 + num2;
    },
  },
};
</script>

<style scoped>
span {
  color: red;
}
</style>

8.computed计算属性

计算属性computed也是vue的一个配置选项，写法和methods一样，把复杂的计算逻辑都写在计算属性函数中，返回结果，通过函数的名字，可以直接使用该函数的返回结果。

语法：
computed: {
  函数名（）{         //>> 函数名可以直接在template中使用，可以输出此函数返回的结果。
     // 函数的功能逻辑
     return 结果
	}
}

computed特点&和methods的区别：

1. 写法上一样，都是一个方法，但是computed必须返回一个结果。

2. computed有依赖缓存，如果依赖的数据没有发生改变，会直接使用使用缓存的结果，不会重新计算，只有依赖的数据发生了改变才会重新计算，性能高！而methods每次都会重新计算执行一遍。

<template>
  <div>
    <h1>{{ totalPrice }}</h1>
  </div>
</template>

<script>
export default {
  name: "Demo",
  data() {
    return {
      // 购物车数据
      shopCart: [
        { name: "apple", price: 3, count: 6 },
        { name: "banana", price: 5, count: 7 },
        { name: "orange", price: 6, count: 8 },
      ],
    };
  },
  methods: {

  },
  computed: {
    totalPrice() {
      const shopCart = this.shopCart;
      let total = 0;
      for (let i = 0; i < shopCart.length; i++) {
        total += shopCart[i].price * shopCart[i].count;
      }
      return total;
    },
  },
};
</script>

<style scoped>
span {
  color: red;
}
</style>