1.初识 Vue.js

本系列为《Vue.js 实战》的书摘。
所有代码的公共部分如下，后续皆省略。

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
</head>
<body>
 <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<!--如果上面的vuejs加载慢，使用下面的这个：-->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
<div id="app">
</div>
<script>
    var app = new Vue({
        el:'#app'
    })
</script>
</body>
</html>

1.现代Web开发中常见的高级功能：
①解耦视图与数据 ②可复用的组件 ③前端路由 ④状态管理 ⑤虚拟DOM
2.MVVM模式：Model-View-View-Model。当View（视图层）变化时，会自动更新到ViewModel（视图模型），反之亦然。View和ViewModel之间通过双向绑定（data-binding）建立联系。
3.通过构造函数Vue就可以创建一个Vue的根实例，并启动Vue应用：

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

变量app就代表了这个Vue实例。几乎所有的代码都是一个对象，写入Vue实例的选项内的。必不可少的一个选项是el。el用于指定一个页面中已存在的DOM元素来挂在Vue实例，它可以是HTMLElement，也可以是CSS选择器，比如：

<div id="app"></div>
var app = new Vue({
  el:document.getElementById('app') //或是 '#app'
})

挂在成功后，我们可以通过app.$el来访问该元素。
Vue提供了很多常用的实例属性与方法，都已$开头，比如$el。
4.通过Vue实例的data选项，可以声明应用内需要双向绑定的数据。建议所有会用到的数据都预先在data内声明，这样不至于将数据散落在业务逻辑中，难以维护。
5.实例本身也代理了data对象里的所有属性，可以这样访问：

var app = new Vue({
  el: '#app'
  data:{
    a:2
  } 
})
console.log(app.a); //2

6.除了显式地声明数据外，也可以指向一个已有的变量，并且它们之间默认建立了双向绑定，当修改其中任意一个时，另一个也会一起变化：

var myData = {
  a:1
}
var app = new Vue({
  el: '#app'
  data: myData
})
console.log(app.a); //1
//修改属性，原数据也会随之修改
app.a = 2;
console.log(myData.a); // 2
//反之修改原数据，Vue属性也会修改
myData.a = 3;
console.log(app.a); // 3

7.每个Vue实例创建时，都会经历一系列的初始化过程，同时也会调用相应的声明周期钩子，我们可以利用这些钩子，在合适的时机执行我们的业务逻辑。类比jQuery的ready()方法：

$(document).ready(function(){
  // DOM加载完后，会执行这里的代码
});

8.Vue的生命周期钩子与之类似，比较常用的有：

  • created 实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载，$el 还不可用。需要初始化处理一些数据时会比较有用。
  • mounted el挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始。
  • beforeDestroy 实例销毁之前调用。主要解绑一些使用addEventListener监听的事件等。
    这些钩子与el和data类似，也是作为选项写入Vue实例内，并且钩子的this指向的是调用它的Vue实例：
var app = new Vue({
  el: '#app',
  data:{
    a:2
  },
  created:function(){
    console.log(this.a); //2
  }，
  mounted:function(){
    console.log(this.$el);  //<div id="app"></div>
  }
})

9.使用双括号（Mustache语法）{{}} 是最基本的文本插值方法，它会自动将我们双向绑定的数据实时显示出来
10.有多种方法可以对时间格式化，比如赋值前先使用自定义的函数处理，Vue的过滤器（filter）或计算属性（computed）也可以实现。
11.如果有时候就是想输出HTML，而不是将数据解释后的纯文本，可以使用v-html：

<div id="app">
  <span v-html="link"></span>
</div>
<script>
var app = new Vue({
  el:'#app',
  data:{
    link:'<a href="#">链接</a>'
  }

})
</script>

link的内容将会被渲染为一个具有点击功能的a标签，而不是纯文本。
这里要注意，如果将用户产生的内容使用v-html输出后，可能导致XSS攻击。所以要在服务端对用户提交的内容进行处理，一般可将尖括号'<>'转义。
12.如果想显示{{}}标签，而不进行替换，使用v-pre即可跳过这个元素和它的子元素的编译过程，如：

<span v-pre>{{这里的内容不会编译}}</span>

在{{}}中，除了简单的绑定属性值外，还可以用JavaScript表达式进行简单的运算、三元运算等，如：

<div id="app">
  {{number / 10}}
  {{isOK ? '确定' : '取消'}}
  {{text.split(',').reverse().join(',')}}
</div>
<script>
  var app = new Vue({
    el:'#app',
    data:{
      number:100,
      isOK:false,
      text:'123,456'
    }
  })
</script>
//结果依次是：10、取消、456,123
  1. Vue.js 只支持单个表达式，不支持语句和流控制。
    在表达式中，不能使用用户自定义的全局变量，只能使用Vue白名单内的全局变量，如Math和Date。无效示例如下：
<!--这是语句，不是表达式-->
{{var book = 'Vue.js实战'}}
<!--不能使用流控制，而要使用三元运算-->
{{if (ok) return msg }}

14.Vue.js 支持在{{}}插值的尾部添加一个管道符"（|）"对数据进行过滤，经常用于格式化文本，比如字母全部大写、货币千位使用逗号分隔等。
过滤的规则是自定义的，通过给Vue实例添加选项filters来设置，例如在上一节中实时显示当前时间的实例，可以对时间进行格式化处理：

<div id="app">
  {{ date | formatDate }}
