Loading... <h2>一、Vue-cli</h2><ol><li>vue-cli介绍</li></ol><p>vue-cli 是 Vue.js 开发的标准工具。它简化了程序员基于 webpack 创建工程化的 Vue 项目的过程。</p><p>引用自 vue-cli 官网上的一句话：<br>程序员可以专注在撰写应用上，而不必花好几天去纠结 webpack 配置的问题。</p><p>中文官网：<span class="external-link"><a class="no-external-link" href="https://cli.vuejs.org/zh/" target="_blank"><i data-feather="external-link"></i>https://cli.vuejs.org/zh/</a></span></p><ol start="2"><li>vue-cli安装</li></ol><p>vue-cli 是 npm 上的一个全局包，使用 npm install 命令，即可方便的把它安装到自己的电脑上：</p><pre><code>npm install -g @vue/cli </code></pre><p>基于 vue-cli 快速生成工程化的 Vue 项目：</p><pre><code>vue create demo </code></pre><h2>二、组件</h2><p><strong>1. 什么是组件化开发</strong></p><p>组件化开发指的是：根据封装的思想，把页面上可重用的 UI 结构封装为组件，从而方便项目的开发和维护。</p><p><strong>2. vue 中的组件化开发</strong></p><p>vue 是一个支持组件化开发的前端框架。<br>vue 中规定：组件的后缀名是 .vue 。</p><p><strong>3. vue 组件的三个组成部分</strong></p><p>每个 .vue 组件都由 3 部分构成，分别是：</p><ol><li>template -> 组件的模板结构</li><li>script -> 组件的 JavaScript 行为</li><li>style -> 组件的样式</li></ol><p>其中，每个组件中必须包含 template 模板结构，而 script 行为和 style 样式是可选的组成部分。</p><p>3.1 template</p><p>vue 规定：每个组件对应的模板结构，需要定义到 < template> 节点中。</p><p><img src="https://www.xxhzm.cn/usr/uploads/2021/12/1274951616.png" alt="1.png" title="1.png"style=""></p><p>注意：</p><ol><li>template 是 vue 提供的容器标签，只起到包裹性质的作用，它不会被渲染为真正的 DOM 元素</li></ol><p>注: Vue2中template中只能包含唯一的根节点，在Vue3中不受限制</p><p>3.2 .vue 组件中的 data 必须是函数</p><p>vue 规定：.vue 组件中的 data 必须是一个函数，不能直接指向一个数据对象。<br>因此在组件中定义 data 数据节点时，下面的方式是错误的：</p><pre><code> data:{ username:'小小孩子们的博客 www.xxhzm.cn' }, </code></pre><p>需要定义成这种：</p><pre><code>data(){ return{ username:'小小孩子们的博客 Www.xxhzm.cn' } }, </code></pre><p>3.3 组件之间的父子关系</p><p>组件在被封装好之后，彼此之间是相互独立的，不存在父子关系 在使用组件的时候，根据彼此的嵌套关系，形成了父子关系、兄弟关系</p><p>3.4 使用组件的三个步骤</p><ol><li><p>使用 import 语法导入需要的组件</p><p>import Right from "@/components/right.vue";</p></li><li><p>使用 components 节点注册组件</p><pre><code>components: { Right }, </code></pre></li><li><p>以标签形式使用刚才注册的组件</p><p><Right></Right></p></li></ol><p>3.5 通过 components 注册的是私有子组件</p><p>例如：<br>在组件 A 的 components 节点下，注册了组件 F。<br>则组件 F 只能用在组件 A 中；不能被用在组件 C 中。</p><p>注册全局组件<br>在 vue 项目的 main.js 入口文件中，通过 Vue.component() 方法，可以注册全局组件。示例代码如下：</p><pre><code>import Count from '@/components/count.vue' Vue.component('MyCount', Count) </code></pre><p>参数1：字符串格式，表示组件的注册名称<br>参数2：需要被全局注册的那个组件</p><p>3.6 props的使用</p><p>props 是组件的自定义属性，在封装通用组件的时候，合理地使用 props 可以极大的提高组件的复用性！<br>它的语法格式如下：</p><pre><code>props:['init'], <MyCount :init="9"></MyCount> </code></pre><p>在使用组件处传入init</p><p>3.6.1 props是只读的</p><p>vue 规定：组件中封装的自定义属性是只读的，程序员不能直接修改 props 的值。否则会直接报错<br>要想修改 props 的值，可以把 props 的值转存到 data 中，因为 data 中的数据都是可读可写的！</p><pre><code> data() { return { count: this.init, }; }, </code></pre><p>3.6.2 props 的 default 默认值<br>在声明自定义属性时，可以通过 default 来定义属性的默认值。示例代码如下：</p><pre><code> props:{ init:{ // 如果外界在使用Count组件时候，没有传递init的值，则默认值生效 default:0 } }, </code></pre><p>3.6.3 props 的 type 值类型</p><p>在声明自定义属性时，可以通过 type 来定义属性的值类型。示例代码如下：</p><pre><code> props:{ init:{ // 如果外界在使用Count组件时候，没有传递init的值，则默认值生效 default:0, type:Number } }, </code></pre><p>3.6.4 props 的 required 必填项<br>在声明自定义属性时，可以通过 required 选项，将属性设置为必填项，强制用户必须传递属性的值。示例代<br>码如下：</p><pre><code> props:{ init:{ type:Number, required:true, } }, </code></pre><h2>三、 组件之间的样式冲突问题</h2><p>默认情况下，写在 .vue 组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题。<br>原理：<br>为每个组件分配唯一的自定义属性，在编写组件样式时，通过属性选择器来控制样式的作用域：<br><img src="https://www.xxhzm.cn/usr/uploads/2021/12/1301064452.png" alt="1.png" title="1.png"style=""></p><pre><code><template> <div class="left"> <h1 data-v-001>left组件</h1> <MyCount :init="9"></MyCount> </div> </template> <style lang="less"> .left { float: left; width: 50%; height: 400px; background: chocolate; } h1[data-v-001] { color: red; } </style> </code></pre><p>实际使用<br>为了提高开发效率和开发体验，vue 为 style 节点提供了 scoped 属性，从而防止组件之间的样式冲突问题：<br><img src="https://www.xxhzm.cn/usr/uploads/2021/12/3544069772.png" alt="2.png" title="2.png"style=""></p><p><strong>1.2样式穿透</strong></p><p>如果给当前组件的 style 节点添加了 scoped 属性，则当前组件的样式对其子组件是不生效的。如果想让某些样<br>式对子组件生效，可以使用 /deep/ 深度选择器。</p><pre><code>/deep/ h2{ color:pink } </code></pre><p>加了deep生成的选择器格式为</p><pre><code>[data-v-19cd203c] h2 {} </code></pre><p>注：当使用第三方组件的时候，如果有修改第三方组件的样式的需求，可以使用/deep/</p> 猜你想看 Linux安装Siege nux2对比nuxt3 每日一学：PHP 中的array_fill_keys函数详解 每日一学：PHP 中的array_intersect_key函数详解 PHP随机生成图片--超级简单 封装ajax请求 每日一学：PHP 中的array_diff_key函数详解 每日一学：PHP 中的array_rand函数详解 Vue侦听器 JS离开窗口改变title 最后修改：2022 年 06 月 05 日 © 允许规范转载 赞 0 如果觉得我的文章对你有用，请随意赞赏
3 条评论
博主真是个大好人 好人一胎九子 谢谢博主
Vue2中要求template标签仅包含唯一根节点，Vue3中已经可以包含多个了
哦哦，感谢大佬纠正，我稍后会更改 ::BZ:33_yeah::