Vue入坑篇（二） --详细

桃扇骨 2022-02-22 00:31 199阅读 0赞

**1.Vue过滤器：**

Vue.js允许你自定义过滤器，可被用作一些常见的文本格式化，过滤器可以用在两个地方：**双花括号插值和 `v-bind` 表达式** (后者从 2.1.0+ 开始支持)

过滤器应该被放在JavaScript的尾部，由**“管道符 | ”**指示。

{
       { message | 过滤器名称 }}
    
    
    <div v-bind:id="rawId | 过滤器名称"></div>
    
    
    
    <script>
        /**
         *过滤器的第一个参数data永远被定义为管道符“|”前的数据。
         *过滤器是可以传多参数的。
         *过滤器可以定义多个，而且作用域可以不同。
         *一个dataName使用多个过滤器时，用管道符分割,按顺序执行。
         */
        Vue.filter('过滤器名称filterName',function(data){
            //操作   
    })
    </script>

**2.过滤器的分类：全局过滤器和私有过滤器**

**私有过滤器**：定义在vm实例属性filters里的过滤器就是私有过滤器。

**全局过滤器**：定义在<script>的内，vm实例外的过滤器。

**3.padStart(length,padString)  //用户填充字符。多用于填充时间表达式中的"0"**

**4.按键修饰符：配合键盘事件keyup使用。**

**分类：**

1.*系统自带的*：enter   ,  tab   ,  delete(用于捕获"删除"和"退格"键)  , esc ,  space ,  up  , down ,  left  , right

2.*自定义的*：按照js键盘事件对应的键码自定义设置。

<input type="text" @keyup.enter="delete" />
    
    
    
    <input type="text"  @keyup.114="delete"/> 
    
    
    <input type="text"  @keyup.f3="delete"/>
    
    <script>
        //自定义全局按键修饰符
        Vue.config.keyCodes.f3=114; 
    </script>

** 5.自定义指令：因为Vue不推荐操作DOM，但是有一些指令Vue中没有，那么只有自定义指令才能完成了。**

**    钩子函数：**

bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。

componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。

unbind: 只调用一次， 指令与元素解绑时调用。

inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。

**钩子函数的参数:**

1.**el   **: 指令所绑定的元素，可以用来直接操作 DOM 。

2.**binding**: 一个对象，包含以下属性

**属性**：

1.name 指令名，不包括 v- 前缀。

2.value指令的绑定值， 例如： v-my-directive=”1 + 1”, value 的值是 2。

3.oldValue指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。

4.expression: 绑定值的字符串形式。 例如 v-my-directive=”1 + 1” ，expression 的值是 “1 + 1”。

3.**vnode:**Vue 编译生成的虚拟节点，查阅 VNode API 了解更多详情。

4.**oldVnode**：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

**注意**：除了 el 之外，其它参数都应该是只读的，尽量不要修改他们。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

<input type="text" v-focus />
    <script>
        /**
         *Vue.directive()定义全局的指令  v-focus
         *directive()指令第一个参数是参数名称，第二个参数是一个对象，
         *第二个参数(对象)里面是指令相关的钩子函数，这些钩子函数在特定的阶段执行特定的操作    
         *注意：指令命名时不需要加 v- ,但是调用时需要加 v- 
         */
    
        Vue.directive('focus',{
          /**
           *元素绑定指令时,也就是bind执行时,元素还没有被加入DOM树中。(只是在内存中)
           *某些方法在bind中是执行不了的.例如:el.focus()原因:focus只有在元素被加入DOM树才会执行
           *设置style样式，不管样式是在内存还是页面中，游览器都会渲染样式。
           *正因为bind一个是在内存中执行,inserted一个是页面中执行。所以bind一般用于设置style样式，inserted一般用于设置行为(也就是方法)。    
           *此处介绍的钩子函数：是主要使用的三大钩子函数。
           */
            bind:function(el){
                //操作
            },
            inserted:function(el){
                //操作
               el.focus();
            },
            updated:function(el){
                //操作
            }
            
        
    })
    </script>

**6.私有自定义指令(仅仅在vm实例控制的区域内使用)**

