.vue 文件介绍
时间:2020-09-20
本文章向大家介绍.vue 文件介绍,主要包括.vue 文件介绍使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
.vue文件介绍
-
.vue文件(组件)的三大部分
-
<template></template>
- <script></script>
- <style></style>
-
快捷键 sca
+回车 或者 <>
+ 回车
使用组件的注意事项:
1.里面 必须用 根标签包裹 (就是template下面只有一个div)
<template>
<div>
<h1>我是组件1</h1>
</div>
</template>
2.代码写到 exprot default
里面
<script>
export default {
};
</script>
3.<style></style>标签: .vue文件的样式文件
-
详细过程:
第一步:在components文件夹下,新建组件
-
sca
-
创建子组件
代码如下:
<template> <div> <h3>我是hello vue</h3> <button @click="tips">点我呀</button> </div> </template> <script> export default { methods:{ tips(){ alert('我被点了'); } } } </script> <style> </style>
第二步:
-
来到 main.js
-
使用
import 名字 from '组件路径'
引入 -
调用
Vue.componment('组件id',组件名字)
来注册 (Vue的V是大写) -
在需要用到这个组件地方,写
组件id的标签
就可以了代码如下:
// 进入main.js 文件 import Vue from 'vue' import App from './App.vue' // 导入子组件 hellovue import hellovue from './components/hellovue.vue' //注册组件 Vue.component('hello',hellovue); // 是否打印提示信息,可以删除 // 删除的话,默认值为true Vue.config.productionTip = false // new Vue({ // render: h => h(App), // }).$mount('#app') // 上面注释代码 相当于如下: new Vue({ el: '#app', // 把App组件渲染出来 render: h => h(App), })
-
注册局部组件
-
顾名思义:在哪注册,就在哪可以使用
- 用法:
- 在需要用的地方,引包
import 名字 from '组件路径'
引入` - 在
export default
里写一个属性:componments
传入一个对象,对象里写 这个组件名 - 组件名叫什么,那么在html 里就可以写这个名字的标签
- 在需要用的地方,引包
代码如下:
<template>
<div>
<h1>这是我创建的第一个cli项目</h1>
<hello></hello>
<localvue></localvue>
<localvue></localvue>
</div>
</template>
<script>
// 注册局部组件,在哪注册,在哪使用 在App.vue里注册的只能在App.vue里面使用
import localvue from './components/localvue.vue'
export default {
components:{
localvue
}
}
</script>
<style>
</style>
组件的name
属性
-
直接在组件的内部写
name:值
即可 -
不能用中文
-
写了之后,chrome的vue插件中可以看到这个名字,更加利于检索,利于编码
代码如下:
<script> export default { name:'hellovue' } </script>
原文地址:https://www.cnblogs.com/KoBe-bk/p/13701131.html
- WCF技术剖析之二十: 服务在WCF体系中是如何被描述的?
- WCF如何克服HTTP传输协议的局限提供对不同消息传输模式的实现
- H5手游大事件:腾讯上线“微信小游戏”!支持群分享与内购
- 我所理解的Remoting(2):远程对象生命周期的管理[上篇]
- 谈谈分布式事务(Distributed Transaction)[共5篇]
- SQLXML初体验:用XML代替T-SQL来操作数据库
- 自己动手写可视化软件(代码已开源)
- 探秘Tomcat——连接篇
- 微信小游戏正式上线,H5游戏迎新机遇
- WCF技术剖析之三十:一个很有用的WCF调用编程技巧[上篇]
- WCF技术剖析之十八:消息契约(Message Contract)和基于消息契约的序列化
- WCF技术剖析之三十:一个很有用的WCF调用编程技巧[上篇]
- 成为更好程序员的8种途径
- 探秘Tomcat——启动篇
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python入门摘要
- 这些 ECMAScript 模块知识,都是我需要知道的
- 微信小程序【事件绑定】入门一篇就搞定
- 一个后端狗的 Vue 笔记【入门级】
- 这才是现代C++单例模式简单又安全的实现
- Linux 学习笔记(1) 查看文件内容
- Python从入门到熟练(3):第一个程序
- 数学系的概率论和我们的不太一样。。。
- 如何实现一个优雅的Python的Json序列化库
- 还在从零开始搭建项目?手撸了款快速开发脚手架!
- Node.js 中的 require 是如何工作的?
- Ajax请求携带Cookie
- 关于kubernetes垃圾回收那点事
- 强化学习笔记11:工程师看强化学习
- 强化学习笔记10:经典游戏示例 classic games