Vue-2

code_stream

墨衍会员 · AI 创作全网分发码龄4年

关注

原创最新推荐文章于 2026-10-01 10:15:36 发布 944 阅读 AI 写同款· GEO 优化 ›

从零开始搭建自己的VueJS2.0+ElementUI单页面网站（二、编写导航页）从零开始搭建自己的Vuejs2.0+ElementUI单页面网站之使用vue-router编写导航页面阅读详情

生命周期

Vue 生命周期

在这里插入图片描述

Vue 生命周期函数

Vue 生命周期过程中，会自动运行一些函数，被称为"生命周期钩子"，让开发者可以在特定阶段运行自己的代码

在这里插入图片描述

created 应用演示

<body>
  <div class="box">
    <ul v-for="item in list" :key="item.id">
      <li><img :src="item.img"></li>
      <li>{{ item.title }}</li>
      <li>{{ item.source }}</li>
      <li>{{ item.time }}</li> 
      <hr>
    </ul>
  </div>

  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="./js/vue.js"></script>
  <script>
    const boxObj = new Vue({
      el: '.box',
      data: {
        list: []
      },
      // created 应用演示
      async created() {
        const res = await axios.get('http://hmajax.itheima.net/api/news/')
        this.list = res.data.data
      }
    })
  </script>
</body>

mounted 应用演示

<body>
  <div class="box">
    <input type="text" v-model="words" class="search">
    <button @click=" words='' ">搜索一下</button>
  </div>

  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="./js/vue.js"></script>
  <script>
    const boxObj = new Vue({
      el: '.box',
      data: {
        words: ''
      },
      // mounted 应用演示
      // 等输入框渲染出来后，获取输入框焦点
      mounted() {
        document.querySelector('.search').focus()
      }
    })
  </script>
</body>

Vue CLI

基本介绍

Vue CLI 是 Vue 官方提供的一个全局命令工具，它可以帮助我们快速创建一个开发 Vue 项目的标准化基础架子（集成了 webpack 配置）

使用步骤

打开终端，全局安装 (一次)：yarn global add @vue/cli 或 npm i @vue/cli -g
查看 Vue 版本：vue --version
创建项目架子：vue create 项目名称 (项目名称不能用中文)
启动项目：yarn serve 或 npm run serve (在 package.json 文件中可自定义命令)

目录文件介绍

在这里插入图片描述

组件化开发

认识组件化

什么是组件化

一个页面可以拆分成一个个组件 (部分)，每个组件有着自己独立的结构、样式、行为

组件化的好处

便于维护，利于复用，提升了开发效率

分类

1.根组件（App.vue）
2.普通组件

在这里插入图片描述

组件的三个构成部分

template 结构 (有且只能有一个根元素)
script   行为 (写js逻辑)
style    样式 (可支持less，需要安装包)

在 style 中使用 less 语法的具体操作:
	1.安装依赖包 less 和 less-loader
	  输入命令即可:	yarn add less less-loader -D
	  其中 -D 的意思是只在开发时使用
	2.设置属性，例如: <style lang="less">...</style>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

组件的注册使用

方式分类

方式一：局部注册，只能在注册的组件内使用

创建 .vue 文件（三个组成部分）
在使用的组件内导入并注册

方式二：全局注册，所有组件内都能使用

注意事项

组件名规范，采用大驼峰命名法

局部注册

文件路径：src/App.vue

<template>
  <div class="App">
    <!-- 头部组件 -->
    <Header></Header>
    <!-- 主体组件 -->
    <Main></Main>
    <!-- 底部组件 -->
    <Footer></Footer>
  </div>
</template>

<script>
// 导入普通组件
import JackHeader from "./components/JackHeader.vue";
import JackMain from "./components/JackMain.vue";
import JackFooter from "./components/JackFooter.vue";

// 导出的默认配置
export default {
  components: {
    // '组件名':组件对象
    Header: JackHeader,
    Main: JackMain,
    Footer: JackFooter
  },
};
</script>

<style>
.App {
  width: 600px;
  height: 700px;
  background-color: #87ceeb;
  margin: 0 auto;
  padding: 20px;
}
</style>

文件路径：src/components/JackHeader.vue

<template>
  <div class="header">头部</div>
</template>

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

<style>
.header {
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 30px;
  background-color: #8064a2;
  color: white;
}
</style>

文件路径：src/components/JackMain.vue

<template>
  <div class="main">主体</div>
</template>

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

