Vue知识记录

1、安装nodejs，创建vue项目

npm install vue-cli -g //安装脚手架 

npm install webpack -g //安装webpack

vue init wbpebpack (project name) //创建vue项目

cd (project name) 切换到项目目录

npm install 安装所需要的插件

npm run dev 使用webpack运行本地项目

npm run build 打包代码到dist目录

如果要使用nginx，路径需要配置D://workspac/projectname

ps: 详情查看学习笔记>linux>nginx文档

2、vue实例

var vm = new Vue({
    el: '#domId'//绑定的dom
    data: {
        id: 'idd',
        name: 'vue',
        age: 1,
        items:['a', 'b', 'c']
    }
});

语法和angularjs类似 使用双{}

<p>{name}</p> //当然这个p标签必须是属于#domId的子节点否则无效

3、语法

v-bind 绑定事件缩写:{type}

v-html 输出dom结构或者不会被渲染

v-model 双向绑定

v-if 判断 v-else v-else-if 满足条件才会去渲染

v-for 循环  <li v-for="item in items">{{ item }}</li>

v-on:{type}点击事件 缩写 @{type} 

v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display

var source = {a:1, b:2};

var target = {b:4, c:3, d:5};

Object.assign(source, target); //{a:1, b:4, c:3, d:5}

合并对象,存在相同的key值会被后者覆盖. 如果source为空对象就是复制

ps: Object.assign({},target); //{b:4, c:3, d:5}

4、双向绑定原理(defineProperty)

1.Writable 属性

当writable属性设置为false时,该属性被称为“不可写”,它不能被重新分配

var obj = {}
Object.defineProperty(obj,'name',{
    value: '张三',
    writable: false
})
console.log(obj.name) //张三
obj.name = '李四' 
console.log(obj.name) //张三 
'设置了不可写所以值不会变'

2.Enumerable 特性

enumerable定义了对象的属性是否可以在 for…in 循环和 Object.keys() 中被枚举

var o = {};
Object.defineProperty(o, "a", { value : 1, enumerable:true });
Object.defineProperty(o, "b", { value : 2, enumerable:false });
Object.defineProperty(o, "c", { value : 3 }); // enumerable defaults to false
o.d = 4; 
// 如果使用直接赋值的方式创建对象的属性,则这个属性的enumerable为true

for (var i in o) {    
  console.log(i);  
}
// 打印 'a' 和 'd' (in undefined order)

Object.keys(o); // ["a", "d"]

o.propertyIsEnumerable('a'); // true
o.propertyIsEnumerable('b'); // false
o.propertyIsEnumerable('c'); // false

3.Configurable 特性

configurable特性表示对象的属性是否可以被删除以及除writable特性外的其他特性是否可以被修改

var o = {};
Object.defineProperty(o, "a", {
    get : function(){
        return 1;
    }, 
    configurable : false 
});
console.log(o.a); //  1
delete o.a; // 无效因为configurable的值是false
console.log(o.a); //  1

4.属性默认值

var o = {};
o.a = 1;
//直接赋值默认属性都为true
// 等同于 :
Object.defineProperty(o, "a", {
  value : 1,
  writable : true,
  configurable : true,
  enumerable : true
});

// 另一方面,未写的属性默认为false
Object.defineProperty(o, "a", { value : 1 });
// 等同于 :
Object.defineProperty(o, "a", {
  value : 1,
  writable : false,
  configurable : false,
  enumerable : false
});