文档章节

Vue.js、vue安装步骤、单文件组件、模板指令

娇娇jojojo
 娇娇jojojo
发布于 2017/09/05 14:54
字数 1128
阅读 226
收藏 8
点赞 1
评论 1

作者:汪娇娇

时间:2017年8月30日

1、npm淘宝镜像

直接用npm安装vue-cli会特别慢,在安装vue-cli之前可以先安装一个淘宝镜像。之后的安装命令还是和npm一样,只不过把npm改成cnpm,但速度已经不是一个等级的了,嗖嗖嗖嗖~~~

npm install -g cnpm --registry=https://registry.npm.taobao.org

2、安装vue项目步骤

轻轻松松下面几步,就可以创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目啦。

# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目(项目名称:vue-webpack)
$ vue init webpack vue-webpack
# 安装依赖,走你
$ cd my-project
$ cnpm install
# 运行项目
$ cnpm run dev

生成好的目录结构如下:

3、vue组件

下图是一个单文件组件:

一个vue单文件组件的本质其实也就是html、css、js合成的一个文件,只不过必须用vue规定的格式来写,也就是在下图的template、script、style里面写相应的html、js和css:

那vue组件是怎么映射到页面的,看下图就明白了(借助webpack解析):

 

4、vue重要选项

下面介绍一下vue组件的重要选项(属性):

(1)data:vue对象的数据

new Vue({
    data: {
        a: 1
    }
})

<p> {{ a }} </p>

(2)methods:vue对象的方法

new Vue({
    data: {
        a: 1
    },
    methods: {
        doSomething: function() {
            console.log(this.a);
        }
    }
})

(3)watch:设置了对象监听的方法

监听你想监听的任何数据,下图监听数据 “a” 的变化,可以打印出变化之前的值和现在的值。

new Vue({
    data: {
        a: 1
    },
    methods: {
        doSomething: function() {
            console.log(this.a);
        }
    },
    watch: {
        'a': function(val, oldVal) {
            console.log(val.oldVal);
        },
        //深度watch(适用于监听的数据结构比较复杂,例如 c = { list: "apple", isFinished: true} ,那监听c的变化就建议选择深度watch,而且必须当deep为true时生效,false时不生效(例如,将isFinished改为false,结果还是true))
        c: {
           handler: function (val, oldVal) { /* ... */ },
           deep: true
        }
    }
})

 

5、模板指令

Vue对象里的设置通过html指令进行关联(也就是双向数据绑定),重要指令包括:

(1)渲染数据:v-text、v-html、{{}}

<P> {{ a }} </p>
<P v-text="a"></p>
<P v-html="a"></p>

new Vue({
    data: {
        a: 1
    }
})

{{}}是v-text的一个简写。

v-textv-html的区别:v-text会将html标签escape成文本,而v-html不会。

(2)控制显隐:v-if、v-show

<p v-if="isShow"></p>    //直接不渲染
<p v-show="isShow"></p>  //渲染这个dom元素,通过css的display属性来控制

new Vue({
    data: {
        isShow: true
    }
})

(3)循环渲染:v-for

<ul>
    <li v-for='item in items'>
        <p v-text='item.label'></p>
    </li>
</ul>

data: {
    items: [
        {
            label: 'apple'
        },
        {
            label: 'banana'
        }
    ]
}


(4)绑定事件:v-on

<button v-on:click="doThis"></button>
<button @click="doThis"></button>   //简写@

methods: {
    doThis: function someThing) {
        
    }
}

(5)绑定属性:v-bind

<img v-bind:src="imageSrc">   //字符串

<div :class="{ red: isRed }"></div>  //布尔值
<div :class="[classA, classB]"></div>   //字符串
<div :class="[classA, { classB: isB, classC: isC }]"></div>

 

6、如何划分组件

简单的页面还好,一旦涉及功能性复杂的大型网站,那就需要好好规划规划组件的划分了,那组件到底要怎么划分呢,还是需要按照什么原则去划分?

