vue概念性知识的理解

发表于 2017-01-14 | 分类于 vue学习篇 | | 阅读次数

vue的理解

最近忙于写基于element框架的项目，对于vue也是直接上手，使用过程中跌跌撞撞，但是总归有收获。
记录下自己学习心得。坚持写博客~加油，时间长不更新博客，都怕自己不会了~~

认识vue

是渐进式的框架，只关注view视图，vue是数据驱动，所以不要操作DOM

vue除了包含主要的vue.js之外，还有生态库如vue-router、vue-resource等。一些相关库可以在官网找到

vue的两个核心

响应的数据绑定

当数据发生改变->视图会自动更新

利用Object.definedProperty中setter/getter代理数据，监控数据的操作

组合的视图组件

ui页面映射为组件数

划分组件可维护、可重用、可测试

阅读全文 »

vue-router带你出坑

发表于 2016-12-16 | 分类于 vue学习篇 | | 阅读次数

vue-router 带你出坑

最近学习vue，关于vue-router看了3遍，才开始有了一些自己的理解，而且，对于初学者，我认为
vue-router的官方手册顺序并不适用，所以把自己认为重点的和难以理解的，还有学习顺序进行调整，希望对其他
初学者有所帮助，嗯，共同进步~

配置路由模式

const router = new VueRouter({//创建路由实例
  mode: 'history',
  routes
})

配置路由模式:

hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。
history: 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式.
abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。

阅读全文 »

element框架的搭建

发表于 2016-12-13 | 分类于 vue学习篇 | | 阅读次数

element框架搭建

从朋友那里听说了element，就想着写个小demo，顺道学习vue，但是木有想到搭建框架就遇到了一堆问题
，不过还好，看了官网大家提问的问题，找到了解决办法。

安装

推荐使用 npm 的方式安装，它能更好地和webpack打包工具配合使用。

1	npm i element-ui -D

项目结构

|- src/  --------------------- 项目源代码
    |- App.vue
    |- main.js  -------------- 入口文件
|- .babelrc  ----------------- babel 配置文件
|- index.html  --------------- HTML 模板
|- package.json  ------------- npm 配置文件
|- README.md  ---------------- 项目帮助文档
|- webpack.config.js  -------- webpack 配置文件

package.json

注意对package.json中的scripts的理解

一个由脚本命令组成的hash对象，他们在包不同的生命周期中被执行。key是生命周期事件，value是要运行的命令。
我们可以使用

1	npm run dev #webpack 的--inline --hot 起作用的原因就是配置了scrips

阅读全文 »

说说javascript的this、call和apply

发表于 2016-12-08 | 分类于 javascript核心 | | 阅读次数

JavaScript核心-函数this、call和apply

函数this的用法

his是Javascript语言的一个关键字。

它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。比如

1
2
3

function test(){
　　this.x = 1;
}

随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。

纯粹的函数调用

这是函数的最通常用法，属于全局性调用，因此this就代表全局对象Global

function test(){
　　this.x = 1;
　　alert(this.x);
}
test(); // 1 此时的this是window

var x = 1;
function test(){
　　alert(this.x);
}
test(); // 1

阅读全文 »

这样讲闭包，你终生难忘

发表于 2016-12-08 | 分类于 javascript核心 | | 阅读次数

JavaScript核心-闭包

闭包（Closure）

关于闭包，真的是看了忘忘了看，相信这次应该理解了~

变量的作用域

ES5中规定的JavaScript的变量作用域有两种：全部变量和局部变量（ES6中引入块级作用域）

javascript有两种特殊的属性

函数内部可以直接读取全局变量

var n=999;
function f1(){
　　alert(n);
}
f1(); // 999

函数外部不能够读取局部变量

function f1(){
　　var n=999;
}
alert(n); // error

注意函数内部定义变量使用var，否则你定义的就是一个全局变量

function f1(){
　　n=999;
}
f1();
alert(n); // 999

阅读全文 »

stylus常用语法总结

发表于 2016-12-07 | 分类于 stylus学习篇 | | 阅读次数

stylus常用语法总结

stylus安装与使用

全局安装

1	$ npm install stylus -g

.styl文件的编译

1 2	$ stylus -h #获得相关的命令行支持 $ stylus -w test.styl -o src #-w 是自动监视文件 -o 是将编译后的CSS文件输出到指定文件中

stylus常用语法

选择器（selector）

selector需要掌握要点

缩排 : 用缩进代替{},并且省略：当然用：分割属性和值也没有问题
逗号等于换行 : 逗号表达并列，stylus中新起一行表示并列意思
父级引用 : & 表示父级
消除歧义：混入写法

阅读全文 »

ES6常用语法学习

