Vue2.0个人记录的学习笔记【待续】

一、Vue实例对象

我们构造一个实例对象

需要new一个Vue

var my = new Vue({

el：‘#app’ ,【 app是装载的位置】

template： ‘<div><other-component></div>’, 【提供一个模板】

data: { 【我们的组件所会用到的数据】

fruit: 'apple'

}

})

data主要存放一些数据，可以双向绑定到页面当中去显示出来。

my.fruit 可以取到apple字段

这只是说明，这个是vue.js一个最基本的单元，挂载点，模板，数据，三种常用的选项。

组件之间是如何引入的呢？

我们是用component引入组件。

二、vue.js的生命周期，

vue在不同的阶段，提供了不同的钩子，我们可以用不同的钩子，进行不同的操作

这些钩子还是比较关键的。

我们有时候在渲染完成后需要操作，可以利用钩子进行操作。

vue2.0相对于vue1.0取消了一些钩子了，比如ready是不见了的

三 vue.js 如何实现组件的注册和引入

全局注册的一个方法

Vue.component(‘my-header’,{

template: ' <p>this {{ aaa }} is my header</p>' 【这里模板一般不需要，都是写在页面里】

data:{

aaa:'你好啊!'

}

}）

<div>

<my-header></my-header> 【来自于全局注册的my-header】

</div>

实现的同样的效果，不同的方式。

也可以使用myheaderchild这样的形式，子组件本身，引入了一个myheadchild子组件。

看起来复杂，实际上，myhead ，myheadchild，搞明白了，不会特别的复杂。

这些都是一个文件的组件树的演示。

另外需要格外注意的一点是，我们的data，避免使用直接赋值，

坏处是因为假如我们的组件有两个组件，

我们通过事件，改变了一个组件的数据，

这个data会反映到了其他的部分。

这个不是我们想要的效果。

data:function(){
return{
f:1,

d:2
}
}

使用这种方法，就可以避免这个问题，我们改动一个组件的数据，

不会影响另外一个组件数据的方式。

四，看一看vue基本概念

包括了全局api，实例选项，实例属性/方法，指令，内置组件。

vue.js提供了哪些实例选项呢

主要分为几大种

1 数据相关的

2 dom操作相关的

我们看看实例本身的属性，方法

实例的属性，就有el，data，components，等等，

可以直接用root调用$data数据，或者是$on直接出发一个方法。

------------------------------------------

new Vue（｛

el: '#app',

render: function( h ) {
return r(app)

}

【相当于render: h => h(app)】

｝）

利用data里的数据，渲染到页面上

v-for 同时渲染多组数据

引入componentA组件

其中componentA，可以大小写，vue2.0里面这些都是可以的，也可以改名字。

运用组件之前必须也要去注册一下，

组件的渲染问题。

有一些常用的列表，数组对象方法，触发列表的更新

也有一些方法不会触发列表的更新

比如我们直接为其中某一项赋值，或者改变某一些数组的长度。

这里是更改某一些数组里的对象，

import Vue from 'Vue'

这里哪里使用了Vue的内容，哪里就要引入。

我们可以根据对象的值，来设置标签的属性，绑定到class上去

可以同时渲染classA，classB得内容到class属性内部去

hasError只有当true时，才显示出来后面的那个属性，

就是一个是写死的，一个是灵活赋值的。

如何在dom里面清楚掉元素，v-if 与 v-show区别，前者从文档流里被删除掉了

v-show才是会保留的。

总结一下刚才的内容

v-bind 动态绑定标签属性

v-bind可以简写为

使用v-bind绑定class和内联样式

使用v-if v-show v-else进行条件渲染

巴特西

Vue2.0个人记录的学习笔记【待续】

最新文章

热门文章