有道翻译API与Vue指令-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40861561/article/details/105217180

钩子函数参数

指令钩子函数会被传入以下参数：

el：指令所绑定的元素，可以用来直接操作 DOM 。
binding：一个对象，包含以下属性：
- name：指令名，不包括 v- 前缀。
- value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
- oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
- expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1"中，表达式为 "1 + 1"。
- arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
- modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

第一步：有道官方网站申请一个API key
举例：
API key：1207861310
keyfrom：abc1243
调用说明：
http://fanyi.youdao.com/openapi.do?keyfrom=&key=&type=data&doctype=&version=1.1&q=要翻译的文本
版本：1.1，请求方式：get，编码方式：utf-8
主要功能：中英互译，同时获得有道翻译结果和有道词典结果

参数说明：

type - 返回结果的类型，固定为data
doctype - 返回结果的数据格式，xml或json或jsonp
version - 版本，当前最新版本为1.1
q - 要翻译的文本，必须是UTF-8编码，字符长度不能超过200个字符，需要进行urlencode编码
only - 可选参数，dict表示只获取词典数据，translate表示只获取翻译数据，默认为都获取

注：词典结果只支持中英互译，翻译结果支持英日韩法俄西到中文的翻译以及中文到英语的翻译

errorCode：

0 - 正常
20 - 要翻译的文本过长
30 - 无法进行有效的翻译
40 - 不支持的语言类型
50 - 无效的key
60 - 无词典结果，仅在获取词典结果生效注意修改标记的四个地方，只需要修改q的值为你想要的翻译内容即可

第二步：ajax跨域请求的简单实例

第三步：传递参数的ajax跨域请求

第四步：ajax跨域请求怎么处理获取的数据

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
          mui.init();
    </script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">MUI ajax</h1>
</header>    
<div class="mui-content mui-content-padded">
    <div class="mui-input-row">
        <label>输入关键词:</label>
        <input type="text"  id="input" placeholder="输入框"/>
    </div>
    <button id="btn" type="button" class="mui-btn mui-btn-blue mui-btn-block">翻译</button>
   <div id="output">
   </div>
</div>
<script type="text/javascript">
    var inputEl = document.querySelector("#input");
    document.querySelector("#btn").addEventListener('click',function(){
        var url ="http://fanyi.youdao.com/openapi.do";
        var data = {
            "keyfrom":"abc1243",
            "key":"1207861310",
            "type":"data",
            "doctype":"jsonp",
            "version":"1.1",
            "q":inputEl.value,
            "callback":"jsonpcallback"
        }
        var buffer =[];
        for (var key in data) {
            buffer.push(key + '='+encodeURIComponent(data[key]));
        }
        var fullpath = url+ '?'+ buffer.join('&');
         CreateScript(fullpath);  
    })
    function CreateScript(src){
        var el = document.createElement('script');
        el.src = src;
        el.async = true;
        el.defer = true;
        document.body.appendChild(el);
    }
    function jsonpcallback(rs){
        console.log(JSON.stringify(rs));
        document.getElementById("output").innerHTML = JSON.stringify(rs);
    }
</script>
</body>
</html>

<div class="mui-content mui-content-padded">
    <div class="mui-input-row">
        <label>输入关键词:</label>
        <input type="text"  id="input" placeholder="输入框"/>
    </div>
    <button id="btn" type="button" class="mui-btn mui-btn-blue mui-btn-block">翻译</button>
   <div id="output">
   </div>
</div>

Vue.js自定义指令