<div id="testarea1">
        <p v-color="'color'"  @click="show">{
       {msg}}</p>
    
    </div>
    <script>
        var vm=new Vue({
            el:'#testarea1',
            data:{
                //vm实例得数据
                msg:'关注John)Zhou得福利！';
            },
    
            methods:{
               //vm实例的方法
              shou(){
                alert("关注John_Zhou得福利！！！");
              },  
    
            },
    
            filters:{
              //私有过滤器  
            },
    
            directives:{
              //自定义私有指令
                'color':{
                    bind:function(el,binding){
                        el.style.color=binding.value;
                    }
                }
            }
            
        
    })
        
    </script>

**7.函数简写：主要针对bind和update钩子函数上的重复动作**

<div id="testarea1">
        <p v-color="'red'" v-fontsize="50"  @click="show">{
       {msg}}</p>
    
    </div>
    <script>
        var vm=new Vue({
            el:'#testarea1',
            data:{
                //vm实例得数据
                msg:'关注John)Zhou得福利！';
            },
    
            methods:{
               //vm实例的方法
              shou(){
                alert("关注John_Zhou得福利！！！");
              },  
    
            },
    
            filters:{
              //私有过滤器  
            },
    
            directives:{
              //自定义私有指令
                'color':{
                    bind:function(el,binding){
                        el.style.color=binding.value;
                    },
               
                }
                 'fontsize':function(el,binding){
                        /*这个function相当于把函数写进了bind和update两个钩子函数中取。*/
                        el.style.fontsize=parseInt(binding.value)+'px';
                },
            }
            
        
    })
        
    </script>

**8.Vue实例的生命周期**

**1.生命周期**：*从Vue实例的创建，运行到销毁期间，总是伴随着各种各样的事件，这些事件统称为生命周期。（生命周期等于事件）*

*生命周期钩子等于生命周期函数（或者生命周期事件）。*

**2.主要的生命周期函数分类：**

2.1**创建期间**的生命周期函数

2.2**运行期间**的生命周期函数

2.3**销毁期间**的生命周期函数

**3.图解Vue生命周期：**

**3.1英文版：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDSUVKb2huX3pob3U_size_16_color_FFFFFF_t_70][]

**3.2中文版**

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDSUVKb2huX3pob3U_size_16_color_FFFFFF_t_70 1][]**

**3.3代码**

<!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>Document</title>
      <script src="vue-2.4.0.js"></script>
    </head>
    
    <body>
      <div id="app">
        <input type="button" value="修改ms" @click="msg='不再关注'">
        <h3 id="dataChange">{
       { msg }}</h3>
      </div>
    
      <script>
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
            msg: 'ok'
          },
          methods: {
            show() {
              alert('执行了show方法')
            }
          },
          beforeCreate() { 
         /**
          *第一个生命周期函数，表示实例还未被完全被创建出来，会执行它。
          *beforeCreate()中，data和methods还未被初始化完成.控制台无法取得data的值或调用methods方法
          */
             
          },
          created() { 
            /**
             *第二个生命周期函数
             *created 中，data 和 methods 都已经被初始化好了。控制台能够取得data的值或调用methods方法
             */
          },
          beforeMount() {
            /**
             *第三个生命周期函数，表示模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中
             *beforeMount()，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
             */
         
          },
          mounted() {
            /**
             *第四个生命周期函数，表示内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
             *mounted是实例创建期间的最后一个生命周期函数，当执行完mounted就表示，实例已经被完全创建好了（包括页面渲染）。此时，内存中就存在一个实实在在的实例了。
             */
    
          },
    
    
          beforeUpdate() { 
            /**
             *这时候，表示我们的页面的数据还没有被更新。只是内存中更新了。页面尚未和最新的数据保持同步
             */
          },
          updated() {
            /**
             *updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的
             */
          }
        });
      </script>
    </body>
    
    </html>

**9.使用vue-resource实现get,post,jsonp请求（即：Ajax请求）。**

**9.1语法:  this.$http.get(url,\[options\]).then(successCallback,errorCallback\[可选参数\])**

**9.2语法:  this.$http.post(url,body,\[options\]).then(successCallback,errorCallback\[可选参数\])**