</div>
<script>
  //在月份、日期、小时等小于10时前面补0
  var padDate = function(value){
    return value < 10 ? '0' + value : value;
  };
  var app = new Vue({
    el:'#app',
    data:{
      date:new Date()
    },
    filters:{
      formatDate : function (value) {//这里的value就是需要过滤的数据
        var date = new Date(value);
        var year = date.getFullYear();
        var month = date.padDate(date.getMonth() + 1);
        //date.getMonth() 结果是一个长度为12的数组的序号，
        //其中0是一月，11是十二月，所以用序号+1，就和当前月份的数值是一样的了。
        var day = padDate(date.getDate());
        var hours = padDate(date.getHours());
        var minutes = padDate(date.getMinutes());
        var seconds = padDate(date.getSeconds());
        //将整理好的数据返回
        return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;         
      }
    },
    mounted:function(){
      var _this = this;//声明一个变量指向Vue实例this，保证作用域一致
      //为什么要使用下面的延时？？难道是给Vue实例更多的生成时间？
      this.timer = setInterval(function(){
        _this.date = new Date(); //修改数据date
      }, 1000);
    },
    beforeDestory:function(){
      if(this.timer){
        clearInterval(this.timer); //在Vue实例销毁前，清楚我们的定时器
      }
    }
  })
</script>

过滤器也可以串联，而且可以接受参数，如：

<!--串联-->
{{message | filterA | filterB }}
<!--接受参数-->
{{message | filterA ('arg1','arg2') }}

这里的字符串arg1 和 arg2 将分别传给过滤器的第二个和第三个参数，因为第一个是数据本身。
过滤器应当用于处理简单的文本转换，如果要实现更为复杂的数据变换，应该使用计算属性。
15.指令（Directives）是Vue.js模版中最常用的一项功能，它带有前缀 v-，如：v-if、v-html、v-pre等。指令的主要职责就是当其表达式的值改变时，相应地将某些行为应用到DOM上，以v-if为例：

<div id="app">
  <p v-if="show">显示这段文本</p>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data : {
      show : true
    }
  })
</script>

当数据show的值为true时，p元素会被插入，为false时则会被移除。
数据驱动DOM是Vue.js的核心理念，所以不到万不得已时，不要主动操作DOM，你只需要维护好数据，DOM的事Vue会帮你优雅的处理。
Vue.js 内置了很多指令，帮助我们快速完成常见的DOM操作，比如循环渲染、显示与隐藏等。先了解一下 v-bind 和 v-on。
v-bind的基本用途是动态更新HTML元素上的属性，比如id、class，示例：

<div id = "app">
  <a v-bind:href="url">链接</a>
  <img v-bind:src="imgUrl">
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      url : 'https://www.github.com',
      imgUrl : 'http://xxx.xxxx.xx/img.png'
    }
  })
</script>

示例中的链接地址与图片的地址都与数据进行了绑定，当通过各种方式改变数据时，链接和图片都会自动更新。这是v-bind最基本的用法。
v-on指令，是用来绑定事件监听器，这样我们就可以做一些交互了。示例：

<div id="app">
  <p v-if="show">一段文本</p>
  <button v-on:click="handleClose">点击隐藏</button>
</di>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      show: true
    },
    methods: {
      handleClose:function(){
        this.show = false;
      }
    }
  })
</script>

在buton按钮上，使用v-on:click 给该元素绑定了一个点击事件，在普通元素上，v-on可以监听原生的DOM事件，除了click外，还有dbclick，keyup，mousemove 等。表达式可以是一个方法名，这些方法都写在Vue实例的methods属性内，并且是函数的形式，函数内的this指向的是当前Vue实例本身，因此可以直接使用this.xxx的形式来访问或修改数据。
表达式除了方法名，也可以直接是一个内联语句。上例也可以写成：

<div id = "app">
  <p v-if="show">文本</p>
  <button v-on:click="show=false">点击隐藏</button>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      show : true
    }
  })
</script>

如果绑定的事件要处理复杂的业务逻辑，建议在methods里声明一个方法，这样可读性好，易维护。
Vue.js 将 methods里的方法也代理了，所以可以像访问Vue数据那样来调用方法：

<div id="app">
  <p v-if="show">文本</p>
  <button v-on:click="handleClose">点击隐藏</button>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      show: true
    },
    methods: {
      handleClose: function(){
        this.close();
      },
      close: function(){
        this.show = false;
      }
    }
  })
</script>

在handleClose方法内，直接通过this.close() 调用了close() 函数。
如下几种用法都是常见和正确的：

<script>
  var app = new Vue({
    el: '#app',
    data: {
      show: true
    },
    methods: {
      init: function(text){
        console.log(text);
      }
    },
    mounted: function(){
      this.init('在初始化时调用');//在初始化时调用
    }
  })；
  app.init('通过外部调用'); //在Vue实例外部调用
</script>

16.语法糖是指在不影响功能的情况下，添加某种方法实现同样的效果，从而方便程序开发。Vue.js的v-bind和v-on指令都提供了语法糖，也可以说是缩写。
v-bind 可以直接写成 ：
v-on 可以直接写成 @

<a v-bind:href="url">链接</a>
<img v-bind:src="imgUrl">
<!--缩写为-->
<a :href="url">链接</a>
<img :src="imgUrl">

<button v-on:click="handleClose">点击隐藏</button>
<!--缩写为-->
<button @click="handleClose">点击隐藏</button>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 199,830评论 5赞 468
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 83,992评论 2赞 376
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 146,875评论 0赞 331
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 53,837评论 1赞 271
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,734评论 5赞 360
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,091评论 1赞 277
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,550评论 3赞 390
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,217评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,368评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,298评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,350评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,027评论 3赞 315
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,623评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,706评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,940评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,349评论 2赞 346
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 41,936评论 2赞 341