对Vue的个人理解分享

Vue 概述

Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。Vue 采用自底向上增量开发的设计，核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动

由于Vue使用getter/setter等ES5特性，所以兼容到IE9

下面来解释下，何为渐进式框架，如上图所示　


渐进式加载.png

如果只使用Vue最基础的声明式渲染的功能，则完全可以把Vue当做一个模板引擎来使用
  如果想以组件化开发方式进行开发，则可以进一步使用Vue里面的组件系统
  如果要制作SPA(单页应用)，则使用Vue里面的客户端路由功能
  如果组件越来越多，需要共享一些数据，则可以使用Vue里的状态管理
  如果想在团队里执行统一的开发流程或规范，则使用构建工具
  所以，可以根据项目的复杂度来自主选择使用Vue里面的功能

Vue.js有三种获取方式

1、官网：直接下载

​ 开发版本：包含完整的警告和调试模式

​ 生产版本：删除了警告，28.96kb min+gzip

2、CDN

​ 使用https://unpkg.com/vue这个在线CDN

<script src="https://unpkg.com/vue"></script>

3、NPM

# 最新稳定版
$ npm install vue
# 获取Vue后，直接使用script标签引入即可使用  

<script src="https://unpkg.com/vue"></script>

模板插值

​ 前面介绍过，对于Vue最简单的应用就是将其当作一个模板引擎，也就是采用模板语法把数据渲染进 DOM。Vue使用双大括号语法来进行文本插值，下面的message相当于一个变量或占位符，最终会表示为真正的文本内容

<div id="app">
  {{ message }}
</div>

构造器

​ 每个Vue.js应用都是通过构造函数 Vue 创建一个 Vue 的根实例启动的，经常使用 vm (ViewModel 的简称) 这个变量名表示Vue实例

var vm = new Vue({
  // 选项
})

​ 在实例化Vue时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

上面为Vue()构造函数传入了一个对象，对象中包括el和data这两个参数
el： 参数el，是element的缩写，用于提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标
  参数值有两种类型，包括string | HTMLElement
  上例中， el : "#app"表示挂载目标为id为"app"的元素，也可以写为 el : document.getElementById('app')
data：
  参数data表示Vue实例的数据对象
  上例中，data: { message: 'Hello Vue!' } 表示变量message所代表的真实值为"Hello Vue!"

简单实例

下面将Vue的模板插值和构造器结合起来，制作一个简单实例 demo1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
      {{ message }}
    </div>
<script src="https://unpkg.com/vue"></script>    
<script>
    var vm = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
</script>
</body>
</html>

数据绑定

看起来上面的例子跟单单渲染一个字符串模板非常类似，但是Vue在背后做了大量工作。现在数据和 DOM 已经被绑定在一起，所有的元素都是响应式的，在控制台中修改app.message的值，可看到DOM元素相应的更新；

Vue自定义指令

directives链接

  • 默认设置的核心指令( v-model、v-on:、v-bind、@click、v-if v-show 、v-for)；

  • 自定义指令

    以一个input元素自动获得焦点为例，当页面加载时，使用autofocus可以让元素将获得焦点 。但是autofocus在移动版Safari上不工作。现在注册一个使元素自动获取焦点的指令
      指令注册类似于组件注册，包括全局指令和局部指令两种

    全局指令
      使用Vue.diretive()来全局注册指令

    // 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
  // 当绑定元素插入到 DOM 中。
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

    局部指令
      也可以注册局部指令，组件或Vue构造函数中接受一个 directives 的选项

    var vm = new Vue({
  el: '#app',
  directives:{
    focus:{
      inserted: function (el) {
        el.focus()
      }      
    }
  }
})

    然后可以在模板中任何元素上使用新的 v-focus 属性

    <div id="app">
  <input v-focus>
</div>

    <script>
// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
  // 当绑定元素插入到 DOM 中。
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
var vm = new Vue({
  el: '#app',
})
</script>

钩子函数
  指令定义函数提供了几个钩子函数（可选）
bind
  只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作
inserted
  被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）
update
  所在组件的 VNode 更新时调用，但是可能发生在其孩子的 VNode 更新之前。指令的值可能发生了改变也可能没有。但是可以通过比较更新前后的值来忽略不必要的模板更新
componentUpdated
  所在组件的 VNode 及其孩子的 VNode 全部更新时调用
unbind
  只调用一次， 指令与元素解绑时调用

钩子函数参数
  钩子函数被赋予了以下参数
el
  指令所绑定的元素，可以用来直接操作 DOM
binding
  一个对象，包含以下属性：

name: 指令名，不包括 v- 前缀。
value: 指令的绑定值， 例如： v-my-directive="1 + 1", value 的值是 2。
oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression: 绑定值的字符串形式。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。
modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。

