VUE学习笔记

Posted by aclyyx on 03-16,2018

安装NodeJS,使用NPM

官方网站下载**macOS Binary (.tar.gz)**文件,解压缩后得到【node-v8.10.0-darwin-x64】

通过以下命令创建连接文件后,就可以开始使用npm命令了。

$ ln -s /Users/acl****ls/node-v8.10.0-darwin-x64/bin/node /usr/local/bin/node
$ ln -s /Users/acl****ls/node-v8.10.0-darwin-x64/bin/npm /usr/local/bin/npm

或将node的bin目录设置到MacOS的环境变量中,sudo vi ~/.bash_profile,文件中添加如下内容:

export PATH=$PATH:/Users/acl****ls/node-v8.10.0-darwin-x64/bin

安装cnpm淘宝国内镜像支持

登录NPM淘宝网站看说明,执行如下命令。

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

安装后,创建连接文件。(若设置环境变量请忽略)

$ ln -s /Users/acl****ls/node-v8.10.0-darwin-x64/bin/cnpm /usr/local/bin/cnpm

提速开始!

VUE工具安装

VUE命令行工具(CLI)

帮助快速初始化搭建vue单页应用,并支持启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。

// 全局安装 vue-cli
$ npm install -g vue-cli

vue-devtools

vue官方推荐在浏览器安装 vue-devtools ,一个审查和调试 Vue 工具。
Get the Chrome Extension
Get the Firefox Addon

快速开始第一个程序

工具到这里就安装的差不多了,现在终于可以开始写程序了。
首先,使用vue命令初始化一个vue例程。

创建工程目录

vue init webpack vue-first-project

过程中需要填写如下信息,vue-cli版本号:2.9.3。

? Project name vue-first-project
? Project description A first vue project
? Author aclyyx <aclyyx@126.com>
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "vue-first-project".

运行

npm run dev

Vue学习

Vue对象中常用选项

定义Vue对象时,三个重要的属性。

  • data:数据定义;
  • methods:方法定义;
  • watch:监听定义,监听数据变化,并定义function进行处理。

模板指令

  • 数据渲染
<p>{{ a }}</p>  
<p v-text="value"></p>  
<p v-html="value"></p>  
  • 显示控制
<p v-if="boolean_value"></p>
<p v-show="boolean_value"></p>
<ul>
	<li v-for='item in items'>
		<p v-text='item.lable'></p>
	</li>
</ul>
  • 事件绑定 v-on
<button v-on:click="doSomething"></button>
<button @:click="doSomething"></button>
  • 属性绑定 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>

“:(冒号)”存在的键值对中,“:(冒号)”后面的value表示boolean变量,以决定“:(冒号)”前面的key是否显示;
如果没有“:(冒号)”,则直接输出变量的值。

.vue文件

<template></template>
<script></script>
<style></style>

怪问题

2018-03-20 data节点只能用函数

今天发现一个怪(菜)问题,看VUE官方教程“data”节点都是如下写法:

var vm = new Vue({
  el: '#example',
  data: data
})

而使用vue init webpack test-project创建的工程中确实这种形式?

export default {
  name : 'App',
  data() {
    return {
      message: 'message',
      items: [
        { message: 'Foo' },
        { message: 'Bar' }
      ]
    }
  }
}

并且,我把代码修改成第一种形式会报错。百度之后,在这里得到了答案,虽然也是似懂非懂的。

使用组件功能,data必须定义为函数,而不能使用对象定义的方式;其原因是,在使用自定义组件时,使用对象会导致冲突,数据不安全;而通过函数的返回值每次返回都可以是一个全新的对象,当然也可以作弊,这样似乎对Ajax请求数据还带来了方便?


待续... ...

待学习知识

  • es6 ?
  • element
  • axios
  • mock

参考

VUE v2 API
VUE中文网官方教程
Linux下Nodejs安装(完整详细)
vue.js入门基础【慕课网视频】
Mac 设置环境变量
vuejs 和 element 搭建的一个后台管理界面