1.初识 Vue.js

作者: NoNothing | 来源:发表于2020-05-23 07:43 被阅读0次

1.初识 Vue.js
1.初识
1. 初识
初识Vue.js
Vue.js初识
初识Vue.js
初识vue.js
初识Vue.js
初识vue.js
初识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

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>