前端基础 Vue -组件化基础

1.全局组件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="node_modules/vue/dist/vue.js"></script><script>Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示</script>
</head><body><div id="root"><button @click="add">我被点击了 {{count}} 次</button><counter></counter><counter></counter><counter></counter><counter></counter><counter></counter><counter></counter><counter></counter></div><script>//1、全局声明注册一个组件Vue.component("counter", {template: `<button @click="add">我被点击了 {{count}}  次</button>`,data() {return {count: 1}},methods: {add() {this.count++;}}})const app = new Vue({el: '#root',data: {count: 1},methods: {add() {this.count++;}}});</script><script></script>
</body></html>
  1. 组件其实也是有一个vue实例,因此它在定义时也会接收:data、methods、生命周期函数等
  2. 不同的是组件不会与页面的元素绑定,否则就无法复用了,因此没有el属性。
  3. 全局组件定义完毕,任何vue实例都可以直接在绑定的html 容器 中通过 组件名称来使用组件了
  4. data必须是一个函数,作用就是,提供内部作用域,是其vue实例提供的data对象是独立存在的。以提供一个复用效果。

2.局部组件

    //局部声明一个组件const buttonCounter = {template: `<button @click="add">我被点击了 {{count}}  次</button>`,data() {return {count: 1}},methods: {add() {this.count++;}}}const app = new Vue({el: '#root',data: {count: 1},methods: {add() {this.count++;}},components:{'button-counter':buttonCounter}});
   <div id="root"><button @click="add">我被点击了 {{count}} 次</button><button-counter></button-counter></div>

3.生命周期

  1. beforecreate: 数据模型未创建  模版未创建
  2. created :数据模型已创建 模板未渲染
  3. beforemount: 数据模型已创建 模板未渲染
  4. mouted :数据模型已创建 模板已渲染
  5. beforeupdate 数据模型已更新 模板未渲染
  6. updated 数据模型已更新 模板已渲染
  7. beforedistroy 销毁之前
  8. distroyed  已经销毁

4.使用Vue脚手架进行模块化开发

4.1 全局安装 webpack

npm install webpack -g

4.2 全局安装 vue 脚手架

npm install -g @vue/cli-init

4.3 初始化vue项目

vue init webpack vue-demo

4.4 启动vue项目

cd xxx
npm run dev

启动成功 

5. 路由 跳转

创建一个 hello.vue组件 在components文件夹下

<template><div><h1>你好 hello ,{{name}}</h1></div>
</template><script>
export default {data(){return{name:"张三"}}};
</script><style  ></style>

在route文件下的index.js写上路由controller

然后再App.vue 根组件下随便写个  就可以跳转了

<router-link to="/hello"> Go to Hello </router-link>

6.Vue整合 ElementUI快速开发

Element - The world's most popular Vue UI framework

6.1安装 element UI

npm i element-ui -S

6.2 引入Element

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.use(ElementUI);
/* eslint-disable no-new */
new Vue({el: '#app',router,components: { App },template: '<App/>'
})
<template><div><h1>你好 hello ,{{ name }}</h1><el-radio v-model="radio" label="1">男生</el-radio><el-radio v-model="radio" label="2">女生</el-radio></div>
</template><script>
export default {data() {return {name: "张三",radio: "1",};},
};
</script><style  >
</style>

6.3 再举个例子

在element ui 导航栏上面跳转路由

<!--  -->
<template><div><el-table :data="tableData"><el-table-column prop="date" label="日期" width="140"></el-table-column><el-table-column prop="name" label="姓名" width="120"></el-table-column><el-table-column prop="address" label="地址"> </el-table-column></el-table></div>
</template><script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';export default {//import引入的组件需要注入到对象中才能使用components: {},props: {},data() {const item = {date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'};return {tableData: Array(20).fill(item)}},//监听属性 类似于data概念computed: {},//监控data中的数据变化watch: {},//方法集合methods: {},//生命周期 - 创建完成(可以访问当前this实例)created() {},//生命周期 - 挂载完成(可以访问DOM元素)mounted() {},beforeCreate() {}, //生命周期 - 创建之前beforeMount() {}, //生命周期 - 挂载之前beforeUpdate() {}, //生命周期 - 更新之前updated() {}, //生命周期 - 更新之后beforeDestroy() {}, //生命周期 - 销毁之前destroyed() {}, //生命周期 - 销毁完成activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
};
</script>
<style  scoped>
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/286079.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

