Vue学习-知识点总结

（一）基础知识

1、简单使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
      <!--第一步：导入vue-->
    <script src="js/vue-2.6.10.js"></script>
</head>
  <body>
     <!--第二步：对象绑定-->
     <div id="app">
     	<span>{
   
   {name}}</span>
     	<button v-on:click="fun">按钮</button>
     </div>
  </body>
  <script>
//	第三步对对象进行vue操作
	var r=new Vue({
		el:'#app',  //通过id选择器选择到对象
		data:{ //数据区域
			name:'admin',
		},
		methods:{ //方法定义区域
			fun:function(){
				alert("666")
			}
		}
	});

  </script>
  </html>

2、实例选项

选择对象：

el：用于指定 Vue 实例挂载的元素,一般使用css选择符，或者原生的DOM元素

template:用来指定 Vue 实例的模板,

el与template的区别：el要挂载的对象，需要先在html定义，template挂载不用，可以直接在值中定义，避免在 HTML 页面中暴露模板代码

数据

vue中的数据存放在data中，

data:{ //数据区域
    id : 1,
    index : 0,
    name : 'Vue',
    avatar : 'http://……'
    count : [1, 2, 3, 4, 5]
    names : ['Vue1.0', 'Vue2.0'],
    items : [
        { name : 'Vue1.0', version : '1.0' },
        { name : 'Vue1.1', version : '1.0' }
    ]
}

绑定对象的有：

文本插值：Hello { {* name }} // -> Hello Vue

html属性：<div id="id-{ {id}}"></div> //<div id="id-1"></div>

绑定表达式：{ { index == 0 ? 'a' : 'b'}} // a ，注意：只能包含单个表达式

过滤器：{ { name | uppercase }} // VUE

表单

class

style

方法：

方法都存放在methods中，通过v-on来监听DOM事件

methods:{ //方法定义区域
    fun:function(){
        alert("666")
    }
}

如果方法需方访问数据中的变量。需用用this，例如this.数据变量名

生命周期

beforeCreate: 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前调用。
created: 在实例创建完成后立即调用，这个时候实例已经完成了数据观测、属性和方法的运算，模板编译也完成了，但是还未渲染到页面中。
beforeMount: 在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted: el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子函数。此时组件已经被渲染到页面上。
beforeUpdate: 数据更新时执行的钩子函数，发生在虚拟 DOM 重新渲染和打补丁之前。
updated: 由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后会调用该钩子函数。
beforeDestroy: 在实例销毁之前调用，此时实例仍然完全可用。
destroyed: 在实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有事件监听器会被移除，所有子实例也会被销毁。

4、事件绑定与监听

监听：v-on：事件名称

监听的修饰符：

stop: 等同于调用event. stopPropagation()。

prevent: 等同于调用event.preventDefault()。

capture: 使用capture模式添加事件监听器。 .

self: 只当事件是从监听元素本身触发时才触发回调。

（二）指令

1、内置指令

v-if：根据表达式的值，动态地添加或删除元素；

v-show：根据表达式的值，控制元素的显示或隐藏；

v-for：遍历数组、对象或者数字，渲染元素列表；

v-on：绑定事件监听器，用于处理用户交互事件；

v-bind：动态绑定HTML特性或组件的props；

v-model：实现表单元素和Vue实例数据的双向绑定；

v-text：将元素的textContent设置为表达式的值；

v-html：将元素的innerHTML设置为表达式的值；

v-cloak：搭配CSS规则，防止未完成编译的模板闪烁显示。

2、自定义指令

全局指令：通过Vue.directive()方法定义全局指令，可以在应用的任何地方使用

Vue.directive('my-directive', {
  bind: function (el, binding, vnode) {
    // 指令绑定时的逻辑
  },
  update: function (el, binding, vnode) {
    // 指令更新时的逻辑
  },
  unbind: function (el, binding, vnode) {
    // 指令解绑时的逻辑
  }
})

局部指令：在组件的选项中定义指令

export default {
  directives: {
    'my-directive': {
       bind: function (el, binding, vnode) {
          // 指令绑定时的逻辑
       },
       update: function (el, binding, vnode) {
          // 指令更新时的逻辑
       },
       unbind: function (el, binding, vnode) {
          // 指令解绑时的逻辑
       }
    }
  },
  // 组件的其他选项
}

自定义指令的选项包含了以下属性：

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行初始设置。
inserted：被绑定元素插入到父节点中时调用，只调用一次。
update：指令所在的组件更新时调用，可能会被多次调用。
componentUpdated：指令所在的组件和其子组件全部更新完成时调用。可能会被多次调用。
unbind：指令和元素解绑时调用。可以在这里移除绑定的事件监听器和其他资源。

（三）过滤器

1、常用过滤器

currency：格式化货币，将数字格式化为货币格式，例如$123.45。

date：格式化日期，将日期格式化为指定格式，例如YYYY-MM-DD。

uppercase：将文本格式化为大写字母。

lowercase：将文本格式化为小写字母。

capitalize：将文本格式化为首字母大写。

pluralize：将文本格式化为复数形式。