<style>
.main {
  height: 400px;
  line-height: 400px;
  text-align: center;
  font-size: 30px;
  background-color: #f79646;
  color: white;
  margin: 20px 0;
}
</style>

文件路径：src/components/JackFooter.vue

<template>
  <div class="footer">底部</div>
</template>

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

<style>
.footer {
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 30px;
  background-color: #4f81bd;
  color: white;
}
</style>

全局注册

文件路径：src/main.js

// 本文件的核心作用：导入 App.vue 文件，基于 App.vue 文件创建结构渲染 index.html

// 1. 导入 Vue 核心包
import Vue from 'vue'

// 2. 导入 App.vue 根组件
import App from './App.vue'

// 5. 导入组件
import JackButton from "./components/JackButton.vue"

// 3. 提示：当前处于什么环境（生产环境 / 开发环境）
Vue.config.productionTip = false

// 6. 对组件进行全局注册
// Vue.component(组件名, 组件对象)
Vue.component('MyButton', JackButton)

// 4. Vue 实例化，提供 render 方法，基于 App.vue 创建结构渲染 index.html
// new Vue({
//   el: '#app',
//   render: (createElement) => { return createElement(App) }
// })
// 上面的代码等价于下面代码
new Vue({
  render: createElement => createElement(App)
}).$mount('#app')

组件的样式冲突

冲突问题：

默认情况下，写在组件中的样式会"全局生效"，因此，很容易造成多个组件之间的样式冲突问题发生

解决办法：

可以给组件中的 style 标签加上 scoped 属性，这样可以让该组件的 style 样式只作用于当前组件，例如 `<style scoped>...</style>`

data 函数

<template>
  <div>
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button @click="count++">+</button>
  </div>
</template>

<script>
export default {
  // data 函数保证每一个组件实例，维护一个独立的数据对象
  data() {
    return {
      count: 99,
    };
  },
};
</script>

<style scoped>
div {
  margin: 20px;
}
span {
  margin: 10px;
}
</style>

组件通信

基本内容

含义介绍：组件通信，就是指"组件与组件"之间的数据传递

组件关系：

父子关系
非父子关系

通信方案：

父子关系 =》使用 props & $emit
非父子关系 =》使用 provide & inject 或者 event bus
通用解决方案 =》使用 Vuex（适合复杂业务场景）

在这里插入图片描述

父子通信

文件路径：src/App.vue

<template>
  <div>
    <!-- 通过"自定义属性"向子组件发送数据 -->
    <BaseTest
      title="这是来自'父组件'的数据"
      :username="username"
      :age="age"
      :isSingle="isSingle"
      :hobby="hobby"
      @content="infoFn"
    ></BaseTest>
    <!-- 展示来自"子组件"的数据 -->
    <div class="box">{{ something }}</div>
  </div>
</template>

<script>
import BaseTest from "./components/BaseTest.vue";
export default {
  data() {
    return {
      something:'',
      // 假设从服务器端获得了数据
      username: "Jack",
      age: 30,
      isSingle: true,
      hobby: ["code", "run", "swim"],
    };
  },
  methods: {
    // 接收来自"子组件"的数据
    infoFn(info) {
      this.something = info
    },
  },
  components: {
    BaseTest,
  },
};
</script>

<style>
</style>

文件路径：src/components/BaseTest.vue

<template>
  <div>
    <hr />
    <h3>{{ title }}</h3>
    <p>姓名：{{ username }}</p>
    <p>年龄：{{ age }}</p>
    <p>是否单身：{{ isSingle ? "是" : "否" }}</p>
    <p>兴趣爱好：{{ hobby.join("、") }}</p>
    <button @click="func">确认收到</button>
    <hr />
  </div>
</template>

<script>
export default {
  // prop 是在组件上注册的一些自定义属性
  // 通过 props 进行接收这些属性
  props: ["title", "username", "age", "isSingle", "hobby"],
  methods: {
    func() {
      // 通过 $emit 向"父组件"发送消息
      this.$emit("content", "子组件已确认收到消息");
    },
  },
};
</script>

<style scoped>
</style>

props 验证

文件路径：src/App.vue

<template>
  <div>
    <!-- 通过"自定义属性"向子组件发送数据 -->
    <BaseTest :w="width"></BaseTest>
  </div>
</template>

<script>
import BaseTest from "./components/BaseTest.vue";
export default {
  data() {
    return {
      width: 300,
    };
  },
  components: {
    BaseTest,
  },
};
</script>