React Developer Tools安装

问题描述 在react开发中&#xff0c;需要插件来帮助我们开发&#xff0c;例如&#xff1a; 方法 &#xff08;可能需要魔法 进去后搜索&#xff1a; 点击下载即可

【OpenModelica】1 OpenModelica项目架构

1 OpenModelica项目架构 文章目录 1 OpenModelica项目架构一、 架构总览图二、OpenModelica各部分作用 一、 架构总览图 OpenModelica 环境由几个相互连接的子系统组成&#xff0c;如图 1.1 所示。 其中包括&#xff1a; MDT Eclipse 插件图形模型编辑器/浏览器文本模型编辑器…

一篇复现Docker镜像操作与容器操作

华子目录 Docker镜像操作创建镜像方式1docker commit示例 方式2docker import示例1&#xff1a;从本地文件系统导入示例2&#xff1a;从远程URL导入注意事项 方式3docker build示例1&#xff1a;构建镜像并指定名称和标签示例2&#xff1a;使用自定义的 Dockerfile 路径构建镜像…

瑞_Redis_商户查询缓存_什么是缓存

文章目录 项目介绍1 短信登录2 商户查询缓存2.1 什么是缓存2.1.1 缓存的应用场景2.1.2 为什么要使用缓存2.1.3 Web应用中缓存的作用2.1.4 Web应用中缓存的成本 附&#xff1a;缓存封装工具类 &#x1f64a; 前言&#xff1a;本文章为瑞_系列专栏之《Redis》的实战篇的商户查询缓…

C++11特性--统一的列表初始化

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 {} 初始化及std:initializer_list 一 这种初始化方式我们建议用第一种&#xff0c;但是以后看见下面两种也不要感到疑惑&#xff0c;是可以这样初始化的。 int main() {int a 1;int b { 1 };int c{ 1 };return 0; } 二…

【Flutter 面试题】讲解一下Flutter中的动画和过渡效果

【Flutter 面试题】讲解一下Flutter中的动画和过渡效果 文章目录 写在前面口述回答补充说明运行结果详细说明 写在前面 &#x1f64b; 关于我 &#xff0c;小雨青年 &#x1f449; CSDN博客专家&#xff0c;GitChat专栏作者&#xff0c;阿里云社区专家博主&#xff0c;51CTO专…

Facebook如何使用增强技术提升广告效果?

AR in AD - case study 脸书2021年宣布了引入AR的新方法&#xff0c;以推动其应用套件中的产品发现和购买。但他们首先考虑是技术。据脸书称&#xff0c;技术一直是增强现实在其应用程序中更广泛使用的主要障碍。这就是为什么它现在正在做出改变&#xff0c;使企业主和广告商更…

第九届蓝桥杯大赛个人赛省赛(软件类)真题C 语言 A 组-第几个幸运数字

幸运数字是可以被3,5,7任一整除的数字&#xff0c;列举小明号码内的所有可能组合并计数。注意别忘了把1占的一位减去。 #include<stdio.h> typedef long long ll; int main(){long long ans 0, n 59084709587505LL;for(ll i 1; i < n; i * 3){//计算小于等于n的数…

22.保护性暂停扩展(一对一)

如果需要多个类之间使用GuardedObject对象&#xff0c;作为参数传递不是很方便&#xff0c;因此设计一个解耦的中间类&#xff0c;这样不仅能够解耦结果的等待者和结果生产者&#xff0c;还能够支持多个任务的管理。 Futures就好比居民楼一层的信箱&#xff0c;每个信箱有房间的…

玩具蛇(蓝桥杯)

