在webpack-simple模板中,包括webpck模板。一个.vue文件就是一个组件。

为什么会这样呢?因为webpack干活了!webpack的将我们所有的资源文件进行打包。同时webpack还能将我们的html(template)、css、js文件通过模板编译的方式将这些文件打包成一个.vue的文件。

为什么在vue-cli项目中能使用.vue的文件?

比如有这之前的一个自定义的组件:

    Vue.component('app-header', {
template: '<div>A custom component!</div>'
})

我们可以把template提取出来,例如:

<script type="text/x-template" id="head-template">
<div class="head">
<h1>{{ title }}</h1>
</div>
</script>
Vue.component('app-header', {
template: '#head-template',
data: {
title: '我是头部'
}
})

如果是这样的去写我们的组件的话,太复杂了,后期还不好去维护。可能大家现在还感觉不出来,如果写更多功能或者用到组件时会相互嵌套,那就更加的麻烦了。还好官方推出的vue-cli工具,基本不用任何的额外的代码,很快的就可以构建出一套完整的环境。

<template>
<div class="header">
<h1> {{ title }} </h1>
</div>
</template> <script>
export defualt {
data: function() {
return {
title: '我是頭部'
}
}
}
</script> <style>
.header {
color: red;
}
</style>

上面代码 有三部分,template标签中就是我们要写的组件结构,script标签中就是我们要写的业务逻辑,style标签中就是我们要写的该组件的样式。这三部分,我们通过vue-loader这个插件,将这三部分共同组合成了一个.vue文件。我们称这种.vue的文件就是一个组件。

另外上面的代码,我们发现有个export default语法,其实呢,这个东西,跟我们的python模块化有点类似。在es6 Module中,webpack这个工具通过babel-loader这个loader将我们的es6 Module语法进行解析,从而让我们的export default语法和import 'xxx'语法在浏览器中识别。

我们总结一句话:export default xxx 就是抛出一个模块(一个js文件就是一个模块), import 'xxx' from 'aaa'就是从刚刚抛出的文件路径中,导入此模块。有import就一定有export default.

接下来我们我编辑器中打开我们的项目目录,查看一下结构:

打开src文件夹,我们先从项目的入口文件main.js文件:

那么接下来我们就关心去书写App.vue组件中定义的内容就可以了。

大家一开始学习呢,先将App.vue文件中的内容全部删掉,跟着我一起书写里面的主要内容。

在该组件中,我们可以书写三部分,就是之前咱们学习的HTML、CSS、JS.

<template>
<!-- 该组件的模板结构(HTML) -->
</template>
<script>
// 该组件的DOM操作
</script>
<style>
/*该组件的样式属性*/ </style>

因为在main.js中有:

import App from './App.vue'

所以,我们必须在当前组件中写入export default,那么后面的书写就是用到了咱们之前的学习的语法。

在script

 export default {
name:'App',
data(){
return {
//必须是一个函数,要有返回值,返回空对象也是有返回值
}
}
}

在template中

<!--一定是闭合标签-->
<div class="app">
<h3>{{ msg }}</h3>
</div>

如果此时你的命令行工具还是保持开启的装备的,那么你会发现如下页面:

如果没有重启项目,请再次执行如下命令启动项目:

npm run dev

那么接下来我们就可以在App.vue组件中将我们之前学习到的知识运用进来。

比如我们的指令系统:

  1. v-if  条件渲染
  2. v-show  显示隐藏
  3. v-for  遍历多条数据
  4. v-bind   绑定属性
  5. v-model   表单控件的数据双向绑定
  6. v-on  绑定事件
  7. v-html  渲染html标签元素

我们还可以使用实例对象的方法:

  1. 计算属性的computed方法来监听属性
  2. methods方法中声明事件的方法
  3. .......

