前端~vue.js笔记（一）

1.设计模式：

 MVVM 模式：在实例对象中所写的数据就是M层，html模板标签视图层就是v层。当数据变化的时候视图层会改变，相互的改变是由vm层来控制的，也就是由vue框架来实现的。

MVP（JQ)是面向dom操作。MVVM 是对数据进行操作

2.基础知识

  1）什么是实例：

  2）实例中可以包括：

（注：从控制台中看到实例(vm)中其他的内容(实例方法)：vm.$data vm.$el）

  3）实例的生命周期函数（8个）

       生命周期函数就是vue实例在某一个时间点会自动执行的函数

  4）vue的模板语法

   差值表达式：{{}}     v-text:    前两个的作用是一样的  v-html：（三者的区别）

   eg:  {{name + 'Lee'}}      v-text = "name +'Lee'"   (可以写js的表达式或者变量)

   v-bind: "title"

当我们看到一个vue指令后边跟着一个值的时候，这个值不再是一个字符串，而是一个js的表达式

 3.计算属性，方法与侦听器

计算属性：缓存机制  当它依赖的数据不变的时候，页面在渲染的时候，就不会重新再次计算（复用上次的结果）

方法：每一次渲染页面，不管值是否改变，方法都会执行，重新计算。

watch(监听)也有缓存，但是比计算属性复杂

计算属性有缓存  ,但方法没有，故当三个方法都能实现时，优先选择计算属性（性能优化）

eg:实现由姓和名组合显示全名（三种方法）

2）计算属性的getter和setter

get:获取值      set：设置值     

一下是通过改变传入的设置值，使获取值发生改变

4. vue中的样式绑定

class的对象绑定

数组改变样式

style改变样式

对象绑定和数组绑定

5.vue中的条件渲染

v-if  v-show  ：是否显示

区别：v-if ：只要对应的变量值是false，它就不存在了（dom的删除和添加）

v-show：（性能会高）对应的变量值是false，它依然存在，只是display：none

v-if 和 v-else放在一起使用

v-if  v-else-if  v-else（多个条件的使用）

key值的作用：如果给一个标签加一个key值，vue会知道它是页面上唯一的一个元素，

如果key值不同，那么vue就不会尝试去复用之前的  (提高性能，尽量key值是唯一的)

6. vue中的列表渲染

改变数组中的内容:不能直接的通过下标的形式改变数组，只能通过几个数组的变异方法来改变

7个方法：pop  (删除)  push  shift  unshift  splice(截取) sort reserve

数组变化，页面也会跟着变化。

方法二：改变数组的引用地址

关于template：模板占位符，可以帮我们包裹一些元素，但是在循环的过程中不会被渲染

循环对象：

改变对象里边的值的方法：1）改变引用

                                         2）用set方法

vue 中的set的方法

1)改变对象里边的数据(全局)

Vue.set(vm.userInfo,"address","beijing")

vm.$set(vm.userInfo,"address","beijing")（实例的方法）

2)改变数组的数据

Vue.set(vm.userInfo,1,5)

vm.$set(vm.userInfo,1,5)

7.前端组件化  ：

   1)  什么是前端组件化：  简单说就是页面的逻辑拆分成小的区域实现 

   2）使用组件化的优点： 提高代码的可维护性

   3） 父子组件的传值

      父组件把内容传递给子组件：v-bind   简写：

      子组件给父组件传值（$emit)

  4）使用is属性解决模板标签上的bug 

在标签中使用组件，又不能直接使用，故可以通过is属性，使其满足html格式规范

5）在子组件中data必须是个函数，而不能是对象（根组件是对象）,并且返回对象

子组件会被多次调用，这样会是的每一个子组件都拥有独立的数据存储

6）在vue中如何操作DOM

通话ref获取dom节点，在元素标签上加一个ref

如果在组件上加了ref，会怎么样（获取到的是组件的引用）

简单计数器