【Vue | 指令实现自动翻译填充英文名功能】的更多相关文章

Vue | 指令实现自动翻译填充英文名功能

背景:应用系统中存在多个创建实体表单,表单填写时,在填写中文名称后,要填写对应的英文名作为标识或数据库查询索引. 需求:填写中文名的同时,系统自动生成英文名并填充到表单中,辅助用户操作,节约操作时间. 实现效果 方案调研 对需求进行分析后,对于如何将中文名翻译成英文字符串,调研以下方案: 调用翻译引擎 优点:翻译准确,对于短句也能翻译 缺点:部署难度大,需要捆绑翻译引擎 调用开放API(谷歌翻译/百度翻译等) 优点:能完成翻译功能 缺点:可能需要付费/开发者帐号等,需要集成成本,需要私有化部署版…

vue指令应用--实现输入框常见过滤功能

前端开发最常碰到的就是输入框,经常要做各种验证,本公司惯用的需求是直接屏蔽特定字符的输入,如禁止非数字输入,特殊符号输入,空格输入等,这些功能反复使用,做成指令的形式,直接调用,非常方便,上代码: 目录结构很简单: 1.项目文件夹里新建directives文件夹,所有指令都放在这个文件夹里 2.input-filter文件夹放具体指令,在其下建两个文件: a.inputFilter.js实现主体功能 b.index.js负责封装,职责分明 inputFilter.js代码: /** * 实现功能…

vue指令v-html中使用过滤器filters功能

Vue 2.0 不再支持在 v-html 中使用过滤器 解决方法: 1:全局方法(推荐) 2:computed 属性 3:$options.filters(推荐) 1:使用全局方法: 可以在 Vue 上定义全局方法: Vue.prototype.msg = function(msg){ return msg.replace("\n","<br>") }: 然后所有地方上都可以直接用这个方法了: <div v-html="msg(conte…

一个能拖动，能调整大小，能更新bind值的vue指令-vuedragx

一. 背景说明 开发一个可自定义组件化门户配置页面,期间采用了vue框架作为前端视图引擎,作为一个刚入手vue的萌新,开发第一个功能就遇到了拦路虎.需要一个拖动并且可改变大小的容器盒子.当时查看vue开发文档,查找github都没找到一个自己欢心的实现,所以与其求人,还不如求己.所以vuedragx这个轮子就有了,x代表它不止可拖动. github地址:https://github.com/464884492/vuedragx 二.效果图 三.开发思路 通过鼠标移动实现组件移动,改变大小,一定需…

Vue框架（一）——Vue导读、Vue实例（挂载点el、数据data、过滤器filters）、Vue指令(文本指令v-text、事件指令v-on、属性指令v-bind、表单指令v-model)

Vue导读 1.Vue框架 vue是可以独立完成前后端分离式web项目的js框架 三大主流框架之一:Angular.React.Vue vue:结合其他框架优点.轻量级.中文API.数据驱动.双向绑定.MVVM设计模式.组件化开发.单页面应用 Vue环境:本地导入和cdn导入 2.Vue是渐进式js框架 通过对框架的了解与运用程度,来决定其在整个项目中的应用范围,最终可以独立以框架方式完成整个web前端项目.3.怎么使用vue 去官网下载然后导入 <div id="app">…

Vue学习笔记【4】——Vue指令之v-on

Vue指令之v-on v-on指令介绍 直接使用指令v-on 使用简化指令@ 绑定事件代码:@事件名="methods中的方法名称" <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in…

第三篇：Vue指令

Vue指令 1.文本指令相关 v-*是Vue指令,会被vue解析,v-text="num"中的num是变量(指令是有限的,不可以自定义) v-text是原样输出渲染内容,渲染控制的标签自身内容会被替换掉( 123 会被num替换) v-html可以解析渲染html语法的内容 <div id="app"> <!-- 插值表达式 --> <p>{{ msg }}</p> <!-- eg:原文本会被msg替换 --&g…

vue2,vue指令和选项

vue特点 mvvm框架 响应式(声明式) 组件化(支持自定义组件) 丰富的指令(Dom功能的抽象) 基于选项(template,data,computed,watch,methods) vue文档集中ue Vue生态丰富且简单 渐进式() Veu和Dom开发思想 Dom开发思想:当我们需要在交互事件中改变视图时,使用DOM选择器选中目标节点.再使用DOM方法直接改变视图. Vue开发思想:当我们需要在交互事件中改变视图时,先在data选项中声明一个合适的变量,再在交互事件中改变这个声明式变量即…

给织梦DEDECMS添加栏目图片与英文名显示

开始做微网站了,不同于传统手机网站,因为微信上的微网站是支持CSS3与HTML5的,好吧,各种要学习的还有很多很多阿~这么多新代码,叹! 本来想转战帝国CMS了,奈何这名字太不对味了,PHPCMS也懒得去摸索了,就还是用这最不安全但是用户最多的DEDECMS吧. 微信上的微网站,首页一般都是用分类图片的,但是我们知道,DEDE的栏目是没有图片功能的,虽然可以把图片链接做到副标题那里,再调用.....好吧,我的分类显示英文就是用的副标题调用的.但是不行阿,时间久了也不是办法,于是只好去修改DEDE…

vue指令总结（二）

一.vue指令 1.v-text v-text是用于操作纯文本,它会替代显示对应的数据对象上的值.当绑定的数据对象上的值发生改变,插值处的内容也会随之更新.注意:此处为单向绑定,数据对象上的值改变,插值会发生变化:但是当插值发生变化并不会影响数据对象的值.其中:v-text可以简写为{{}},并且支持逻辑运算. 实例如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="…