个人笔记-----vue组件基础（ 一 ）创建和使用【如有不对，欢迎指正】

最新推荐文章于 2019-06-29 10:32:09 发布
最新推荐文章于 2019-06-29 10:32:09 发布
阅读量122 收藏
点赞数
分类专栏： vue 文章标签： 个人笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_42664398/article/details/89239563
版权

在这里插入图片描述
所有组件都存放在 components 中

使用组件3个步骤，

1，首先要在页面中引入组件，
2，在js中进行注册组件
3，在DOM元素中使用组件

在页面中引用组件
在这里插入图片描述
在js中进行注册组件
在这里插入图片描述
在DOM元素中使用组件
在这里插入图片描述

在这里插入图片描述

詩酒趁年华
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-cli使用个人笔记
shangc_的博客
03-25 275
说明：    本人是vue初学者，这里主要写自己在使用vue-cli的一些经验，顺便做为笔记，以下是本文内容，如有不足，还请各路大神批评指正，先改正，再进步。一、vue-cli全局安装 1、安装nodejs（这个应该都知道）；        没安装node的点这里进入node官网 2、打开CMD，全局安装webpack；        npm install webpack -g 3、全局安装we...
个人笔记-----Vuex创建store.js和使用【如有不对，欢迎指正】
诗酒趁年华
04-28 2468
store.js相当于一个共享库，把很多共享的数据存放在这个store.js中，其他页面想取用，需要到store.js这个页面中取用，如果想改变数据也需要到store.js中修改数据。 创建store.js需要以下几步: 1，在src下面新建一个vuex文件夹， 2，在vuex创建store.js， 3，在store.js中引用vue和vuex，并且使用vuex， 4，定义数据，在State里面进...
个人笔记-----vue组件基础（ 二 ）子组件传值向父组件【如有不对，欢迎指正】
诗酒趁年华
04-26 249
下图为父组件 下图为子组件
个人笔记-----vue组件基础（ 二 ）父组件传值给子组件【如有不对，欢迎指正】
诗酒趁年华
04-12 119
为什么会引出这样的问题呢？ 1，子组件的数据是动态的。 2，子组件是不可以直接引用父组件的数据的。 父组件向子组件传值，（ 父组件向子组件传递数据时候，字符串，数字，方法都可以。） 1，在父组件页面的子组件标签里 设置一个动态属性（:tit=""），将父组件的数据存储到这个属性（:tit=""）中, 2，在子组件里面接受这个属性的数据，然后展示在子组件, 用 porps 来接收，porps是一个数...
个人笔记-----Vue中作用域插槽【如有不对，欢迎指正】
诗酒趁年华
05-01 205
子组件向父组件传递数据， 在子组件中设置一个通过 slot 传递数据的属性，<slot :list='list'></slot> :list是自定义属性， 父组件中依然需要先引入子组件，然后注册，最后再引用，接收子组件的标签的 template，是一定要写的，一定要写在字标签里面。接收子组件数据用slot-scope=“变量”，这个变量可以自定义，变量里面存储的是子组件向父...
个人笔记-----Vue中子路由的配置【如有不对，欢迎指正】
诗酒趁年华
05-01 615
router.js 文件的 children 里的 path 的路径不能加 /， 因为不是根目录下的， about文件里的 to 属性要有父级路径，<router-link to="/about/about1">about1</router-link> <template> <div class="about"> 这是About文件 ...
个人笔记-----Vue中 slot 插槽【如有不对，欢迎指正】
诗酒趁年华
04-29 90
根组件数据在子组件中展示， 在根组件中引入子组件，然后再子组件中用<slot></slot>直接就可以展示根组件的数据， 单个插槽 根组件 <about> <div>00000000</div> </about> <script> import About from './views...
个人笔记-----Vue中多个router-view应用【如有不对，欢迎指正】
诗酒趁年华
05-02 4885
单个 <router-view/> 和多个 <router-view/> 的区别， 单个 <router-view/> 只是一个区域的变化，不需要设置name属性，在设置路由的时候单个<router-view/>使用的是component， 多个<router-view/>里面需要设置一个name属性，设置路由的时候单个<route...
个人笔记-----Vue中与后台通信axios【如有不对，欢迎指正】
诗酒趁年华
05-02 317
安装 axios npm install axios --save-dev main.js中的Vue.config.productionTip = false 设置 false 以阻止 vue 在启动时产生提示。 然后再 main.js 中引入，import axios from 'axios'，然后再Vue实例对象中进行注册， //实例化vue对象 new Vue({ router, ...
使用form-create动态生成vue自定义组件和嵌套表单组件
10-17
在Vue.js开发中，动态生成组件是一个非常实用的功能，它允许开发者根据业务需求灵活地创建和更新组件。`form-create`是一个专为Vue设计的工具，用于动态生成表单及自定义组件，使得构建复杂的表单场景变得简单。在...
详解auto-vue-file:一个自动创建vue组件的包
10-17
主要介绍了auto-vue-file:一个自动创建vue组件的包,需要的朋友可以参考下
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
10-14
主要介绍了VUE使用 wx-open-launch-app 组件开发微信打开APP功能,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
vue组件 keep-alive 和 transition 使用详解
01-19
和 相似， 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 include: 字符串或正则表达式。...
vue-cron_vue-cron_vuecrond组件_vuecron_
10-04
Vue-Cron是一款基于Vue.js开发的时间周期（Cron）表达式组件，用于在前端应用程序中创建、编辑和处理定时任务。Vue-Cron旨在提供一种直观的用户界面，让用户能够通过图形化的方式设置复杂的Cron表达式，从而实现定时...
vue 中 show-overflow-tooltip 不生效
热门推荐
诗酒趁年华
06-11 1万+
<el-table-column prop="company_cost_price" label="公司成本价" width="" show-overflow-tooltip> <template slot-scope="scope"> <span>{{ scope.row.cost_frame }}</span...
Vue 表单验证报错 -- Cannot read property 'validate' of undefined
诗酒趁年华
06-29 8762
把下面的$refs和表单ref名字保持一致就行了。 ref="loginForm" this.$refs.loginForm.validate(valid => { })
个人笔记-----Vue中 设置404页面【如有不对，欢迎指正】
诗酒趁年华
05-01 5551
首先创建一个404页面的文件， 然后再router里面设置， path: '*', import Error from './views/Error.vue' { path: '*', name: 'error', component: Error },
个人笔记-----Vue中transition的过渡作用和transition-group【如有不对，欢迎指正】
诗酒趁年华
05-02 4527
<transition>标签有两个属性，name 属性和 mode 属性。 transition里的 name 值fade 就是 .fade-enter-active,类名开头的 fade <transition name="fade" mode="out-in"> <router-view/> <router-view class="left...
vue-element-admin：基于vue和element-ui的高效后台框架
9. **持续更新与社区支持**：Vue-element-admin有一个活跃的开发者社区，经常发布更新以修复问题、添加新功能，并提供详细的文档和示例代码，方便开发者学习和使用。 为了获取和使用这个框架，你可以通过提供的链接...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值