虽然没有强烈的规则去要求,但还是有原则可依的。我觉得组件大致可以划分为2类,也就是功能模块页面区域,大家可以根据自己的情况去划分,下面的划分仅供大家参考:

  • 功能模块:select、pagenation...
  • 页面区域:header,footer,sidebar...

(1)components

那么问题来了,划分组件之后,这些组件之间如何相互调用呢?

components君正式登场!!!

App.vue是组件入口,footer.vue和header.vue是组件。

(2)props

相互调用的问题解决了,接下来说说组件之间的通信 - props

下面是父组件向子组件传递信息msg,只有用props注册了msg之后,子组件里才可以获取到msg的值,否则,无论传什么值,子组件都是没法取到的。

那子组件传信息给父组件呢?

那么子组件就可以直接使用$on或者$emit触发事件来传信息给父组件,下图是$emit的实例。

//父组件App.vue(自定义child-tell-me事件,触发listenToMyBoy方法)
<header-a v-on:child-tell-me='listenToMyBoy'></header-a>

methods: {
	listenToMyBoy: function(msg){
		this.childWords = msg;
	}
}
//子组件(点击按钮将msg发送给父组件)
<button @click="onClickMe">Click!</button>

export default {
	data () {
		return {
			msg: "Hello Vue"
		}
	},
	methods: {
		onClickMe: function(){
			this.$emit("child-tell-me",this.msg);
		}
	}
}

 

© 著作权归作者所有

共有 人打赏支持
娇娇jojojo
粉丝 166
博文 57
码字总数 59148
作品 0
海淀
加载中

评论(1)

DoubleKang
DoubleKang
666
webpack+vue+vueRouter模块化构建完整项目实例超详细步骤(附截图、代码、入门篇)