<style>
</style>

文件路径：src/components/BaseTest.vue

<template>
  <div>
    <div class="base-progress">
      <div class="inner" :style="'width:' + w + '%'"></div>
    </div>
    <span>{{ w }}%</span>
  </div>
</template>

<script>
export default {
  // 通过 props 接收自定义属性，然后对其进行校验，如果校验失败，则控制台报错
  // 1. 基础写法（类型校验）
  // props: {
  //   w: Number,  // 约束传递过来的数据的类型
  // },
  // 2. 完整写法（更多校验）
  props: {
    w: {
      type: Number, // 类型
      required: true, // 是否必须（非空判断）
      default: 0, // 默认值
      validator(value) {
        if (value < 0 && value > 100) return true;
        else {
          console.error("数据范围必须是0~100");
          return false; // false 代表没有通过校验
        }
      },
    },
  },
};
</script>

<style scoped>
.base-progress {
  height: 26px;
  width: 400px;
  border-radius: 15px;
  background-color: #272425;
  border: 3px solid #272425;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.inner {
  height: 90%;
  background-color: rgb(124, 193, 246);
  border-radius: 15px;
  border: 1px solid #272425;
}
</style>

非父子通信

文件路径：utils/EventBus.js

// 1. 创建一个事件总线（空的 Vue 实例）
import Vue from 'vue'
const Bus = new Vue()
// 2. 导出事件总线
export default Bus

文件路径：src/App.vue

<template>
  <div>
    <BaseA></BaseA>
    <BaseB></BaseB>
  </div>
</template>

<script>
import BaseA from "./components/BaseA.vue"
import BaseB from "./components/BaseB.vue"
export default {
  components: {
    BaseA,
    BaseB,
  },
};
</script>

<style>
</style>

文件路径：src/components/BaseB.vue

<template>
  <div>
    <span>BaseB</span>
    <button @click="sendMsg">发布消息</button>
  </div>
</template>

<script>
import Bus from "../utils/EventBus.js";
export default {
  methods: {
    sendMsg(){
      // 发布消息，该消息可以被多个组件同时接收
      Bus.$emit('B_Send_Msg','Hello, How are you?')
    }
  },
};
</script>

<style>
</style>

文件路径：src/components/BaseA.vue

<template>
  <div>
    <span>BaseA</span>
  </div>
</template>

<script>
import Bus from "../utils/EventBus.js";
export default {
  // 钩子函数（详情回顾：生命周期知识点）
  created() {
    // 监听 Bus 事件
    Bus.$on("B_Send_Msg", (msg) => {
      alert("来自B发送的信息: " + msg);
    });
  },
};
</script>

<style>
</style>

跨层级非父子通信

文件路径：src/App.vue

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

<script>
import BaseA from "./components/BaseA.vue";
export default {
  // 所有的子孙后代都能共享这些数据
  provide() {
    return {
      color: this.color, // 传递"简单类型"是非响应式的，即数据不会更新
      userInfo: this.userInfo, // 传递"复杂类型"是响应式的，数据可以动态变化（推荐）
    };
  },
  data() {
    return {
      color: "pink",
      userInfo: {
        name: "Jack",
        age: 30,
      },
    };
  },
  components: {
    BaseA,
  },
};
</script>

<style>
</style>

文件路径：src/components/BaseA.vue

<template>
  <div>
    <p>{{ color }}</p>
    <p>{{ userInfo.name }}</p>
    <p>{{ userInfo.age }}</p>
  </div>
</template>

<script>
export default {
  inject: ["color", "userInfo"],
};
</script>

<style>
</style>

v-model 原理

原理解析：

v-model 本质上是一个"语法糖"（即：value 属性和 input 事件的合写）

作用：提供数据的双向绑定

数据变化，视图跟着变化
视图变化，数据跟着变化

注意：$event 用于模板中，获取事件的形参

<template>
   <div>
    <input v-model="msg" type="text" />
    <!-- 上面的代码本质是下面的代码 -->
    <input :value="msg" @input="msg = $event.target.value" type="text" />
  </div>
</template>

表单类组件封装

数据绑定问题

在开发中，我们需要对"表单类组件"进行封装，而这个"子组件"的数据是来自"父组件"的，我们无法直接对"子组件"的"表单类标签"使用 v-model 进行双向的数据绑定，所以我们需要使用 `v-model拆解` 实现绑定数据

具体解决

