前端~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,会怎么样(获取到的是组件的引用)


简单计数器
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,921评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,635评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,393评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,836评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,833评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,685评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,043评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,694评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,671评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,670评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,779评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,424评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,027评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,984评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,214评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,108评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,517评论 2 343