开始(确认已经安装node环境和npm包管理工具) 1、新建项目文件名为vuedemo 2、 初始化项目 >安装项目依赖 3、 默认安装最新版vue 4、 安装webpack,webpack-dev-server(是一个小型的Node....

元谷 ⋅ 05/01 ⋅ 0

Vue.js入门之工程目录介绍

Vue 是一套用于构建用户界面的渐进式框架,与其它大型的页面框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另...

异步社区 ⋅ 05/22 ⋅ 0

Vue学习笔记之vue-cli项目搭建及解析

(一)安装node.js 首先需要安装node环境,可以直接到中文官网http://nodejs.cn/下载安装包。 只是这样安装的 node 是固定版本的,如果需要多版本的 node,可以使用 nvm 安装http://blog.csd...

逆袭的小菜鸟 ⋅ 2017/12/28 ⋅ 0

Vue + ElementUI 后台管理系统项目心得(二)

此篇是关于 Vue 的总结。Js 的总结请见前一篇:Vue + ElementUI 后台管理系统项目心得(一) 话说过完年回来,仿佛一夜之间身边的人都在谈论 Vue,相关的组件也如雨后春笋一般涌现出来,比如...

OSIMLY ⋅ 2017/03/27 ⋅ 0

使用webpack提升vue应用的4种方式

webpack是开发Vue单页应用必不可少的工具,它能管理复杂的构建步骤,并且优化你的应用大小和性能, 使你的开发工作流更加简单。 在这篇文章中,我将解释使用webpack提升你的Vue应用的4种方式,...

一个敲代码的前端妹子 ⋅ 05/16 ⋅ 0

太原面经分享:如何在vue面试环节,展示你晋级阿里P6+的技术功底?

前言 一年一度紧张刺激的高考开始了,与此同时,我也没闲着,奔走在各大公司的前端面试环节,不断积累着经验,一路升级打怪。 最近两年,太原作为一个准二线城市,各大互联网公司的技术栈也在...

闰土大叔 ⋅ 06/08 ⋅ 0

Vue 入门之项目目录结构介绍

Vue 是一套用于构建用户界面的渐进式框架,与其它大型的页面框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另...

code_xzh ⋅ 05/20 ⋅ 0

Vue2.0之vue-router

一、前言 要学习vue-router就要先知道这里的路由是什么?为什么我们不能像原来一样直接用标签编写链接哪?vue-router如何使用?常见路由操作有哪些?等等这些问题,就是本篇要探讨的主要问题...

浪里行舟 ⋅ 05/21 ⋅ 0

手把手 教你一步步--搭建vue脚手架,配置webpack文件

序言 本人之前都是利用大牛们提供配置好的项目,然后在本地配置npm install,最后运行npm run dev,在这些项目基础上去开发新项目;就算不利用大牛的配置项目,都是全局安装了vue脚手架,webpa...

lilyping ⋅ 06/07 ⋅ 0

关于vue-router那些事

一、前言 要学习vue-router就要先知道这里的路由是什么?为什么我们不能像原来一样直接用标签编写链接哪?vue-router如何使用?常见路由操作有哪些?等等这些问题,就是本篇要探讨的主要问题...

howgod ⋅ 05/21 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

apollo配置中心的学习笔记

公司现在配置文件太多了,导致配置文件修改起来还是非常麻烦的。在boss(业务运营支撑系统)中,配置文件是存放在jar包的,通过应用jar包来引用配置文件(区分不同环境)。这种方式虽然能够满足...

miaojiangmin ⋅ 1分钟前 ⋅ 0

Jena增删改查AP

插入、更新数据 public static void insert(){ String query = "PREFIX book: <http://www.book.com/jinyong/> \n" + " INSERT DATA \n" + ......

Vincent-Duan ⋅ 2分钟前 ⋅ 0

springMVC之与json数据交互方法

因为我也要返回json数据。所以需要这个注解@ResponseBody,把Java对象转换成json字符串 注意: 1、@RequestBody不能省,因为前台发过来的数据是json数据,得用这个注解去解析该怎么接收这些数...

颖伙虫 ⋅ 5分钟前 ⋅ 0

用实例域代替序号(31)

1、许多枚举天生就与一个单独的int 值相关联 ordinal 方法,返回枚举常量在类型中的数字位置 下述,枚举修改很不方便,不好维护 永远不要根据枚举的序数导出与他相关联的值 而是将他保存在一...

职业搬砖20年 ⋅ 7分钟前 ⋅ 0

并发编程---ConcurrentHashMap源码解析

ConcurrentHashMap是java中为了解决HashMap不能支持高并发而设计的新的实现。 ConcurrentHashMap的类结构 public class ConcurrentHashMap<K,V> extends AbstractMap<K,V> implements C......

千古一梦888 ⋅ 10分钟前 ⋅ 0

微服务 WildFly Swarm 简介

我们将看到的最后一个Java微服务框架是一个相对较新的场景,它利用了 JBoss WildFly 应用服务器中已试过且受信任的 JavaEE 功能。WildFly Swarm 是 WildFly 应用服务器的一个完整的拆下来的组...

woshixin ⋅ 15分钟前 ⋅ 0

android apk 瘦身

头条APK瘦身之路 随着版本迭代,功能增加安装包体积也会慢慢增大。 今日头条576版本APK达到了25M,通过一系列的优化,到目前的607版本为12M。本文主要是介绍头条APK瘦身中用到的一些方法。 ...

GoldenVein ⋅ 19分钟前 ⋅ 1

mac机器学习开发环境部署及helloworld

一、下载并安装Anaconda2.7 https://repo.anaconda.com/archive/Anaconda2-5.2.0-MacOSX-x86_64.pkg 路径:/Users/shijun/anaconda2 二、运行Anaconda Navigator -> Environments -> base(ro......

八戒八戒八戒 ⋅ 30分钟前 ⋅ 0

关于日常开发的经验总结(Java),持续更新中

常量尽量使用枚举来表示,这样表现力会很强,因为枚举比一个常量类要有更多的扩展性 方法的入参和出参尽量不要使用Map,因为Map会让调用者感到迷惑,他不知道你里面装的什么,面向对象的开发...

小99 ⋅ 30分钟前 ⋅ 0

IDEA创建SpringMVC+Mybatis+Maven项目

视频如下(加载有点慢请见谅,服务器不太好): 视频

影狼 ⋅ 31分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部