**9.3语法:  this.$http.jsonp(url,\[options\]).then.(successCallback,errorCallback\[可选参数\])**

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    
    </head>
    <script src="vue-2.4.0.js"></script>
    <script src="vue-resource-1.3.4.js"></script>
    <body>
    <div id="area">
      <input type="button" value="get方法" @click="getInfo">
      <input type="button" value="post方法" @click="postInfo">
      <input type="button" value="Jsonp方法" @click="jsopInfo">
    </div>
    
    </body>
    <script>
      var vm = new Vue({
        el: '#area',
        data: {},
        methods: {
          getInfo() {
            /**
             *发起get请求
             * .then是设置回调函数，必须写发送成功后的回调函数（即：接受服务器数据的回调函数）。
             * .body来接受返回的所有数据。
             * 测试地址：http://vue.studyit.io/api/getlunbo
             */
            this.$http.get('http://vue.studyit.io/api/getlunbo').then(function (result) {
              console.log(result.body);
            })
          },
          postInfo() {
            /**
             *发起post请求
             * post的请求默认是以表单格式提交上服务器的。
             * 手动的post默认是没有表单格式的，需要在options可选参数位置设置：emulateJSON:true (设置提交内容为表单格式).
             * 回调函数是匿名函数，箭头函数也是匿名函数，所以直接用箭头函数代替。
             * 测试地址：http://vue.studyit.io/api/post
             */
            this.$http.post('http://vue.studyit.io/api/post', {}, {emulateJSON: true}).then(result => {
              console.log(result.body)
            })
          },
          jsopInfo() {
            /**
             *发起JSONP请求
             * 测试地址：http://vue.studyit.io/api/jsonp
             */
            this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => {
              alert(result.body)
            })
          }
        }
      })
    </script>
    </html>

**10.JSONP**

**JSONP产生：由于游览器安全限制，一般不允许Ajax跨域请求（浏览器认为这种访问不安全）。**

**JSONP原理**：*因为script标签不存在跨域限制,所以可以通过动态创建script标签，把script标签src属性指向**数据接口的地址**。。这种数据获取方式，称为JSONP（注意:根据JSONP的实现原理，JSONP只支持get请求）。*

*(注意:script是解析填写在src中的**脚本信息**来获取数据的)*

**利用JSONP服务器剖析JSONP原理：**

**客户端：**

<!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>Document</title>
    </head>
    
    <body>
      <script>
        //客户端定义方法的调用。
        function showInfo123(data) {
          console.log(data)
        }
      </script>
    
    
    <script src="http://127.0.0.1:3000/getscript?callback=showInfo123"></script>
    
    
    </body>
    
    </html>

**服务器端：**

/**
     *原理：服务器端传递调用信息，从而调用客服端的方法。
     */
    
    // 导入 http 内置模块
    const http = require('http')
    // 这个核心模块，能够帮我们解析 URL地址，从而拿到  pathname  query 
    const urlModule = require('url')
    
    // 创建一个 http 服务器
    const server = http.createServer()
    // 监听 http 服务器的 request 请求
    server.on('request', function (req, res) {
    
      // const url = req.url
      const { pathname: url, query } = urlModule.parse(req.url, true)
    
      if (url === '/getscript') {
        // 拼接一个合法的JS脚本，这里拼接的是一个方法的调用
        // var scriptStr = 'show()'
    
        var data = {
          name: 'xjj',
          age: 18,
          gender: '女孩子'
        }
    
        var scriptStr = `${query.callback}(${JSON.stringify(data)})`
        // res.end 发送给 客户端， 客户端去把 这个 字符串，当作JS代码去解析执行
        res.end(scriptStr)
      } else {
        res.end('404')
      }
    })
    
    // 指定端口号并启动服务器监听
    server.listen(3000, function () {
      console.log('server listen at http://127.0.0.1:3000')
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDSUVKb2huX3pob3U_size_16_color_FFFFFF_t_70]: /images/20220222/3f0e2f78dbba4940af70514b4d1830c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDSUVKb2huX3pob3U_size_16_color_FFFFFF_t_70 1]: /images/20220222/b8a93f16f01c4e70b8bd59fd10ef5839.png