[JavaScript知识库]VUE开发基础----上

VUE开发基础----上

概述内容：

1.vue对象上的实例属性

2.数据绑定的一些方法（把重点提出来说明）

3.事件

4.组件

5.生命周期

实例属性：

• el
• data
• methods
• computed
• watch
• filter

el ,data:

创建实例：

var vm = new Vue({
    el: '#app',  //绑定div页面id
    data:{
    	name:
	},
    methods：{
    }                         
})

js访问实例data中属性

//方法1
vm.$data.name
//方法2
vm.name

computed:

? 在页面数据变化时，实时更新某个值

watch：

? 监听某个数值发生变化，常与v-bind绑定数值监测

filter过滤器:一组过滤数据的函数

{{data | filter}}

数据绑定：

v-bind 和v- model的区别：v-bind 是单向绑定，只能是数据变量影响到页面。v-model 页面对应数据的修改会影响其绑定的数据对象的值。

v-if 和 v-show 的区别：v-if会真实地进行增加删除，v-show只是更改显示属性display。

v-for中的key: 有id用id，无id用索引。key属性vue内部隐藏。在头插法时可能会出现问题，根据新旧虚拟dom的对比算法，index会重新赋值，如果index作为key的数据项未被修改，而此时index已经更改，则渲染内容可能不对应。

• v-model
• v-bind
• v-on 客户页面的事件监听，常搭配事件函数
• v-if
• v-for 渲染列表，重复显示该块页面，v-for="(item,key) in list"
• v-show
• v-html
• v-text

事件监听

• v-on监听触发事件

  eg. v-on:click    v-on:keyup.enter="method"
  

• 事件修饰符

  .stop

  .prevent

  .capture

  .self

  .once

  eg. v-on:click.stop=
  

Vue组件

定义局部组件（子组件）：

在组件内部新增components属性 ，{子组件名，子组件}。

1.父–>子传参，子组件定义props[]，传递的参数在父组件中定义

2.子–>父传参, $emit传值。this.$emit(‘A’,B); A是父组件中v-on监听绑定的变量，B是子组件的变量

生命周期

以下称为钩子函数

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• update
• beforeDestory
• destroy

以上函数执行时间顾名思义，需要注意的是，实例对象的创建在beforecreate执行之后，在挂载之后才能获取页面显示对象的数据。