vnode
  Vue 编译生成的虚拟节点
oldVnode
  上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用
  注意：除了 el 之外，其它参数都是只读的，尽量不要修改他们。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行
  下面是一个使用了这些参数的自定义钩子样例

<div id="app" v-demo:foo.a.b="message"></div>

<script>
    Vue.directive('demo', {
      bind: function (el, binding, vnode) {
        var s = JSON.stringify
        el.innerHTML =
          'name: '       + s(binding.name) + '<br>' +
          'value: '      + s(binding.value) + '<br>' +
          'expression: ' + s(binding.expression) + '<br>' +
          'argument: '   + s(binding.arg) + '<br>' +
          'modifiers: '  + s(binding.modifiers) + '<br>' +
          'vnode keys: ' + Object.keys(vnode).join(', ')
      }
    })
    new Vue({
      el: '#app',
      data: {
        message: 'hello!'
      }
    })
</script>

函数简写
  大多数情况下，可能想在bind和update钩子上做重复动作，并且不想关心其它的钩子函数。可以这样写：

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

对象字面量
  如果指令需要多个值，可以传入一个JS对象字面量。指令函数能够接受所有合法类型的JS表达式

<div v-demo="{ color: 'white', text: 'hello!' }"></div>

Vue.directive('demo', function (el, binding) {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text)  // => "hello!"
})

Vue实例的生命周期

解释
  接下来，根据提供的生命周期钩子，对Vue实例各个阶段的情况进行详细说明
beforeCreate
  在实例开始初始化时同步调用。此时数据观测、事件等都尚未初始化
created
  在实例创建之后调用。此时已完成数据观测、事件方法，但尚未开始DOM编译，即未挂载到document中
beforeMount
  在mounted之前运行
mounted
  在编译结束时调用。此时所有指令已生效，数据变化已能触发DOM更新，但不保证$el已插入文档  
beforeUpdate
  在实例挂载之后，再次更新实例(例如更新 data)时会调用该方法，此时尚未更新DOM结构
updated
  在实例挂载之后，再次更新实例并更新完DOM结构后调用
beforeDestroy
  在开始销毁实例时调用，此刻实例仍然有效
destroyed
  在实例被销毁之后调用。此时所有绑定和实例指令都已经解绑，子实例也被销毁
activated
  需要配合动态组件keep-live属性使用。在动态组件初始化渲染的过程中调用该方法
deactivated
  需要配合动态组件keep-live属性使用。在动态组件初始化移出的过程中调用该方法
简单实例
  下面写一个简单实例来更清楚地了解Vue实例内部的运行机制


<div id="app">{{message}}</div>

<script>
var vm = new Vue({
  el: '#app',
  data:{
    message:'match'
  },
  beforeCreate(){
    console.log('beforeCreate');
  },
  created(){
    console.log('created');
  },
  beforeMount(){
    console.log('beforeMount');
  },
  mounted(){
    console.log('mounted');
  },
  beforeUpdate(){
    console.log('beforeUpdate');
  },
  updated(){
    console.log('updated');
    //组件更新后调用$destroyed函数，进行销毁
    this.$destroy();    
  },
  beforeDestroy(){
    console.log('beforeDestroy');
  },
  destroyed(){
    console.log('destroyed');
  },
})
</script>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动态组件</title>
    <script src="https://unpkg.com/vue"></script>
</head>

<body>
    <div id="app">
        <button @click="change">切换页面</button>
        <keep-alive>
            <component :is="currentView" @pass-data="getData"></component> 
        </keep-alive>
        <p>{{msg}}</p>  
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            index:0,
            msg:'',
            arr:[
                { 
                    template:`<div>我是预售电影</div>`,
                    activated(){
                        this.$emit('pass-data','主页被添加');
                    },
                    deactivated(){
                        this.$emit('pass-data','主页被移除');
                    },        
                },
                {template:`<div>我是正在热播</div>`},
                {template:`<div>我是预售电影</div>`}
                ]
        },
        computed:{
            currentView(){
                return this.arr[this.index];
            }
        },
        methods:{
            change(){
                var len = this.arr.length;
                this.index = (++this.index)% len;
            },
            getData(value){
                this.msg = value;
                setTimeout(()=>{
                    this.msg = '';
                },500)
            }
        }
    })
</script>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 214,837评论 6赞 496
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,551评论 3赞 389
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 160,417评论 0赞 350
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,448评论 1赞 288
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,524评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,554评论 1赞 293
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,569评论 3赞 414
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,316评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,766评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,077评论 2赞 330
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,240评论 1赞 343
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,912评论 5赞 338
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,560评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,176评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,425评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,114评论 2赞 366
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,114评论 2赞 352