Git Product home page Git Product logo

v2.cn.vuejs.org's Introduction

Vue 2 中文文档

⚠️ 此仓库是 Vue 2 的文档,部署在 v2.cn.vuejs.org,已处于维护模式。

Vue 3 的中文文档请移步至 https://github.com/vuejs-translations/docs-zh-cn

该站点基于 Hexo 构建而成。网站内容在 src 文件夹内,格式为 Markdown。欢迎 issue 或 pull request。

英文原版仓库地址:https://github.com/vuejs/v2.vuejs.org

开发

$ pnpm install
$ pnpm start # 开发服务器地址为 http://localhost:4000

部署

该站点通过 CircleCImaster 分支进行自动部署。

如何参与贡献

目前网站处于维护状态,我们会定期同步英文版的更新,包括文档内容前端代码等。欢迎大家:

  • 同步英文站点最新的改动到这里
  • 修复错别字或错误的书写格式
  • 发 issue 讨论译法或书写格式
  • 发 issue 讨论部署或协作流程上的问题

有劳在翻译之前移步 wiki 了解相关注意事项。

注意:

  1. 原则上这里只进行英文版对应的翻译工作,如果觉得原文有改进之处,或任何不仅针对中文版,而受益所有语言版本的想法,建议直接在英文版仓库讨论。
  2. 原则上这里不适合讨论 Vue 的使用问题,建议相关问题在 Vue 的官方论坛 (英文)、聊天室 (英文) 或各大主流技术社区讨论,以便得到更多人的帮助和更充分的讨论。

致谢

网站在创立之初得到了很多朋友们的帮助,大家一起分工协作完成了整站的翻译工作。这个页面集中记录了大家这段时期的努力和付出,以表谢意!

感谢所有参与翻译的朋友们!

目前网站已处于维护状态,最新的文档/翻译贡献情况可以参阅 GitHub 提供的 contributors 页面。

v2.cn.vuejs.org's People

Contributors

70data avatar atlgo avatar azamat-sharapov avatar bhnddowinf avatar byog avatar chrisvfritz avatar dear-lizhihua avatar dependabot-preview[bot] avatar dependabot[bot] avatar dingyiming avatar fadymak avatar hilongjw avatar jinjiang avatar justineo avatar kazupon avatar kingmario avatar leomarx avatar linusborg avatar marktinsley avatar marshcat0 avatar mlyknown avatar nataliatepluhina avatar phanan avatar posva avatar tolerious avatar veaba avatar vue-bot avatar yanxyz avatar yongbolv avatar yyx990803 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

v2.cn.vuejs.org's Issues

关于HTML特性的数据绑定问题

文档中有这样一句话:

注意在 Vue.js 指令和特殊特性内不能用插值

请问这里的 和特殊特性 指的是哪些特性?
多谢~~~

v-on:keyup.enter方法不支持空格结束的输入

刚开始学习vue发现这样一个问题,v-on:keyup.enter 只支持以enter键结束的输入方式,如果是空格键结束的输入是不能捕获的,但是改成v-on:keyup后是会监听的任意按键的,但是是实时的,是否可以在v-on:keyup.enter方法的处理上加上对空格按键的识别。(操作系统:OS X EI Caption,版本10.11.4,浏览器:chrome 版本 50.0.2661.86 (64-bit))

我的 review 备忘

因为改动和建议都是很小的一部分,整体发和单个发 MR 都不太合适,这里直接备忘吧,大家认同之后谁更新都不重要了:

翻译建议:

  • themes/vue/layout/index.ejs
    • L121:多了一个字母 B
  • guide/index.md
    • L155:综合 -> 现在都放到一起
    • L226:我知道你现在有许多疑问——继续阅读,在后面的教程将一一解答 -> 我知道你现在还有很多疑问——请继续读下去,我们在后面的教程里都进行了阐述。 (主语前后不一致,不能省略)

术语的几种译法提议:

  • reactive:可反应的 | 主动响应 | 自驱动 (坦白讲我自己觉得 vue.js 是数据驱动的,这里描述的挺准确的,但不完全算 reactive 吧?也许是我对 reactive 这个词的理解不对……)
  • computed property:经过计算的属性 | 可推导的属性 (译作“计算属性”时这里的直觉是“计算”是动词)

还在陆续看,看到之后就更新到这条 issue,不另外开了

有翻译2.0的计划么?

vue已经更新到了2.0版本了,而网站上的还是1.0版本的文档,请问有翻译计划吗?

搜索

需要我去跟 algolia 那边沟通。

number 参数特性的问题

guide/forms.md

如果想自动将用户的输入保持为数字,可以添加一个特性 number:

输入了除数字外的字符,并没有保持为数字呢

css-style autoprefixer 失效

您好,最近在了解vue,遇到一个问题:如题描述,厂商前缀没有生效不是为何,

