Vue学习笔记

VS Code 插件安装与设置

安装插件：

• Live Server
• Vetur

VS Code 设置：

editor.formatontype=true
editor.formatonsave=true

el, data, methods

• html
  在 VSCode 中输入 ！ 再回车，会自动生成 html5 网页模板。

1. 引用 Vue.js 的代码要放在 header 节中：
引入调试版本：
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
生产环境版本
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

2. 引用自已的 js 代码，要放在 body 节之后：
<script src="app.js"></script>

3. 指定 div 元素，关联到 Vue 对象
<div id="title">
  <h1>Hello {{ name }}</h1>
</div>

app.js

// 语法 new Vue()，括号中要用 {} 形式实例化 Vue 对象
new Vue({
    // 绑定到 html 中的 div 元素
    el: "#title",

    // data 是一个函数，形式 data(){...}，函数体中以 return {...}; 的形式返回数据。
    data() {
        return {
            name: "ZhangHui",
            tel: "123456789"
        };
    },

    // 形式 methods: {...}，注意methods后面有 s
    methods: {
        fun1(arg1) {
            // 反引号可以直接拼接字符串与变量，参数以 ${...} 形式引用
            retrun `Hello ${arg1}`;
        },
        fun2(arg2) {
            // 引用 Vue 对象 data 中的变量需要加 this 前缀
            return `Hello ${arg2} and ${this.name}`; 
        }
});

属性绑定

将标签内部的属性绑定到 Vue 对象的数据或方法，HTML 中引用 Vue 数据或方法时无需使用 ${..}，直接将数据或方法名放在双引号内就可以。

<!-- 将 a 标签的 href 属性绑定到 Vue 对象的数据 name -->
<a v-bind:href="name">Baidu</a>

<!-- 上面的代码也可以省略“v-bind”，简写成 :href 的形式 -->
<a :href="name">Baidu</a>

<!-- 在 p 标签中插入 html 代码，使用 {{ website2 }} 引入只会原文显示，不能解析为 html -->
<!-- website2: '<a href="https://www.163.com">网易</a>' -->
<p v-html="website2"></p>

事件绑定

<!-- 在点击事件中对 age 变量加 1 -->
<button v-on:click="age++">Add</button>

<!-- 可以省略“v-on:”，用 @ 代替 -->
<!-- 在双击事件中调用方法并传参 -->
<button @dblclick="add(10)">Sub</button>

<!-- 键盘事件，加了修饰符，只有 CTRL+回车 才会触发 -->
<input type="text" @keyup.enter.ctrl="logname">

<!-- 鼠标移动事件 -->
<div id="canvas" v-on:mousemove="updateXY">
  {{ x }}, {{ y }}
</div>

methods:{
  updateXY(event){
    console.log(event); // 在控制台输出 event 全部属性
    this.x = event.offsetX;
  }
}

#canvas {
    width: 600px;
    padding: 200px 20px;
    text-align: center;
    border: 1px solid #333;
}

双向数据绑定

双向数据绑定只能用于 input、select、textarea 控件及自定义组件

<!-- 将 input 绑定到 vue 对象的数据段中的 name，lazy 修饰符表示懒加载，焦点移出后才会触发 -->
<input type="text" v-model.lazy="name">

ref 控件引用

ref 的作用是给控件一个名字，以后就可以在 VUE 对象中以 this.$refs.控件名 的形式引用该控件，下面用 ref 模拟实现了双向数据绑定。

<input type="text" ref="edtName" v-on:keyup="getName">

getName(){
  this.name = this.$refs.edtName.value;
}

watch

用于监视数据变量的变化

watch: {
  变量名(val, oldVal){
    console.log(val, oldVal);
}

计算属性

类似于 methods，但 methods 在一个方法被触发时，其它全部方法都会被执行一次，会影响性能。而计算属性只触发与自己相关的方法，性能更好。

1. 在 javascript 中定义计算属性

computed: {
  AddToA(){ // 计算属性以方法的形式定义，方法名即为计算属性名。
    // 计算属性的定义中必须包含 return 语句以返回属性徝
    return this.a + this.age;
  }
}

2. 在 html 中调用计算属性，因为是属性，调用时不要加括号，以免被解释为方法。

<p>Age + a = {{ AddToA }}</p>

动态样式

1. 在 styles.css 中定义样式及类

span {
    background: red;
    display: inline-block;
    padding: 10px;
    color: #FFF;
    margin: 10px 0;
}

.changeColor span {
    background: green;
}

.changeLength span:after {
    content: '张三丰祖师';
    margin-left: 10px;
}

#bag {
  width: 200px;
  height: 500px;
  /* margin 控件外空间，有四个参数时指定 上、右、下、左，两个参数指定 上下、左右 */
  margin: 0 auto; /* 上下间距为0，左右居中 */
  background: url(img/bag.png) center no-repeat;
  background-size: 80%;
}

