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 相关文章推荐
IE FF OPERA都可用的弹出层实现代码
Sep 29 Javascript
jQuery 源码分析笔记(7) Queue
Jun 19 Javascript
javascript学习笔记(七) js函数介绍
Jun 19 Javascript
js实现仿微博滚动显示信息的效果
Dec 21 Javascript
有关JavaScript中call()和apply() 的一些理解
May 20 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
Mar 26 Javascript
js中的闭包学习心得
Feb 06 Javascript
关于jquery layui弹出层的使用方法
Apr 21 jQuery
基于VUE实现的九宫格抽奖功能
Sep 30 Javascript
JS根据json数组多个字段排序及json数组常用操作
Jun 06 Javascript
vue按需加载实例详解
Sep 06 Javascript
Node.js API详解之 util模块用法实例分析
May 09 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 Smarty初体验二 获取配置信息
2011/08/08 PHP
PHP中session变量的销毁
2014/02/27 PHP
php+mysql数据库实现无限分类的方法
2014/12/12 PHP
php验证码的制作思路和实现方法
2015/11/12 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
在页面上点击任一链接时触发一个事件的代码
2007/04/07 Javascript
jquery 多行滚动代码(附详细解释)
2010/06/17 Javascript
深入分析js中的constructor和prototype
2012/04/07 Javascript
jquery实现的导航固定效果
2014/04/28 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
2014/06/16 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
2014/10/17 Javascript
jQuery中[attribute]选择器用法实例
2014/12/31 Javascript
jQuery性能优化技巧分析
2015/02/20 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
2015/09/07 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
Javascript将JSON日期格式化
2016/08/23 Javascript
Vue.js系列之项目搭建(1)
2017/01/03 Javascript
AngularJS 异步解决实现方法
2017/06/12 Javascript
jQuery中库的引用方法
2018/01/06 jQuery
element ui 表格动态列显示空白bug 修复方法
2018/09/04 Javascript
vue.js自定义组件directives的实例代码
2018/11/09 Javascript
Vue侦测相关api的实现方法
2019/05/22 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
2019/06/26 Javascript
[42:56]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python使用zip将list转为json的方法
2018/12/31 Python
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
html5清空画布方法(三种)
2017/10/16 HTML / CSS
中秋节超市促销方案
2014/01/30 职场文书
中学教师培训制度
2014/01/31 职场文书
小学节能减排倡议书
2014/05/15 职场文书
大学生工作求职信
2014/06/23 职场文书
结婚当天新郎保证书
2015/05/08 职场文书
2015年手术室工作总结
2015/05/11 职场文书
地道战观后感400字
2015/06/04 职场文书
客户答谢会致辞
2015/07/30 职场文书
小学入学感言
2015/08/01 职场文书