纯内嵌

经vue编译渲染后,没有达到预期效果,望指教

“介绍”页 代码少一个闭合标签

介绍页面 http://cn.vuejs.org/v2/guide/
官网上面少了个</script> 闭合标签(第一张图),但是点击页面底部的“发现错误或想贡献文档? 在 Github 编辑此页!”,却发现GitHub上面相应的index.md文档是正确的(第二张图)。
是格式没有转换正确还是?另外两者的内容似乎不太相同(截图中代码的前一段最后一句)。

image

image

一处翻译的讨论

在“对比其他框架”中:

英文版:Interestingly, quite a few Angular 1 issues that are non-existent in Vue are also addressed by the design decisions in Angular 2.
中文版:有意思的是,Angular 1 的许多问题(Vue 没有)也因为 Angular 2 的设计决定而解决。

中文版有点不知所云,我的理解是:有意思的是许多 Angular 1 中存在而 Vue 中不存在的问题,依旧出现在了 Angular 2 的设计方案中。

不过我目前还没使用过 Angular 1 和 Angular 2,所以不是很清楚翻译得对不对。

Render 函数翻译疑异

原翻译:

template 在这种场景中就表现的有些冗余了。虽然我们重复使用 来接收每一个级别的标题标签,在标题标签中添加相同的锚点元素。但是些都会被包裹在一个无用的 div 中,因为组件必须有根节点。

原文:

That template doesn’t feel great. It’s not only verbose, but we’re duplicating for every heading level and will have to do the same when we add the anchor element. The whole thing is also wrapped in a useless div because components must contain exactly one root node.

翻译意译很多,不够准确。不包含虽然,但是的句式。并不接收标题,仅仅接收描点元素。这个是翻译的错误。

<anchored-heading :level="1">
  <a name="hello-world" href="#hello-world">
    Hello world!
  </a>
</anchored-heading>

替换slot的是这个部分:

 <a name="hello-world" href="#hello-world">
    Hello world!
  </a>

建议:
在这种场景中使用template并不是最好的选择:首先代码冗长,为了在不同级别的标题中插入锚点元素,我们需要重复地使用 <slot></slot>;其次由于组件必须有根节点,标题和锚点元素被包裹在了一个无用的 div 中。

部署到国内服务器

@yanxyz @Jinjiang

最近有同学反映 GitHub pages 从国内访问很慢,考虑能不能把中文官网部署在国内。

  1. 只需要静态资源服务器即可
  2. 需要修改 Makefile 部署脚本
  3. 我来修改 DNS 指向

不知两位谁有时间/兴趣帮个忙。社区如果有同学愿意帮忙也欢迎。

请问 Vue 2.0 的翻译是否可以合并进来?

最近得到了尤大的推广,我们进行的 Vue 2.0 翻译工作有了很强的推动力,目前翻译基本完成,还在进行进一步的校对工作,不知道我们是否可以合并到cn.vuejs.org 中 ?

demo有误

自定义指令-指令实例属性中的示例:

<div id="demo" v-demo:hello.a.b="msg"></div>

应为

<div id="demo" v-demo:#000.a.b="msg"></div>

否则文字是白色的,背景也是白色的。一开始还以为指令没有生效。

列表渲染出来的多个勾选框绑定到同一数组目测有bug

在线demo

`

<script src="http://cn.vuejs.org/js/vue.js"></script>
    <div id="wrap">
        <ul>
            <li v-for="item in checkbox">
                {{item.question}}
                <ul >
                    <li v-for="option in item.options">
                        <label>
                            <input value="{{option.val}}" v-model="answers[$parent.$index]" type="checkbox">
                            {{option.desc}}
                        </label>
                    </li>
                </ul>
            </li>
        </ul>
        <button v-on:click="dump">log</button>
    </div>
    <script>
        new Vue({
            el:"#wrap",
            data:{
                checkbox:[
                    {
                        'question':'question1',
                        'options':[
                            {'desc':'optionA1','val':'A'},
                            {'desc':'optionB1','val':'B'},
                            {'desc':'optionC1','val':'C'},
                        ],
                    },
                    {
                        'question':'question2',
                        'options':[
                            {'desc':'optionA2','val':'A'},
                            {'desc':'optionB2','val':'B'},
                            {'desc':'optionC2','val':'C'},
                        ],
                    },
                    {
                        'question':'question3',
                        'options':[
                            {'desc':'optionA3','val':'A'},
                            {'desc':'optionB3','val':'B'},
                            {'desc':'optionC3','val':'C'},
                        ],
                    },


                ],
                answers:[],
            },
            methods:{
                dump:function(){
                    console.log(this.answers)
                }
            },
            ready:function(){
                var len = this.checkbox.length;
                for(var i=0;i<len;i++){
                    this.answers[i] = [];
                }
            }

        });

    </script>

`

