Vue 学习记录（一）

目录

• 一、基本指令
• 二、属性
• 三、class和style绑定
• 四、条件渲染 和列表渲染
• 五、事件处理
• 六、组件

 

---

回到顶部

一、基本指令

　　1、v-text；2、v-html；3、v-pre;4、v-cloak；5、v-once；6、v-if；7、v-else；8、v-else-if；9、v-show；10、v-for；11、v-bind；12、v-model

回到顶部

二、属性

　　1、数据相关

　　data：Vue的实例数据对象；components：Vue局部组件注册使用的属性。

　　2、方法

　　computed;watch;filters;methods;render;

　　3、生命周期

　　Vue实例被创建之前 beforeCreate ；创建完成之后：created；

　　挂在模板：beforeMount;挂载完成：mounted；

　　实例销毁之前：beforeDestory; 销毁之后：destroyed；

　　数据绑定：操作data时，更新之前：beforUpdate；更新完成之后：updated

　　八个生命周期函数，阔以在这些生命周期函数中根据需求添加自己的代码。

回到顶部

三、class和style绑定

　　class绑定

　　对象的形式：v-bind:class="{active:isActive}"  对应的data    data:{isActive:true}

　　数组的形式：v-bind:class="[isActive]" 对应的data      data:{isActive:true}

　　style绑定 用法同上

回到顶部

四、条件渲染 和列表渲染

　　条件渲染 主要通过 v-if v-else-if v-else等指令实现 ，如果关联多个元素可以将指令放到template中，将需要的元素用template包裹。

　　列表渲染 主要通过v-for指令实现

回到顶部

五、事件处理

　　主要通过 v-on 实现

　　该指令之后的事件拥有多种修饰符实现不同的功能，例如：.stop; .prevent; .capture;等

回到顶部

六、组件

　　声明方式有种：

　　1、使用Vue.extend 创建组件

　　var com1 = Vue.extend({
   　　　　template : "<h3>使用vue.extend创建的组件</h3>"  
　　})
　　Vue.component('myCom1',com1)

　　2、直接使用 Vue.component 创建组件

　　Vue.component('com2',{

　　　　template : "<h3>这是直接Vue.component创建的组件</h3>"

　　})

　　3、使用模板创建组件

　　Vue.component("com3",{
  　　 template : '#temp1'
　　})

　　<template id="temp1">
    　　<div>
        　　<h1>好用，有代码提示快捷键</h1>
    　　</div>
　　</template>

　　个人觉得 第三种比较好用，因为有在编辑器内有只能提示

　　组件注册分为局部注册和全局注册

　　全局注册：

　　Vue.component('my-component-name', {
 　　　　// ... 选项 ...
　　})

　　局部注册：

　　new Vue({
　　　　  el: '#app',
  　　　　components: {
  　　　　　　  'component-a': ComponentA,
  　　　　　　  'component-b': ComponentB

　　} })