vue2.0开发入门笔记之.vue文件的生成和使用


Posted in Javascript onSeptember 19, 2017

这几天新项目用vue2.0开发,由于之前没用过vue,拿到项目框架看到都是.vue文件,

vue2.0开发入门笔记之.vue文件的生成和使用

不知道怎么用,以下是关于.vue文件的发现:

1、一个.vue文件是一个封装的组件,在.vue文件里可以写 html, css, js

vue2.0开发入门笔记之.vue文件的生成和使用

其中template 中写html 代码,其实就是定义模板。

2、各个.vue之间样式不是独立的,同一选择器在不同的.vue里只要满足选中的条件就可以起作用.比如我在箭头1指的文件里定义了样式 .box{ width:200px; },如果在箭头2指的文件里也有 .box,那么 .box{ width:200px; }就会在箭头2的文件也起作用,除非是在箭头2的文件重新定义样式并覆盖。

vue2.0开发入门笔记之.vue文件的生成和使用

3、不使用.vue 单文件时,通过 Vue 构造函数 创建一个 Vue 根实例来启动vuejs 。.vue文件中不用Vue创建实例,用export default 。 .vue文件中 export default 后面的对象 就相当于 new Vue() 构造函数中的接受的对象:

vue2.0开发入门笔记之.vue文件的生成和使用

即:

<script>
  export default{
    data:function(){
      return {
        //返回一个对象
      }
    },
    methods:{
      //定义方法
    }
  }
</script>

4、可以引入less等:

vue2.0开发入门笔记之.vue文件的生成和使用

5、在route.js中设置跳转路径是,如果调到某一文件夹下的 index.vue文件,则可以省略文件夹后的 index.vue。要跳转到这个文件时:

vue2.0开发入门笔记之.vue文件的生成和使用

则下面这两句话是等价的:

vue2.0开发入门笔记之.vue文件的生成和使用

vue2.0开发入门笔记之.vue文件的生成和使用

所以一般是省略掉文件夹后的index.vue。

以上关于这个.vue的组件应用,希望对您有所帮助。也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js检查页面上有无重复id的实现代码
Jul 17 Javascript
jQuery中change事件用法实例
Dec 26 Javascript
JavaScript的9种继承实现方式归纳
May 18 Javascript
在JavaScript中操作时间之setYear()方法的使用
Jun 12 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
Sep 23 Javascript
jQuery编写网页版2048小游戏
Jan 06 Javascript
微信小程序 密码输入(源码下载)
Jun 27 Javascript
bootstrap多层模态框滚动条消失的问题
Jul 21 Javascript
基于Require.js使用方法(总结)
Oct 26 Javascript
JS实现的合并多个数组去重算法示例
Apr 11 Javascript
OpenLayers3加载常用控件使用方法详解
Sep 25 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 26 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
Sep 19 #Javascript
ECMAScript6变量的解构赋值实例详解
Sep 19 #Javascript
vue 粒子特效的示例代码
Sep 19 #Javascript
jQuery实现简单日期格式化功能示例
Sep 19 #jQuery
慕课网题目之js实现抽奖系统功能
Sep 19 #Javascript
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 #jQuery
JavaScript事件处理程序详解
Sep 19 #Javascript
You might like
利用php+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
9个PHP开发常用功能函数小结
2011/07/15 PHP
一个简洁的PHP可逆加密函数(分享)
2013/06/06 PHP
php实现的返回数据格式化类实例
2014/09/22 PHP
php分页查询mysql结果的base64处理方法示例
2017/05/18 PHP
CakePHP框架Model关联对象用法分析
2017/08/04 PHP
关于ThinkPHP中的异常处理详解
2018/05/11 PHP
PHP生成二维码与识别二维码的方法详解【附源码下载】
2019/03/07 PHP
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
2012/01/20 Javascript
js中哈希表的几种用法总结
2014/01/28 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
2014/08/18 Javascript
node.js中的fs.readdirSync方法使用说明
2014/12/17 Javascript
jQuery地图map悬停显示省市代码分享
2015/08/20 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
2016/04/20 Javascript
原生JS和jQuery操作DOM对比总结
2017/01/19 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
2017/01/25 Javascript
JS解析url查询参数的简单代码
2017/08/06 Javascript
详解javascript appendChild()的完整功能
2018/08/18 Javascript
用webpack4开发小程序的实现方法
2019/06/04 Javascript
webpack 如何解析代码模块路径的实现
2019/09/04 Javascript
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
Python 拷贝对象(深拷贝deepcopy与浅拷贝copy)
2008/09/06 Python
Python实现抓取网页生成Excel文件的方法示例
2017/08/05 Python
儿童python练习实例
2018/05/27 Python
Python实现网站表单提交和模板
2019/01/15 Python
PyQt5图形界面播放音乐的实例
2019/06/17 Python
Python 依赖库太多了该如何管理
2019/11/08 Python
解决TensorFlow GPU版出现OOM错误的问题
2020/02/03 Python
基于python判断字符串括号是否闭合{}[]()
2020/09/21 Python
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
好药师网上药店:安全合法的网上药品零售药房
2017/02/15 全球购物
新西兰最大的品牌运动鞋购物网站:Platypus NZ
2017/10/27 全球购物
项目经理岗位职责
2013/11/11 职场文书
OpenCV-Python实现轮廓拟合
2021/06/08 Python
源码解读Spring-Integration执行过程
2021/06/11 Java/Android
Python中的嵌套循环详情
2022/03/23 Python