自定义指令（Vue.directive(,)）

最新推荐文章于 2024-06-16 13:00:26 发布

Spider_man_

最新推荐文章于 2024-06-16 13:00:26 发布

阅读量860

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/chengmo123/article/details/108796147

版权

自定义指令

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。

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

钩子函数bind，inserted，updated

bind：只调用一次，指令第一次绑定到元素时调用，在这里可以进行一次性化设置

inserted：被绑定元素插入父节点时调用

update：所在组件VNode更新时调用，但是可能发生在其子VNode更新之前。

钩子函数参数
- el：指令所绑定的元素，可以用来直接操作 DOM。

私有指令（局部指令）

...
<div id='#app'>
   <div v-color>hello word</div>
</div>
...
<script>
var vm=new Vue({
	el:'#app',
	data:{},
	methdos:{},
	directives:{
		color:{
			bind:function(el){
			el.style.color='red'
			},
			inserted:function(el){},
			update:function(el){}
		}
	}
})
</script>

函数简写

在很多时候，想在bind和update是触发相同行为，而不关系其他的钩子

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>指令使用钩子函数的第二个binding参数</title>
    <script src="../vue.min.js"></script>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
    <script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <style>
        #id {
   
            width: 200px;
        }
    </style>
</head>

<body>
    <div id="app">

        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">城市列表</h3>
            </div>
            <div class="panel-body form-inline">
                id:<input type="text" name="" id="id" class="form-control" value="" required="required" pattern="" title="" v-model="id"> name:
                <input type="text" name="" id="name" class="form-control" value="" required="required" pattern="" title="" v-model="name">

                <input type="button" value="添加" @click="add">
                <label for="">查询</label>

                <input type="text" name="" id="search" class="form-control" value="" required="required" pattern="" title="">
            </div>
        </div>


        <table class="table table-striped table-hover table-bordered">
            <thead>
                <tr>
                    <th>id</th>
                    <th>name</th>
                    <th>时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="list in listsdata">
                    <td v-fontweight="1000">{
   {
   list.id}}</td>
                    <td>{
   {
   list.name}}</td>
                    <td>{
   {
   list.ctime}}</td>
                    <td><a href="#" @click="delt(list.id)">删除</a></td>
                </tr>
            </tbody>
        </table>
        <!-- 测试命令指令钩子函数的第二个参数 -->
        <label for="" v-color="'red'">{
   {
   new Date()}}</label>


    </div>


</body>
<script>
    // 测试命令指令钩子函数第二个参数,钩子函数binding,inserted,updated.分别的参数
    Vue.directive('color', {
   
        bind: function(el, binding) {
   
            el.style.color = binding.value
        }
    })
    var vm = new Vue({
   
        el: '#app',
        data: {
   
            id: '',
            name: '',
            listsdata: [{
   
                id: 1,
                name: '北京',
                ctime: new Date()
            }, {
   
                id: 2,
                name: '上海',
                ctime: new Date()
            }, {
   
                id: 3,
                name: '广州',
                ctime: new Date()
            }]
        },

        methods: {
   
            add() {
   
                var city = {
   
                    id: this.id,
                    name: this.name,
                    ctime: new Date()
                }
                this.listsdata.push(city)

            },
            delt(id) {
   
                this.listsdata.forEach((item, i) => {
   
                    if (item.id == id) {
   
                        this.listsdata.splice(i, 1)
                    }
                })

            }
        },

        directives: {
   
            fontweight: {
   
                bind: function(el, binding) {
   
                    el.style.fontWeight = binding.value
                }
            }
        }
    })
</script>

</html>

Vue实例的生命周期

什么是生命走起，从Vue实例创建、运行到销毁期间，总是伴随着各种各样的时间，这些事件，统称为生命周期。
生命周期钩子是生命周期事件的别名而已
主要的生命周期函数分类：
1. 创建期间的生命周期函数：
  - beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好data和methods属性
  - created：实例已经在内存中创建OK，此时data和methods已经创建ok，此时还没有开始编译模板
  - beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
  - Mount：此时已经将编译好的模板，挂载到了页面指定的容器中显示
2. 运行期间的生命周期函数：
  - beforeUpdate:状态更新之前执行此函数，此时data中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点
  - updated：实例更新完毕之后调用此函数，此时data中的状态值和界面上显示的数据都已经完成了更新，界面已经被重新渲染好了
