当前位置:首页 > 日记 > 正文

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

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

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

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

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

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

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

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

即:

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

4、可以引入less等:

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

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

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

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

相关文章

jQuery实现的手风琴侧边菜单效果

jQuery实现的手风琴侧边菜单效果

菜单,手风琴,侧边,效果,电脑软件,本文实例讲述了jQuery实现的手风琴侧边菜单效果。分享给大家供大家参考,具体如下:动手做了一个简单手风琴菜单,上图:点击 B 可收缩 C 列表,点击 C 改变自身和父节点 B 的样式,悬浮时均有不同的样式改变。先看页面…

js设计模式之结构型享元模式详解

js设计模式之结构型享元模式详解

享元模式,设计模式,结构型,详解,电脑软件,运用共享技术有效地支持大量的细粒度的对象,避免对象间拥有相同内容造成多余的开销。享元模式主要是对其数据、方法共享分离,将数据和方法分成内部数据、内部方法和外部数据、外部方法。内部方法与内…

jQuery点击头像上传并预览

jQuery点击头像上传并预览

头像上传,电脑软件,jQuery,先给大家展示下效果图: HTML代码<div class="img_show img_show1"> <img src="img2/img06.jpg" width="103" height="103" alt=""> <input type="file" class="upfile" accept="*/*"></div>jQue…

http200、301、304等状态码详解

http200、301、304等状态码详解

状态码,详解,电脑软件,当浏览者访问一个网页时,浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前,此网页所在的服务器会返回一个包含HTTP状态码的信息头(server header)用以响应浏览器的请求HTTP状态码的英文为HTTP Status…

React中jquery引用的实现方法

React中jquery引用的实现方法

方法,引用,电脑软件,React,jquery,在React中引用Jquery比较好玩,获取元素的数据更多1.引入方法举例:import $ from 'jquery';import { Button } from 'antd';class testJquery extends React.Component {  constructor(props) {   …

如何将应用所有的PPT页面

如何将应用所有的PPT页面

页面,如何将,图片,电脑软件,PPT,  快速将图片应用到所有PPT页面,有两种方法可以解决这个问题。第一种用母板。第二种用PPT背景功能。以下是小编为您带来的关于将图片应用所有的PPT页面,希望对您有所帮助。将图片应用所有的PPT页面方法1:母板…

PPT如何排版才能突出中心主题PPT排

PPT如何排版才能突出中心主题PPT排

方法,主题,中心,技巧,电脑软件,  好的ppt会让人一眼就抓住重点,不会让观众在不重要的内容上浪费太多的时间而忽视演讲者的演讲。也行你已经知道如何吸引观众的眼球,但是你是否了解如何快速抓住观众的心呢?以下小编整理的PPT突出中心的排版…

Webpack实现按需打包Lodash的几种

Webpack实现按需打包Lodash的几种

详解,按需,几种方法,电脑软件,Webpack,前言在数据操作时,Lodash 就是我的弹药库,不管遇到多复杂的数据结构都能用一些函数轻松拆解。ES6 中也新增了诸多新的对象函数,一些简单的项目中 ES6 就足够使用了,但还是会有例外的情况引用了少数的 Loda…

清空元素html |  innerHTML= 与 em

清空元素html | innerHTML= 与 em

推荐,元素,清空,区别,电脑软件,一、清空元素的区别 1、错误做法一: $("#test").html("");//该做法会导致内存泄露 2、错误做法二: $("#test")[0].innerHTML=""; ;//该做法会导致内存泄露 3、正确做…

qq安全中心如何设置禁止登陆游戏qq

qq安全中心如何设置禁止登陆游戏qq

方法,安全中心,登录,设置,游戏,  如果我们不喜欢玩qq游戏,为了保护自己qq账号的安全,我们可以在qq安全中心中设置禁止登陆游戏。你知道qq安全中心如何设置禁止登陆游戏吗?下面就让小编告诉大家qq安全中心设置禁止登陆游戏 的方法。qq安全中…

ppt如何添加重叠动画效果图解

ppt如何添加重叠动画效果图解

动画效果,方法,重叠,叠加,电脑软件,  你知道在ppt里怎样设置叠加动画效果 吗?对于大多数人来说还是不太懂添加叠加动画的方法,下面就让小编告诉你ppt叠加动画效果的方法,欢迎大家来到学习。ppt添加叠加动画效果的方法一ppt添加叠加动画效果…

JavaScript利用闭包实现模块化

JavaScript利用闭包实现模块化

模块化,闭包,电脑软件,JavaScript,利用闭包的强大威力,但从表面上看,它们似乎与回调无关。下面一起来研究其中最强大的一个:模块。function foo() { var something = "cool"; var another = [1, 2, 3]; function doSomething() { console.lo…