前端~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:实现由姓和名组合显示全名(三种方法)

前端~vue.js笔记(一)_第1张图片

2)计算属性的getter和setter

get:获取值      set:设置值     

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

前端~vue.js笔记(一)_第2张图片

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格式规范

前端~vue.js笔记(一)_第3张图片

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

前端~vue.js笔记(一)_第4张图片

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

6)在vue中如何操作DOM

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


前端~vue.js笔记(一)_第5张图片

如果在组件上加了ref,会怎么样(获取到的是组件的引用)


前端~vue.js笔记(一)_第6张图片
简单计数器

你可能感兴趣的:(前端~vue.js笔记(一))