1. Vue

1. Vue基础

  1. Vue是一套用于构建用户界面的渐进式JavaScript框架

  2. Vue的作者是尤玉溪

  3. Vue的特点

      1. 采用组件化模式,提高代码复用率,且让代码更好维护
      1. 声明式编码,让编码人员无需直接操作DOM,提高开发效率
      1. 使用虚拟DOM + 优秀的Diff算法,尽量复用DOM节点
  4. 学习Vue之前,要掌握的JavaScript基础知识

      1. ES6语法规范
      1. ES6模块化
      1. 包管理器
      1. 原型,原型链
      1. 数组常用方法
      1. axios
      1. promise

2. 初识Vue

    1. 想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象
    1. root容器里面的代码,依然符合html规范,只不过混入了一些Vue的语法
    1. root容器里面的代码,被称为【Vue模板】
    1. Vue实例和容器是一一对应的
    1. 真实开发中只有一个Vue实例,并且会配合着组件一起使用
    1. {{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性
    1. 一旦data中的数据发生改变,那么页面中用到该数据的部分,也会自动更新
2. 模板语法

Vue模板语法有两大类

    1. 插值语法:
      功能:用于解析标签体内容
      写法:{{xxx}}
    1. 指令语法
      功能:用于解析标签(包括标签属性,标签体内容,绑定事件...)
      举例:v-bind:href="url" 或者 :href="url"
3. 数据绑定

Vue中有两种数据绑定的方式

    1. 单向绑定(v-bind): 数据只能从data流向页面
    1. 双向绑定(v-model): 数据不仅能从data流向页面,也能从页面流向data

备注:

    1. 双向绑定一般都应用在表单类元素上(input, select等)
    1. v-model:value可以简写为v-model,因为v-model默认收集的就是value的值
4. el和data的两种写法
  1. el的两种写法
 const vm = new Vue({
     el: '#root',
     data: {
         name: ''
     }
 })
  • new Vue的时候配置el属性
const vm = new Vue({
     data: {
         name: ''
     }
})
 vm.$mount('#root')
  • 先创建Vue实例,再通过vm.$mount('#root')指定el的值
  1. data的两种写法
  • 对象式
 const vm = new Vue({
     el: '#root',
     data: {
         name: ''
     }
 })
  • 函数式
const vm = new Vue({
     el: '#root',
     data: function() {
            return {
                name: ''
            } 
    }
 })
  1. 一个重要的原则

由Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不是Vue实例了

5. MVVM模型

MVVM模型

    1. M:模型(model),data中的数据
    1. V:视图(View),模板代码
    1. VM:视图模型(ViewModel),Vue实例

观察发现

  1. data中的所有属性,最后都出现在了vm身上
  2. vm身上所有的属性,以及vue原型上所有属性,在Vue模板中都可以使用
6. 数据代理
    1. Object.defineProperty
<script type="text/javascript">
    let number = 18

    let person = {
        name: '张三',
        sex: '男'
    }

    Object.defineProperty(person,'age', {
        // value: 18,
        // enumerable: true, // 控制属性是否可以枚举,默认false
        // writable: true, // 控制属性是否可以被修改,默认false
        // configurable: true // 控制属性是否可以被删除,默认false

        // 当有人读取person的age属性时,get函数就会被调用,且返回值就是age的值
        get: function () {
            return number
        },

        // 当有人修改person的age属性时,set函数就会被调用,且会收到修改的具体值
        set(value) {
            number = value
        }
    })

    console.log(person)
</script>
    1. 何为数据代理
<!--
数据代理: 通过一个对象代理对另一个对象中属性的操作(读/写)
-->
<script type="text/javascript">
let obj1 = {x: 100}
let obj2 = {y: 200}

Object.defineProperty(obj2,'x', {
    get() {
    return obj1.x
    },

    set(v) {
    obj1.x = v
    }
})
</script>
    1. Vue中的数据代理
<!--
    1. Vue中的数据代理
      通过vm对象来代理data对象中属性的操作(读/写)
    2. Vue中数据代理的好处
      更加方便的操作data中的数据
    3.基本原理
      通过Object.defineProperty()把data对象中所有属性添加到vm上
      为每一个添加到vm上的属性,都指定一个getter和setter。
      在getter和setter内部去操作(读/写)data中对应的属性
-->
14. 事件处理

事件的基本使用:

    1. 使用v-on:xxx 或 @xxx绑定事件,其中xxx是事件名
    1. 事件的回调需要配置在methods对象中,最终会在vm上
    1. methods中配置的函数,不要用箭头函数,否则this就不是vm啦
    1. methods中配置的函数,都是被Vue所管理的函数,this指向的是vm 或 组件实例对象
    1. @click="demo" 和 @click="demo($event)"效果一致,但后者可以传参
<button v-on:click="showInfo1">点我提示信息1(不传参)</button>
<button @click="showInfo2($event,66)">点我提示信息2(传参)</button>

methods: {
    showInfo1(event) {
        console.log(event)
        alert('同学你好')
    },
    showInfo2(event, value) {
        console.log(event, value)
    }
}
15. 事件修饰符

Vue中的事件修饰符

    1. prevent:阻止默认事件(常用)
    1. stop:阻止事件冒泡(常用)
    1. once:事件只触发一次(常用)
    1. capture: 使用事件的捕获模式
    1. self: 只有event.target是当前操作的元素才触发事件
    1. passive: 事件的默认行为立即执行,无需等待事件回调执行完毕
<!--  阻止默认事件(常用)   -->
<a href="https://www.baidu.com" v-on:click.prevent="showInfo">点我提示信息</a>

<!--  阻止事件冒泡(常用)  -->
<div class="demo1" v-on:click="showInfo">
    <button v-on:click.stop="showInfo">点我提示信息</button>
    <a href="https://www.baidu.com" v-on:click.stop.prevent="showInfo">点我提示信息</a>
</div>

<!--  事件只触发一次  -->
<button v-on:click.once="showInfo">点我提示信息</button>

<!--  使用事件的捕获模式  -->
<div class="box1" v-on:click.capture="showMsg(1)">
    div1
    <div class="box2" v-on:click="showMsg(2)">
        div2
    </div>
</div>

<!--  只有event.target是当前操作的元素时,才触发事件  -->
<div class="demo1" v-on:click.self="showInfo">
    <button v-on:click="showInfo">点我提示信息</button>
</div>

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

推荐阅读更多精彩内容

  • Vue.js 什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(Rea...
    xlystar阅读 94评论 0 0
  • 声明式渲染 vue 使用模板语法将数据渲染进DOM系统中 数据与DOM建立关联,响应式 指令 指令带有前缀 v- ...
    在全世界迷路_e283阅读 165评论 0 0
  • 1.1 vue简介 vue特点 采用组件化模式,提高代码复用率、切让代码更好维护page.vue[每个页面相当于一...
    cxyfxr阅读 334评论 0 0
  • vue 语法基础 插值、表达式 2.指令、动态属性 3. v-html: 会有xss风险,会覆盖子组件 comp...
    yaoyao妖妖阅读 194评论 0 0
  • 插值表达式 文本渲染 属性绑定 事件绑定 练习:文字走马灯效果 流程: 在按钮上绑定一个点击事件 事件处理函数中,...
    月影追猎者阅读 229评论 0 0