Vue入坑篇（二） --详细

最新推荐文章于 2024-06-22 21:49:16 发布

CCIEJohn_zhou

最新推荐文章于 2024-06-22 21:49:16 发布

阅读量564

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/CCIEJohn_zhou/article/details/89100714

版权

Vue 专栏收录该内容

4 篇文章 2 订阅

订阅专栏

1.Vue过滤器：

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

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

<!-- 在双花括号中 -->
{{ message | 过滤器名称 }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | 过滤器名称"></div>

<!--过滤器调用格式 {{dataName | 过滤器名称filterName }}-->

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

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

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

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

<script>
    //全局过滤器
    Vue.filter(filterName1,functiong(data){
        //操作
    })
    
    //vm实例
    var vm=new Vue({
    el:'xx',
    data:{
        msg:'关注John,得福利',
    },
    methods:{
        
    },
    //局部过滤器：过滤器名：过滤器方法
    filters:{
        filterName2:function(data){
            //操作
        }
    }
    
})
</script>

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

<script>
    var date=new Date();
    var y=date.getFullYear();
    var m=date.getMonth()+1  //因为JS是以数组形式存储月份，所以getMonth()比正常月份小1。
    var d=date.getDate();
    var hh=date.getHours();
    var mm=date.getMinutes();
    var ss=date.getSeconds();
    console.log(`${y}-${m}-${d}  ${hh}:${mm}:${ss}`);
    /**
     *加入现在时间是2018-11-11 09:08:06  那么此时输出的是：2018-11-11 9:8:6 
     *为了解决少0的问题引入了padStart(填充总长度，填充字符)方法
     *上面代码可以改为：
     */
    var date1=new Date();
    var y=date1.getFullYear();//因为date原本是4位数字所以不做填充
    var m=date1.getMonth()+1.tostring().padStart(2,'0');
    var d=date1.getDate().tostring().padStart(2,'0');
    var hh=date1.getHours().tostring().padStart(2,'0');
    var mm=date1.getMinutes().tostring().padStart(2,'0');
    var ss=date1.getSeconds().tostring().padStart(2,'0');
    //此时输出：2018-11-11 09:08:06
    console.log(`${y}-${m}-${d}  ${hh}:${mm}:${ss}`);
</script>

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

分类：

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

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

<!-- 系统自带的按键修饰符 -->
<!-- 按键enter执行delete方法 -->
<input type="text" @keyup.enter="delete" />

<!-- 自定义的按键修饰符 -->
<!-- 第一种：直接写js对应键盘的键码  键码114 对应 键盘中的F3 -->
<input type="text"  @keyup.114="delete"/> 

<!-- 第二种：在Vue中将F3绑定键码114 -->
<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 来进行。

<!-- 此处v-focus是自定义的指令 -->
<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英文版：

3.2中文版

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>
<!-- <script>
  show()
</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')
})

CCIEJohn_zhou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue入坑篇（二） --详细

1.Vue过滤器：Vue.js允许你自定义过滤器，可被用作一些常见的文本格式化，过滤器可以用在两个地方：双花括号插值和v-bind表达式(后者从 2.1.0+ 开始支持)过滤器应该被放在JavaScript的尾部，由“管道符 | ”指示。{{ message | 过滤器名称 }}<!-- 在 `v-bind` 中 --&gt...
复制链接

扫一扫

专栏目录