vue之cli脚手架项目中组件的使用的更多相关文章

  1. vue - vue-cli脚手架项目中组件的使用

    在webpack-simple模板中,包括webpck模板.一个.vue文件就是一个组件. 为什么会这样呢?因为webpack干活了!webpack的将我们所有的资源文件进行打包.同时webpack还 ...

  2. Vue学习笔记之vue-cli脚手架项目中组件的使用

    在webpack-simple模板中,包括webpck模板.一个.vue文件就是一个组件. 为什么会这样呢?因为webpack干活了!webpack的将我们所有的资源文件进行打包.同时webpack还 ...

  3. 18-vue-cli脚手架项目中组件的使用

    在webpack-simple模板中,包括webpck模板.一个.vue文件就是一个组件. 为什么会这样呢?因为webpack干活了!webpack的将我们所有的资源文件进行打包.同时webpack还 ...

  4. 在进行vue的学习,项目中需要引入bootstrap、jquery的步骤。

    在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...

  5. vue搭建cli脚手架环境(出现问题及解决,主要是node版本低)

    Vue 提供了一个官方的cli,为单页面应用 (SPA) 快速搭建繁杂的脚手架. 一.vue cli脚手架 脚手架通过webpack搭建开发环境 使用ES6语法 打包压缩js为一个文件 项目文件在环境 ...

  6. Vue笔记:在项目中使用 SCSS

    背景概述 1. CSS预处理器 css预处理器定义了一种新的编程语言,编译后成正常的CSS文件.为CSS增加一些编程的特性,无需考虑浏览器的兼容问题,让CSS更加简洁,适应性更强,可读性更佳,更易于代 ...

  7. 在基于vue的webpack脚手架开发中使用了代理转发,结果浏览器发出的请求中不带cookie导致登录时总是session失效怎么办?

    环境:            有2个业务接口需要转发到82的服务器上:     ../user/getCode.do     ../user/doLogin.do 现象:          使用上述的 ...

  8. Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验

    vee-validate 是为 Vue.js 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息.它内置了很多常见的校验规则,可以组合使用多种校验规则,大部分场景只需要配置就能实现开 ...

  9. vue+webpack多个项目共用组件动态打包单个项目

    原文复制:https://www.jianshu.com/p/fa19a07b1496 修改了一些东西,因为sh脚本不能再window电脑执行,所以改成了node脚本.这是基于vue-cli2.0配置 ...

随机推荐

  1. MathType如何编辑大三角形符号

    MathType中包含的符号超过1000多个,可以满足我们很多学科的使用,尤其是数学中,涉及到很多的符号,常见的就是代数.几何这两大类,当然还有集合之类的符号使用也比较多.我们在用MathType编辑 ...

  2. mysql如何优化插入记录速度

    插入记录时,影响插入速度的主要是索引.唯一性校验.一次插入记录条数等.根据这些情况,可以分别进行优化,本节将介绍优化插入记录速度的几种方法. 一.对于MyISAM引擎表常见的优化方法如下:     1 ...

  3. Chrome扩展应用

    现在越来越多的用户将chrome浏览器设置为自己默认的浏览器,不仅是因为他的界面美,最重要的是他对html5和CSS3完美的支持,且调试工具非常好用,还有丰富的扩展库.如何安装自己的扩展呢? 点击自定 ...

  4. flume使用之exec source收集各端数据汇总到另外一台服务器

    转载:http://blog.csdn.net/liuxiao723846/article/details/78133375 一.场景一描述: 线上api接口服务通过log4j往本地磁盘上打印日志,在 ...

  5. python monkey 猴子补丁技术编程,修改python json dumps方法。

    1.猴子补丁就是不改变原有模块的内容的前提下,给原有模块新增方法或者修改原有模块. 一个模块的函数,如果希望改变函数的功能,不改变函数名,通常是库模块,你不可能去修改三方库的源码的,实施起来不方便,而 ...

  6. CallByValue和CallByName区别

    /** * Created by root * Description :CallByValue:进入函数就得先计算实参的值:CallByName:函数体重使用到的时候才计算 */ object Ca ...

  7. SQL筛选出同一学科的时间最新的记录

    1.建表语句 CREATE TABLE `score` ( `id` ) NOT NULL AUTO_INCREMENT, `student_id` ) ' COMMENT '学生表ID', `nam ...

  8. 【Java并发编程三】闭锁

    1.什么是闭锁? 闭锁(latch)是一种Synchronizer(Synchronizer:是一个对象,它根据本身的状态调节线程的控制流.常见类型的Synchronizer包括信号量.关卡和闭锁). ...

  9. iOS - 直播总结(理论到实践)

    一.直播原理及流程 1.一个完整直播app原理 直播原理:把主播录制的视频,推送到服务器,在由服务器分发给观众观看. 直播环节:推流端(采集.美颜处理.编码.推流).服务端处理(转码.录制.截图.鉴黄 ...

  10. Kindeditor问题

    1.初始的时候,拿到切图,kindeditor不知道为什么就是显示不出来,只出来个文本框一样的东西 原因:样式未加载,这个是因为美工那边样式重调了,而且新项目并没有将整个插件拷贝过来,而只是拿了kin ...