vue组件库开发日志（1）|青训营笔记

hasmokan
92 阅读3分钟

Vue

这是我参加笔记创作的第7天

版本设置

开发环境版本 （完整提示-学习阶段）

生产环境版本 （精简版本-实战阶段）

1、直接引入是vue的完整版本，自带vue的js编译功能。

2、npm 安装的是vue的runtime运行时，把编译、加载功能完全交给webpack，另外使用webpack或者cli封装的脚手架，可以有项目优化，例如图片压缩、减少http请求，代码压缩等等好处，还比较便于项目的工程化管理。

vue-router去除网址中#号

去除里面的 #image-20230114124548982

localhost:8080/#/

把hash去掉

image-20230114124738919

Attribute 绑定[#](cn.vuejs.org/guide/essen…

双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 v-bind 指令：

template

<div v-bind:id="dynamicId"></div>

v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicId 属性保持一致。如果绑定的值是 null 或者 undefined，那么该 attribute 将会从渲染的元素上移除。

简写#

因为 v-bind 非常常用，我们提供了特定的简写语法：

template

<div :id="dynamicId"></div>

开头为 : 的 attribute 可能和一般的 HTML attribute 看起来不太一样，但它的确是合法的 attribute 名称字符，并且所有支持 Vue 的浏览器都能正确解析它。此外，他们不会出现在最终渲染的 DOM 中。简写语法是可选的，但相信在你了解了它更多的用处后，你应该会更喜欢它。

接下来的指引中，我们都将在示例中使用简写语法，因为这是在实际开发中更常见的用法。

布尔型 Attribute#

布尔型 attribute 依据 true / false 值来决定 attribute 是否应该存在于该元素上。disabled 就是最常见的例子之一。

v-bind 在这种场景下的行为略有不同：

template

<button :disabled="isButtonDisabled">Button</button>

当 isButtonDisabled 为真值或一个空字符串 (即 <button disabled="">) 时，元素会包含这个 disabled attribute。而当其为其他假值时 attribute 将被忽略。

动态绑定多个值#

如果你有像这样的一个包含多个 attribute 的 JavaScript 对象：

js

data() {
  return {
    objectOfAttrs: {
      id: 'container',
      class: 'wrapper'
    }
  }
}

通过不带参数的 v-bind，你可以将它们绑定到单个元素上：

template

<div v-bind="objectOfAttrs"></div>

文本

<span>Message:{{ msg }}</span>
//一般配合js中的data(), props设置数据
export default{
	name:'Helloworld',
	data(){
		return{
			msg:"消息提醒"
		}
	}
}

条件渲染

<div v-for="item in items" :key="item.id">
    
</div>

<template v-for="todo in todos" :key="todo.name">
	<li>{{ todo.name }}</li>
</template>

![img](file:///C:\Users\hasmokan\Documents\Tencent Files\1021056159\Image\C2C\ZFLQ2AMF8FM1}C5}JS6LT.png)

需要唯一id

没有id 可以用index

image-20230117142551898

三元表达式

image-20230117143230185

全局注册和局部注册

import { createApp } from "vue";  //在vue中引入createApp方法
import App from "./App.vue"; //去除app文件
import emuiButton from "./components/button.vue";  //在我编写的组件当中取出按钮
const app = createApp(App);//用  用app.vue来创建app  并赋值给常量app

app.mount("#app");//把 app中 挂载 #div 

app.component(emuiButton.name, emuiButton);  在app中添加组件

自我提问？

组件全局注册和局部注册，还有动态绑定 v-on v-color的区别

avatar
文章
阅读
粉丝