文章目录 玩具蛇题目描述答案&#xff1a;552dfs 玩具蛇 题目描述 本题为填空题&#xff0c;只需要算出结果后&#xff0c;在代码中使用输出语句将所填结果输出即可。 小蓝有一条玩具蛇&#xff0c;一共有 16 节&#xff0c;上面标着数字 1 至 16。每一节都是一个正方形的形…

蓝桥杯算法心得——附近最小(优先队列+滑动窗口)

大家好&#xff0c;我是晴天学长&#xff0c;这题可以用贪心优先队列和滑动窗口来写&#xff0c;需要的小伙伴可以关注支持一下哦&#xff01;后续会继续更新的。&#x1f4aa;&#x1f4aa;&#x1f4aa; 1) .附近最小 问题描述 小蓝有—个序列a[1], a[2],...,a[n]。 给定—个…

单目深度估计基础理论和论文学习总结

单目深度估计基础理论和论文学习总结 一、背景知识&#xff1a; 三维刚体运动的数学表示&#xff1a;旋转平移矩阵、旋转向量、欧拉角、四元数、轴角模型、齐次坐标、各种变换等 照相机模型&#xff1a;单目/双目模型&#xff0c;单目中的世界坐标系/相机坐标系/图像坐标系的…

一、初识 Web3

瑾以此系列文章&#xff0c;献给那些出于好奇并且想要学习这方面知识的开发者们 在多数时间里&#xff0c;我们对 web3 的理解是非常模糊的 就好比提及什么是 web1 以及 web2&#xff0c;相关概念的解释是&#xff1a; 1. 从 Web3 的开始 Web3&#xff0c;也被称为Web3.0&…

【排序算法】插入排序与选择排序详解

文章目录 &#x1f4dd;选择排序是什么&#xff1f;&#x1f320;选择排序思路&#x1f309; 直接选择排序&#x1f320;选择排序优化&#x1f320;优化方法&#x1f309;排序优化后问题 &#x1f320;选择排序效率特性 &#x1f309;插入排序&#x1f320;插入排序实现 &#…

shardingsphere-elastic-job-ui 管理界面安装

shardingsphere-elasticjob 从 3.0.0-alpha 版本开始&#xff0c;将console管理界面单独拆分出来 下载前需要 安装 maven 配置环境变量 安装 nodejs 配置环境变量 下载ui源码,安装 官方并未直接提供可执行的二进制文件,需要下载源码编译,目前发行版 3.0.2 https://github.com/…

修改网站源码,给电子商城的商品添加图片时商品id为0的原因

修改网站源码&#xff0c;给电子商城的商品添加图片时商品id为0的原因。花了几个小时查找原因。后来&#xff0c;由于PictureControl.class.php是复制CourseControl.class.php而来&#xff0c;于是对比了这两个文件&#xff0c;在CourseControl.class.php找到了不一样的关键几条…

探索AI大模型学习的未来发展与挑战

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;日常聊聊 ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 正文 AI大模型学习的理论基础 AI大模型的训练与优化 AI大模型在特定领域的应用 AI大模型学习的伦理与社会影响 未来发展趋势与挑…

T2I diffusion模型是零样本分类器笔记

1 tle Text-to-Image Diffusion Models are Zero-Shot Classifiers&#xff08;Kevin Clark, Priyank Jaini&#xff09;【NeurIPS Proceedings 2023】 2 Conclusion This study investigates diffusion models by proposing a method for evaluating them as zero-shot class…

基于nodejs+vue学生作业管理系统python-flask-django-php

他们不仅希望页面简单大方&#xff0c;还希望操作方便&#xff0c;可以快速锁定他们需要的线上管理方式。基于这种情况&#xff0c;我们需要这样一个界面简单大方、功能齐全的系统来解决用户问题&#xff0c;满足用户需求。 课题主要分为三大模块&#xff1a;即管理员模块和学生…

EDR下的线程安全

文章目录 前记进程断链回调执行纤程内存属性修改early birdMapping后记reference 前记 触发EDR远程线程扫描关键api&#xff1a;createprocess、createremotethread、void&#xff08;指针&#xff09;、createthread 为了更加的opsec&#xff0c;尽量采取别的方式执行恶意代…