3. 销毁期间的生命周期函数：
  - beforeDestroy：实例销毁之前调用，在这一步，实例仍然完全可用
  - destroyed： Vue实例销毁后调用，调用后，Vue实例都会被消除

V-resource包完成get，post，JSONP请求

详见代码
app.js

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-resourse中的get，post以及jsonp请求</title>
    <script src="../vue.min.js"></script>
    <script src="../vue-resource-1.3.4.js"></script>
</head>

<body>
    <div id="app">
        <input type="button" value="发送get请求" @click="reGet">
        <input type="button" value="发送get请求" @click="rePost">
        <input type="button" value="发送JSONP请求" @click="reJSONP">
    </div>

</body>
<script>
    var vm = new Vue({
   
        el: '#app',
        data: {
   },
        methods: {
   
            reGet() {
   
                this.$http.get('http://www.liulongbin.top:3005/api/getlunbo').then(function(response) {
   
                    console.log(response)
                })
            },
            rePost() {
   
                this.$http.post('http://www.liulongbin.top:3005/api/post', {
    name: 'tom'}, {
   emulateJSON: true}).then(result => {
   
                    console.log(result)
                })
            },
            reJSONP(){
   
                this.$http.jsonp('http://www.liulongbin.top:3005/api/jsonp').then(result=>{
   
                    console.log(result)
                })
            }

        }
    })
</script>

</html>

语法&API
可以使用全局对象Vue.http或者一个Vue实例的内部使用this.$http来发起HTTP请求

//全局Vue对象使用http
Vue.http.get(url,[options]).then(successCallback,errorCallback)
Vue.http.post(url,[body],[options]).then(successCallback,errorCallback)
Vue.http.jsonp(url,[options]).then(successCallback,errorCallback)
//在一个Vue实例内使$http
this.$http.get(url,[options]).then(successCallback,errorCallback)
this.$http.post(url,[body],[options]).then(successCallback,errorCallback)
this.$http.jsonp(url,[options]).then(successCallback,errorCallback)

** 注意：** post发送数据到后端，需要第三个参数{emulateJSON：true}。作用，如果web服务器无法处理编码为application/json的请求，可以启用emulateJSON选项
在这里插入图片描述

手动创建node.js服务器，用于测试JSONP

服务器端node.js

//导入http内置模块
const http=require('http')
//这个核心模块，能够帮我们解析url地址，从而拿到pathname 、query
const urlModel=require('url')


// 创建一个http服务
const server=http.createServer()

//监听http服务器的request请求
server.on('request',function(req,res){
   
//这里写自己的代码
// const url= req.url

const {
   pathname:url,query}=urlModel.parse(req.url,true)

if(url==='/getScript'){
   
    //回调的数据
    var data={
   
        name:'tom',
        age:23,
    }
    //拼接一个合法的js脚本，这里拼接的是一个方法的调用
    // var scriptStr='show()'
    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')
})

开启服务·的命令 node app.js
客户端js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>结合node手写JSONP服务器剖析JSONP</title>
</head>
<body>
    
</body>
<script>
    // function show(){
   
    //     console.log("ok")
    // }
    function showinfo(data){
   
        console.log(data)
    }
</script>

<script src="http://127.0.0.1:3000/getScript?callback=showinfo"></script>
</html>

第三天

v-resourse请求服务器端完成商品列表的操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-resource完成商品列表的操作</title>
    <script src="../vue.min.js"></script>
    <script src="../vue-resource-1.3.4.js"></script>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
    <script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
    <div id="app">

        
        <div class="panel panel-primary">
              <div class="panel-heading">
                    <h3 class="panel-title">商品列表</h3>
              </div>
              <div class="panel-body form-inline">
                    <label >
                        name:
                        <input type="text" name="" id="input" class="form-control" value="" required="required" pattern="" title="" v-model="name">
                    </label>

最低0.47元/天解锁文章

Spider_man_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义指令（Vue.directive(,)）

自定义指令除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { bind:function(el){}, // 当被绑定的元素插入到 DOM 中时 inserted: function (el) { // 聚焦元素 el.focus() }, updated:function(el){}})钩子函数bind，insert
复制链接

扫一扫