文件路径：src/App.vue

<template>
  <div>
    <BaseSelect
    :cityId="selectId"
    @changeId="selectId = $event"
    ></BaseSelect>
  </div>
</template>

<script>
import BaseSelect from "./components/BaseSelect.vue";
export default {
  data() {
    return {
      selectId: "102",	// 城市编号
    };
  },
  components: {
    BaseSelect,
  },
};
</script>

<style>
</style>

文件路径：src/components/BaseSelect.vue

<template>
  <div>
    <select :value="cityId" @change="handleChange">
      <option value="101">北京</option>
      <option value="102">上海</option>
      <option value="103">广州</option>
      <option value="104">深圳</option>
      <option value="105">重庆</option>
    </select>
  </div>
</template>

<script>
export default {
  props: {
    cityId: String,
  },
  methods: {
    handleChange(e) {
      this.$emit("changeId", e.target.value);
    },
  },
};
</script>

<style>
</style>

组件数据双向绑定

.sync 修饰符

作用：可以实现"子组件"与"父组件"的双向绑定，简化代码

特定：prop 属性名，可以自定义，不用固定为 value

具体演示

文件路径：src/App.vue

<template>
  <div>
    <button @click="isShow = true">确认付款</button>
    <!-- <BaseDialog :visible="isShow" @update:visible="isShow = $event"></BaseDialog> -->
    <!-- :visible.sync => :visible + @update:visible 化简后结果如下所示:-->
    <BaseDialog :visible.sync="isShow"></BaseDialog>
  </div>
</template>

<script>
import BaseDialog from "./components/BaseDialog.vue";
export default {
  data() {
    return {
      isShow: false,
    };
  },
  components: {
    BaseDialog,
  },
};
</script>

<style>
</style>

文件路径：src/components/BaseDialog.vue

<template>
  <div>
    <div v-show="visible" class="dialog">
      <p>你是否确定要付款?</p>
      <button @click="close">确定</button>
      <button @click="close">取消</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    visible: Boolean,
  },
  methods: {
    close() {
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style>
.dialog {
  margin: 0 auto;
  width: 200px;
  border: 5px solid #000;
  border-radius: 10px;
}
</style>

ref 和 $refs

通过 ref 与 $refs 获取 dom 元素

<template>
  <div>
    <div class="box" ref="myBox"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    // 通过 ref 与 $refs 获取 dom 元素，防止 document.querySelector() 从全局中获取元素产生冲突
    const myBox = this.$refs.myBox;
  },
};
</script>

<style>
</style>

通过 ref 与 $refs 获取"组件实例"

第一步：给目标组件添加 ref 属性

<BaseForm ref="hhh"></BaseForm>

第二步：使用 this.$refs.xxx 获取目标组件（同时可以调用其方法）

this.$refs.hhh.组件方法

Vue 异步更新

问题解析：

Vue 为了提高性能，修改了 dom 并不会立即更新，而是会等待一会儿再集中一起更新。如果在 dom 还没有更新的时候，代码继续执行下去，可能会出现找不到某个 dom 元素的问题。

解决方案：

使用 $nextTick 后，等 DOM 更新后，才会触发执行此方法里的函数体

this.$nextTick(()=>{
	// 这里写 DOM 更新后，要执行的代码
})

收录于

Vue

标签

#vue.js

从零开始搭建自己的VueJS2.0+ElementUI单页面网站（一、环境搭建）前言VueJS可以说是近些年来最火的前端框架之一，越来越多的网站开始使用vuejs作为前端框架，vuejs轻量、简单的特性使得前端开发变得更加简易，而基于vuejs的前端组件库也越来越多。我们今天使用的ElementUI，是饿了么团队开发的一款基于vuejs的前端组件库，也是众多vuejs组件库里面比较优秀的一款。这里要说一下我们构建网站所需要用到的一些东西： NodeJS（npm） Webstor 阅读详情

Vue-2

生命周期

Vue 生命周期

Vue 生命周期函数

Vue CLI

基本介绍

使用步骤

目录文件介绍

组件化开发

认识组件化

组件的注册使用

方式分类

注意事项

局部注册

全局注册

组件的样式冲突

data 函数

组件通信

基本内容

父子通信

props 验证

非父子通信

跨层级非父子通信

v-model 原理

表单类组件封装

数据绑定问题

具体解决

组件数据双向绑定

.sync 修饰符

具体演示

ref 和 $refs

Vue 异步更新

相关推荐