/* 传统 html 中以 <div id="bag" class="broken"> 形式引用 */ 
/* VUE语法中以 <div id="bag" :class="{broken:bBroken}"> 形式引用 */ 
#bag.broken {
  background: url(img/bag_broken.png) center no-repeat;
  background-size: 80%;
}

2. 动态切换样式

<!-- 传统方式指定样式类 -->
<div class="changeColor">
    <span>Hello</span>
</div>

<!-- 绑定 class 属性至 css 类，方式为 v-band:class="{类名:[true|false]}" -->
<div :class="{changeColor:true}">

<!-- 通过 boolean属性切换类 -->
<div @click="bColor = !bColor" :class="{changeColor:bColor}">

<!-- 以ID + 类名指定样式 -->
<div id="bag" :class="{broken:bBroken}">

3. 通过计算属性切换样式

    computed: {
        doChange() {
            // 注意：引用内部变量需要使用 this 前缀
            return { changeColor: this.bColor }
        }
    }

在 html 中引用计算属性

<div @click="bColor = !bColor" :class="doChange">

4. 计算属性中可以返回多个类

    computed: {
        doChange() {
            return {
                changeColor: this.bColor,
                changeLength: this.bLength
            }
        }
    }

5. 行内样式指定

<!-- hp 为 VUE 对象中的数据，可以直接引用，用 “+ ‘%’” 的形式组合字符串 -->
<div :style="{width: hp + '%'}">

v-if v-show 指令

v-if 决定了是否渲染该元素，v-show 决定该元素是否显示（无论隐显，都存在于DOM中）

<div v-if="bShow">
<div v-else="!bShow">
<div v-show="IsShow()">
<!-- 条件判别式 -->
<nut-tag color="#FF1493" v-if="stu.sex === '女'">{{ stu.sex }}</nut-tag>
<nut-tag color="#00008B" v-if="stu.sex === '男'">{{ stu.sex }}</nut-tag>

v-for 指令

用于遍历数组，下面是 VUE 对象中的数据部分

mans: ["张三丰", "张无忌", "张翠山", "赵敏"],
users: [
  { name: "张三丰", type: "武当", age: 93 },
  { name: "韦一笑", type: "明教", age: 41 },
  { name: "黄蓉", type: "丐帮", age: 21 },
  { name: "虚竹", type: "逍遥派", age: 33 },
]

1. 简单遍历

<ul>
  <li v-for="man in mans">
    {{ man }}
  </li>
<ul>

2. 遍历并取得序号

<ul>
  <li v-for="(man, i) in mans">
    No.{{ i }} {{ man }}
  </li>
<ul>

在脚手架中使用 v-for 时，必须显式地指定 key 值：

<li v-for="(man, i) in mans" :key="i">

3. 遍历对象数组

<ul>
  <li v-for="(user, i) in users">
    No.{{i}} {{user.name}}, {{user.age}}, {{user.type}}
  </li>
</ul>

4. 遍历对象属性

<ul>
  <!-- 为避免解析出过多的 div，可使用 template 元素来代替 div -->
  <div v-for="(user, i) in users">
    <div v-for="(value, key) in user">
      No.{{i}} {{ key }}: {{ value }}
    </div>
  </div>
</ul>

组件 component

1. 定义组件
   语法 Vue.component("组件名", {实例化对象})，组件名最好小写，如果中间包含大写字母，在 html 中引用时需要在大写字母前加“-”。组件中可以使用 template 关键字定义 html 模板，在其中写入 html 代码。需要注意的是，template 中只能包含一个根元素。

Vue.component("mycomponent", {
    template: `
        <div>自定义组件，
        <h2>我的名字是{{name}}</h2>
        </div>
    `,
    data() {
        return {
            name: "桃花岛主"
        };
    }
});

2. html中使用组件
   在 js 脚本中定义完组件后，在 html 中，就可以与使用 html 标签一样，以组件名称引用组件。对于同一组件在 html 中实例化的多个实例，其内部变量空间是独立的，互不影响。

<mycomponent/>

fetch 接口操作

fetch 无需引用外部依赖库，但是需要两次 then 才能取得返回的数据。

1. get

fetch("接口地址").then(res => {
  return res.json();
}).then(res => {
  this.变量名 = res;
});

2. post

fetch("接口地址", {
    method: 'POST',
    // body 为需要提交的数据，数据对象需要转化为字符串格式
    body: JSON.stringify(this.todo),
    headers: {
        "content-type": "application/json"
    }
}).then(res => { // 以下代码是取得返回值
    return res.json();
}).then(res => {
    console.log(res);
});

axios 接口操作

axios 需要引用依赖库，但使用比较简便。

1. get

axios.get("接口地址").then(res => {
    this.todos = res.data; // 与 fetch 不同，在 res.data 中直接返回数据
})

2. post

// 直接把要提交的数据作为第 2 个参数即可
axios.post("接口地址", this.todo).then(res => {
    console.log(res.data); // 取得返回结果
})

