VUE学习笔记
安装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 搭建的一个后台管理界面
- 0
- 0
-
分享