发表于 2016-12-02 | 分类于 ES6学习篇 | | 阅读次数

ES6常用语法学习总结

每学一个知识点，都应该把重点总结出来，按照提纲对知识点，看看那个点还有问题
进行二次学习。最近在看ES6，每看一部分总结一点，回头再看哪里没有掌握。分享给大家~

let和const命令

let命令

不存在变量提升

console.log(ss); //undefined
console.log(xx); //报错
var ss = 'a';
let xx = 'b';

var存在变量提提升，实际执行

var ss;
console.log(ss); //undefined
console.log(xx); //报错
ss = 'a';
let xx = 'b';

暂时性死区

ES6明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。
凡是在声明之前就使用这些变量，就会报错。

不允许重复声明

let不允许在相同作用域内，重复声明同一个变量。无论是使用var 或者 let

块级作用域与函数声明

ES6引入了块级作用域，明确允许在块级作用域之中声明函数。
并且ES6规定，块级作用域之中，函数声明语句的行为类似于let，在块级作用域之外不可引用。

阅读全文 »

vue+webpack组件开发

发表于 2016-11-24 | 分类于 vue学习篇 | | 阅读次数

建立Vue组件

创建组件

项目目录结构

在src目录下建立components文件夹，并在其中建立app.vue文件

# 项目名称 vue-components-demo
vue-components-demo
└─webpack.config.js //配置文件
└─package.json
└─src               //文件入口
  └─components      //组件存放文件夹
    └─app.vue       //vue组件
  └─main.js         //主js文件
  └─index.html      //主html文件
└─node_modules      //项目的依赖所在的文件
└─dist              //webpack打包后生成的文件夹
  └─bundle.js

package.json

{
  "name": "vue-conponents-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.8",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-stage-0": "^6.16.0",
    "babel-runtime": "^6.18.0",
    "css-loader": "^0.26.0",
    "file-loader": "^0.9.0",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "vue": "^2.0.1",
    "vue-hot-reload-api": "^2.0.6",
    "vue-html-loader": "^1.2.3",
    "vue-loader": "^9.7.0",
    "vue-style-loader": "^1.0.0",
    "vue-template-compiler": "^2.0.8",
    "webpack": "^1.13.3",
    "webpack-merge": "^0.17.0"
  }

注意

配置文件中需要添加对.vue文件处理的语句，因为忘记添加所以后期找错误找了很久

阅读全文 »

vue学习笔记

发表于 2016-11-22 | 分类于 vue学习篇 | | 阅读次数

项目创建结构

项目目录

# 项目名称 vue-simple-demo
# 目录如下
vue-simple-demo
└─webpack.config.js
└─package.json
└─src
  └─main.js
  └─index.html
└─node_modules
└─dist
  └─bundle.js

项目文件

项目目录下新建package.json

1 2	$ cd #当前目录 $ npm init #创建package.json

src目录下新建index.html

# 用于最终显示效果的html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Demo</title>
</head>
<body>
<div id="div1">{{message}}</div>
<script src='../dist/bundle.js'></script>
</body>
</html>
</html>

阅读全文 »

webpack学习笔记

发表于 2016-11-18 | 分类于 webpack学习篇 | | 阅读次数

webpack学习笔记

webpack介绍

一个打包工具
一个模块加载工具
各种资源都可以当成模块来处理
官方网站

webpack安装

全局安装

1	$ npm install webpack -g #全局安装webpack

项目中安装

1
2
3

$ cd <项目目录> # 进入项目目录
$ npm init  # 会自动生成一个package.json文件[描述项目依赖]
$ npm install webpack --save-dev #将webpack增加到package.json文件中

解析package.json

# package.json
{
  "name": "muma-game",
  "version": "1.0.0",
  "description": "Muma game",
  "main": "game.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^1.13.3"
  }
}

webpack配置

每个项目下都必须配置有一个webpack.config.js，就是一个配置项，告诉 webpack 它需要做什么。

# webpack.config.js
var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
module.exports = {
    //插件项
    plugins: [commonsPlugin],
    //页面入口文件配置
    entry: {
        index : './src/js/page/index.js'
    },
    //入口文件输出配置
    output: {
        path: 'dist/js/page',
        filename: '[name].js'
    },
    module: {
        //加载器配置 需要使用npm来加载
        loaders: [
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            { test: /\.js$/, loader: 'jsx-loader?harmony' },
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
    },
    //其它解决方案配置
    resolve: {
        root: 'E:/github/flux-example/src', //绝对路径
        extensions: ['', '.js', '.json', '.scss'],
        alias: {
            AppStore : 'js/stores/AppStores.js',
            ActionType : 'js/actions/ActionType.js',
            AppAction : 'js/actions/AppAction.js'
        }
    }
};

阅读全文 »