vue项目心得

1.初始化模板

vue init webpack vue-music

2.进到文件夹里vue-music

npm install

3.安装 stules

npm install stylus stylus-loader --save-dev

 

（

 

devDependencies和dependencies的区别

我们在使用npm install 安装模块或插件的时候，有两种命令把他们写入到 package.json 文件里面去，比如：

--save-dev

--save

在 package.json 文件里面提现出来的区别就是，使用 --save-dev 安装的 插件，被写入到 devDependencies 对象里面去，而使用 --save 安装的插件，则被写入到 dependencies 对象里面去。

那 package.json 文件里面的 devDependencies  和 dependencies 对象有什么区别呢？

devDependencies  里面的插件只用于开发环境，不用于生产环境，而 dependencies  是需要发布到生产环境的。

 

）

 

 

4.安装fastclick

npm install fastclick --save

5.安装babel-runtime

npm install babel-runtime --save

 

6.

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

7.stylus中 字符&指向父选择器。

两个选择器(textarea和input)在:hover伪类选择器上都改变了color值

 

textarea
input
  color #A7A7A7
  &:hover
    color #000

等同于

 

textarea,
input {
  color: #a7a7a7;
}
textarea:hover,
input:hover {
  color: #000;
}

8.比较方便取DOM，方便操作DOM   ref

9.箭头函数

（1）不引入参数

 

var sum = () => 1 + 2;
// 等同于：
var sum = function() {    
    return 1 + 2; 
};

2、引入单个参数：

var reflect = value => value;
// 等同于：
var reflect = function(value) {    
    return value;
};

x => x * x
//等同于：
function (x) { 
    

传一个参数直接写就好了，不用加小括号。

 

3、引入多个参数，则应加上小括号

var sum = (num1, num2) => num1 + num2;
// 等同于：
var sum = function(num1, num2) {    
    return num1 + num2;
 };

4、若你想使用标准的函数体，或者函数体内可能有更多的语句要执行，则要用大括号将函数体括起来，并明确定义返回值。

var sum = (num1, num2) => { return num1 + num2; }
//等同于：
var sum = function(num1, num2) {    
  return num1 + num2; 
};

大括号内的部分基本等同于传统函数

5、箭头函数若要返回自定义对象的话，就必须用小括号把该对象括起来先

var getTempItem = id = > ({
   id: id,
  name: "Temp"
});
// 等同于:
var getTempItem = function(id) {
  return {
    id: id, 
    name: "Temp"
     };
};

用小括号包含大括号则是对象的定义，而非函数主体

 

6.

<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。