vue.js国际化 vue-i18n插件的使用详解


Posted in Javascript onJuly 07, 2017

安装方法

1.使用CDN直接引用

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

2.NPM

$ npm install vue-i18n

3.Yarn

$ yarn add vue-i18n

使用方法

在这里只介绍vue的使用方法

<script>
/* 国际化使用规则 */
import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const messages = {
 en: {
  message: {
   hello: 'world hello'
  }
 },
 zh: {
  message: {
   hello: '世界'
  }
 }
}

const i18n = new VueI18n({
 locale: 'zh',
 messages
})

export default {
 data () {
  return {
   hello: this.$t('message.hello')
  }
 },
 i18n
}

</script>

HTML

<div id="#app">
 <p>{{ $t("message.hello") }}</p>
</div>

vue-i18n插件使用参考文档

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
extjs 学习笔记(一) 一些基础知识
Oct 13 Javascript
JavaScript中的Array对象使用说明
Jan 17 Javascript
jquery的flexigrid无法显示数据提示获取到数据
Jul 19 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
Aug 12 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
Aug 27 Javascript
一个JavaScript获取元素当前高度的实例
Oct 29 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
Jan 28 Javascript
整理Javascript事件响应学习笔记
Dec 02 Javascript
jquery及js实现动态加载js文件的方法
Jan 21 Javascript
JS实现点击Radio动态更新table数据
Jul 18 Javascript
JavaScript中创建原子的方法总结
Aug 26 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
Nov 05 Javascript
javascript ES6 新增了let命令使用介绍
Jul 07 #Javascript
微信小程序之绑定点击事件实例详解
Jul 07 #Javascript
分享19个JavaScript 有用的简写写法
Jul 07 #Javascript
Vue.js数据绑定之data属性
Jul 07 #Javascript
js实现从左向右滑动式轮播图效果
Jul 07 #Javascript
JavaScript实现图片无缝滚动效果
Jul 07 #Javascript
详解在Vue中如何使用axios跨域访问数据
Jul 07 #Javascript
You might like
PHP_MySQL教程-第一天
2007/03/18 PHP
什么是MVC,好东西啊
2007/05/03 PHP
PHP MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
在smarty模板中使用PHP函数的方法
2011/04/23 PHP
thinkPHP+ajax实现统计页面pv浏览量的方法
2017/03/15 PHP
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
jquery 删除字符串最后一个字符的方法解析
2014/02/11 Javascript
jquery序列化表单以及回调函数的使用示例
2014/07/02 Javascript
一个JavaScript防止表单重复提交的实例
2014/10/21 Javascript
浅谈javascript 函数内部属性
2015/01/21 Javascript
JavaScript中的Promise使用详解
2015/06/24 Javascript
基于jquery实现瀑布流布局
2020/06/28 Javascript
JavaScript的设计模式经典之代理模式
2016/02/24 Javascript
js实现文字截断功能
2016/09/14 Javascript
JavaScript正则表达式实例详解
2016/10/16 Javascript
基于JavaScript实现本地图片预览
2017/02/08 Javascript
详解Vue微信公众号开发踩坑全记录
2017/08/21 Javascript
JS常见构造模式实例对比分析
2018/08/27 Javascript
在vue项目中引用Iview的方法
2018/09/14 Javascript
js tab栏切换代码实例解析
2019/09/03 Javascript
微信跳一跳python辅助脚本(总结)
2018/01/11 Python
运行django项目指定IP和端口的方法
2018/05/14 Python
说说如何遍历Python列表的方法示例
2019/02/11 Python
深入了解Python iter() 方法的用法
2019/07/11 Python
6行Python代码实现进度条效果(Progress、tqdm、alive-progress​​​​​​​和PySimpleGUI库)
2020/01/06 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
使用Python3 poplib模块删除服务器多天前的邮件实现代码
2020/04/24 Python
PyQt5结合matplotlib绘图的实现示例
2020/09/15 Python
python实现数据结构中双向循环链表操作的示例
2020/10/09 Python
HTML5新特性之type=file文件上传功能
2018/02/02 HTML / CSS
超市开业庆典策划方案
2014/05/14 职场文书
安全生产宣传标语
2014/06/06 职场文书
群众路线个人对照检查材料2014
2014/09/26 职场文书
小学校长个人总结
2015/03/03 职场文书
Javascript中的解构赋值语法详解
2021/04/02 Javascript
DE1103使用报告
2022/04/05 无线电