根据多个勾选框,绑定到同一个数组这个例子写的,在ready的时候根据checkbox的组数把answers中对应的项初始化为一个空array,每一个空array对应教程中的checkedNames,但是当点击任意一个checkbox的时候,其绑定的array转换成了bool,选择其它的checkbox对应的array依然保持array类型,并能向官网demo中的一样正常绑定到同一个数组中。

目测是bug。

好像导航栏的下拉列表在中文状态下显示效果不好

image

修改后:

image

主要改动:

#nav li {
    display: inline-block;
    position: relative;
    margin: 0 0.6em;
+    min-width: 3em; /* 改善拥挤 */
}

+li.nav-dropdown-container {
+    width: 5em; /* 修复聊天室显示不全 */
+}

#nav .nav-dropdown {
    /* display: none; */
    position: absolute;
    top: 100%;
-     left: 0;
+    left: -30%; /* 改善贴边 */
    background-color: #fff;
    padding: 10px 0;
    border: 1px solid #ddd;
    border-bottom-color: #ccc;
    text-align: left;
    border-radius: 4px;
}

请问如何 PR? 咱们的样式表是用的 stylus 么?

我的想法是,有没有啥办法,可以把中文站定制的内容与主站样式表分开?这样每次从主站 merge 会比较方便吧(如果需要 merge 的话)。

亲们,觉得呢?

vuejs.org.cn的证书链不完整,ssl配置存在问题

之前尝试把vuejs.org.cn添加到https everywhere的时候发现的...
现在vuewjs.org.cn用的le的证书,但是貌似没有包含let's encrypt authority x3这一中级证书,所以在没有缓存该证书的设备上浏览会出现警告,
用ssllabs检查过后发现除此之外还有一些别的问题,希望修正。
https://www.ssllabs.com/ssltest/analyze.html?d=vuejs.org.cn

另外www.vuejs.org.cn好像没出现在证书san中,可以考虑去掉这个域名或者用le重新生成一下...

需要更新中文文档了吧

1.0 版本出来了,感觉中文这边还是0.12的文档。

例如 repeat貌似被去除了,很多人都不知道呢。

数据绑定的时候msg=1;{{msg++}}变成了102

html代码:

<div id="app">
    <p>Message: {{msg++}}</p>
</div>

JS代码:

var vm1 = new Vue({
    el: "#app",
    data: {
        msg : 1,
        dynamicId: "test",
        someDynamicCondition: true
    }
})

输出结果:

Message: 102

描述:如果把html中的 {{msg++}} 变成 {{msg+1}}
输出:Message: 2

中文翻译计划提议

如题,在正式开始翻译之前,想提一下自己的想法

我留意到 1.x 的文档和之前的 0.x 相比改动还是比较大的,不论是文件结构还是文档内容。我个人倾向的翻译流程是:

  1. 从 1.0.0 @fe8c5246ab5bffedd64c17be1456faa5e0b7f8c3 开始创建一个 1.0.0-zh 的分支,开始翻译,翻译好之后发布到 http://cn.vuejs.org
  2. 在有大版本发布之前,翻译上的改动都延续使用这个分支
  3. 之后每次版本发布,都:
    1. 先从原版开新的分支,如 1.0.1-zh
    2. 然后 merge 之前的 *-zh 分支 (需不需要持续在中英文间 merge?)
    3. 再 diff 两个原版 hash 之间的差异,比如这样比较 1.0.0 和 1.0.1 的差异
    4. 针对差异内容进行翻译和发布

另外:

  • 分工的时候可以按照页面级别在 wiki 中列出来,然后号召更多的人来 issues 里认领
  • 术语是否需要整理并统一译法?

select绑定value时,value不为数值

http://vuejs.org.cn/guide/forms.html#Select-Options

在用vue的时候 遇到一个select绑定“非数字”值,无法绑定的问题。

我的option里的value不是数字。

SORRY附上代码:
有问题代码:

<html>

<div >
    <select id="app" v-model="selected">
      <option >
        <option v-bind:value="A">A</option>
        <option v-bind:value="B">B</option>
      </option>
    </select>
</div>


<script type="text/javascript" src="vue.js">

</script>

<script type="text/javascript">
new Vue({
      el: '#app',
      data: {
        selected: 'B'
      }
    })
</script>
</html>

OK的代码:

<html>

<div >
    <select id="app" v-model="selected">
      <option >
        <option v-bind:value="1">1</option>
        <option v-bind:value="2">2</option>
      </option>
    </select>
</div>


<script type="text/javascript" src="vue.js">

</script>

<script type="text/javascript">
new Vue({
      el: '#app',
      data: {
        selected: '2'
      }
    })
</script>
</html>

官网文档与master分支不同步

master分支上已经完成的一些翻译没有在官网上体现出来。希望能够及时更新官网的文档, 避免引起学习时
的歧义。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.