组件定义与引用

1. 定义组件，文件名为 my.vue

<template>
  <!-- 只能有一个根元素，且不需要 ID -->
  <div>
  ...
  </div>
</template>

<script>
export default {
  // 不需要 el 来绑定到 html 元素
  data(){
  },
  methods: {
  },
  // 简单定义属性
  //props: ["param1", "param2", "parame"]
  props: {
    param1: {
      type: array,    // 定义参数类型，传入错误类型时在控制台报错
      required: true, // 定义必需参数，使用控件时如果没有传入参数则在控制台报错
    }
  }
  // 传参方法，在 template 段中实现，将数据段中的 users 传递给组件的 param1 属性
  <my :param1="users" />
  ...
};
</script>

<!-- style 中加入 scoped 后，所定义的样式只在本组件中有效，不会影响到其他组件，也不会受其他组件中的同名样式影响 -->
<style scoped>
...
</style>

2. 全局引用
   在 main.js 文件中引入，所有地方都可以使用（一般不使用全局引用的方法）。

// 导入，格式：import 自定义导入名 from 组件源文件
import my1 from './components/my.vue'

// 声明组件，格式：Vue.component("自定义标签", 自定义导入名);
Vue.component("myTag", my1);

在 App.vue 中使用自定义组件

<myTag />
<!-- 传入参数，mydata 是当前 vue 文件中 script 中 data 段的局部数据 -->
<myTag :param="mydata">

3. 局部引用
   以在 app.vue 中引用 my.vue 为例，在 app.vue 的 script 段中写入以下代码，即可在 app.vue 的 template 段中以 <myTag /> 形式使用自定义组件。

<script>
// 引入组件，名称与下面 components 中声明的必须一样
import myComponent from './components/my.vue';
export default {
  name: 'App', // 这个导出名不影响组件声明与调用？？
  components: {
    // 省略标签名，名称与上面 import 时必须一样，使用时以 myComponent 为 html 标签名称。
    myComponent, 
    myTag: myComponent // 完整写法，使用 myTag 为自定义标签名称
  }
}
</script>

回调事件

子组件想要修改父组件中的数据，必须通过回调事件来实现。

1. 子组件发起回调，以 header 组件为例，下面是 header.vue 的 script 段代码：

// this.$emit(回调名称, 传递参数...)
this.$emit("doCallback", "测试字符串");

2. 子组件实例（父组件 App.vue 中的代码）响应回调
   html代码

<!-- 格式：@回调名称=本地响应函数名，注意：只写响应函数名称，不要加括号 -->
<Header @doCallback="changeLocalVar"></Header>

javascript代码

methods: {
  changeLocalVar(aTitle) {
    this.title = aTitle; // 修改局部变量 title
  }
}

插槽 slot

1. 在子组件 (假设名为：ebutton)中定义插槽位置

<template>
  <div class= 'button'>
      <button></button>
      <slot></slot>       //slot 可以放在任意位置，解析时 slot 标签将被父组件中 ebutton 标签之间的内容所取代
  </div> 
</template>

2. 使用子组件时，在父组件中的子组件标签中间插入内容

<template>
  <div class= 'app'>
     <ebutton> 插入常量 </ebutton>
     <!-- 插入变量 -->
     <ebutton> {{ parent }} </ebutton>
  </div>
</template>

3. 具名插槽

<!-- 定义带有默认值的具名插槽 -->
<slot name= 'one'> 这就是默认值1</slot>

<!-- 父组件中向指定插槽插入内容，任何 html 标签中加入 slot="xxx" 属性后都会插入到子组件中的相应位置 -->
<template slot＝"one"> 这是插入到one插槽的内容 </template>

动态组件 component

<!-- 由局部变量 ComponentName 决定显示何种组件 -->
<component :is="ComponentName"></component>

组件缓存

可以保证在刷新时组件中的数据不消失，或刷新时不重新请求数据。将要缓存的组件外侧用 <keep-alive> 标签包裹，该组件就可以被缓存。

CLI 常用命令

# 安装 CLI 脚手架
npm install -g @vue/clu
# 安装 cnpm
npm install -g cnpm
# 创建 CLI 项目
vue create ProjectName
# 运行项目
npm run serve
# 编译项目
npm run build
# 安装 UI 组件到项目中（自动修改 app.vue 等项目文件）
vue add vuetify
# 安装普通组件到项目中（无需修改项目文件）
npm install -S xxxx

全局环境变量

1. 声明
   在项目根目录下创建 .env 文件，在其中写入

VUE_APP_变量名=https://api.app.com

VUE_APP_前缀是系统要求的，不可更改。
2. 读取

url = process.env.VUE_APP_URL;

3. 不同环境下的环境变量文件
   .env.development文件保存的变量在调试环境（npm run serve）下被读取，.env文件保存的变量在运行环境（npm run build）下被读取。