### Vue中的组件

首先注册组件：

        Vue.component("my-btn", {
            data:function() {
                return {
                    count:0
                }
            },
            template:"#mybtn"
        });

需要一个组件名称和组件的代码模板，组件中的数据和Vue实例的数据不同，一个组件的data选项必须是一个函数。

定义模板

    <template id="mybtn">
        <button v-on:click="count++">已经点击了{{ count }}次！</button>
    </template>

编写Vue实例，完整代码如下：


    
    <script src="https://suiyan.cc/assets/plugins/vue.js"></script>
    <template id="mybtn">
        <button v-on:click="count++">已经点击了{{ count }}次！</button>
    </template>

    <div id="app">
        <my-btn></my-btn>
        <my-btn></my-btn>
        <my-btn></my-btn>
    </div>

    <script>
        Vue.component("my-btn", {
            data:function() {
                return {
                    count:0
                }
            },
            template:"#mybtn"
        });

        vm = new Vue({
            el:'#app'
        })

    </script>

如上，就可以实现一个全局的组件注册，可以重复使用。

Vue快速学习笔记(3)Vue的组件

### Vue组件中的数据传递

父组件向子组件传递数据:

* 使用`props`属性来定义子组件的数据。
* 使用`v-bind`指令在组件中可以使父组件的数据传递到子组件中。

示例代码

    
    <script src="https://suiyan.cc/assets/plugins/vue.js"></script>
    <template id="mh">
        <h1> {{finfo}}</h1>
    </template>

    <div id="app">
        <mh finfo="子组件的数据"></mh>
        <mh :finfo="msg"></mh>
    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg:"这是父组件Vue实例中传来的消息。"
            },
            components:{
                mh:{
                    template:"#mh",
                    props:['finfo']
                }
            }
        });
    </script>


子组件向父组件传值

Vue快速学习笔记(4)Vue组件中的数据传递

### 在Vue中使用路由vue-router

1. `html`中导入vue-router.
2. 编写`router-link`和`router-view`标签代码
3. `JavaScript`中编写模板对象，定义路由对象及创建Vue实例。

具体代码参考：


    <div id="app">
        
        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>

        
        <router-view></router-view>
    </div>

    <script>
        const login = {
            template: '<h1>登录组件</h1>'
        }
        const register = {
            template: '<h1>注册组件</h1>'
        }

        // 创建一个路由示例，通过routers属性来匹配规则
        const routerobj = new VueRouter({
            routes: [{
                    path: '/',
                    redirect: '/login'
                },
                {
                    path: '/login',
                    component: login
                },
                {
                    path: '/register',
                    component: register
                }
            ]
        });
        // 穿件Vue实例
        var vm = new Vue({
            el: '#app',
            router: routerobj
        });
    </script>

Vue快速学习笔记(5)使用路由vue-router(1)


![DeepSeek](https://www.suiyan.cc/assets/images/2025/ds.png)

首先，这是一次偶然性的测评，并非专业的测评不具有代表性，仅从个人的使用感受如实记录而已，大家看看就好哈，不必太在意。

事情的起因是这样的，本来打算写一个基于next.js的小项目，用来检测孩子的英语单词默写。前一阵子DeepSeek官方经常性的无法打开，索性在本地部署DeepSeek R1 14B ,然后就是在本地询问R1如何来编写这个程序的大体框架。结果呢？令人大失所望，14B的模型在复杂一点的推理、理解、以及编程能力确实差了很多，提示词经过了10来次的修改，依然无法输出正确的代码，最后只好上线测试

## 提示词

下边这些提示词：

    我想构建一个next.js的静态页面应用，用来检测孩子的英语单词背诵结果，整个应用只有两个主要页面，请使用SSG生成静态页面，JavaScript编写，不要使用ts，文件的结尾都是.js，不要使用API，只使用静态页面即可，数据在生成静态页面的时候都加载到页面上，切记。主页，用来显示题库的列表，遍历src/data下的.json，有标题和简介用来显示。答题页面，根据src/data目录下存放的每个.json文件就是一个题库，答题页面使用SSG技术生成静态页面，每个.json都提供了题目的标题简介答题时间以及答题内容，请根据这些内容生成答题页面，答题页面的要求是：1.进入页面显示标题，简介，答题时间，按开始答题进入答题页面，开始回答问题，使用一个输入框来输入回答的英文结果，每次回答一道题，回答完成后点下一题，进入到下一道题回答，可以点上一道题返回修改，回答到最后一道题的时候，下一题显示为提交结果，进入最后的结果页面，结果页面显示标题简介，答题时间，用表格的方式显示回答结果和正确答案对比，然后进行得分计算，换算成百分制的枫树结果。不需要用户登录系统，纯静态的就可以了，只要实现考试答题的基本功能就行

    下边是一个题库：test.json的样本，你可以参考一下：
    {
        "title": "JavaScript基础题",
        "description": "JavaScript基础题，测试案例。",
        "time": 2000,
        "questions": [
          {
            "type": "简答题",
            "question": "猫咪",
            "answer": "cat"
          },
          {
              "type": "简答题",
              "question": "狗狗", 
              "answer": "dog"
          },
          {
              "type": "简答题",
              "question": "苹果", 
              "answer": "apple"
          },
          {
              "type": "简答题",
              "question": "红色", 
              "answer": "red"
          },
          {
              "type": "简答题",
              "question": "蓝色", 
              "answer": "blue"
          }
        ]
      }

然后我把些提示词，分别发送给了：DeepSeek Kimi Gemini，因为这三个模型都有思考型的大模型，他们分别给出了自己的答案。

这里能，我就不贴他们的回答了，仅从结果来进行一些简单的分析：

undefined 回复速度：Gemini>Kimi>DeepSeek ,速度来说，还是google的最快，新模型2.0flash速度真的很快！
undefined 通过率：DeepSeek>Gemini>Kimi ,DeepSeek R1 一次性通过代码检测，直接复制代码到指定文件，程序可运行，功能基本实现，界面进行了适当的美化。Gemini，首次运行出错，让其修改了一次后完美运行，没有界面的美化。Kimi提供的代码无法运行，看起来修改的话估计也得花点心思，估计得几次修改，所以也米有测试。
undefined 关于程序的建议，DeepSeek>Gemini>Kimi  
DeepSeek给出：
● 所有用户答案都存储在客户端内存中，刷新页面会丢失进度
● 没有使用任何持久化存储
● 分数计算基于简单对比，不区分大小写
● 答题时间目前仅做展示，实际使用时可以自行添加倒计时功能
其他两个模型给出的建议很一般，就不提出来了。

## 总结

DeepSeek>Gemini>Kimi ，在编写代码的准确性上，DeepSeek R1 在本次测试中胜出，Gemini的表现也不错。

附：
DeepSeek,Kimi,Gemini的官网地址：
DeepSeek：https://www.deepseek.cn/
Kimi：https://kimi-ai.com/
Gemini：https://gemini.so/




首先，这是一次偶然性的测评，并非专业的测评不具有代表性，仅从个人的使用感受如实记录而已，大家看看就好哈，不必太在意。

Vue快速学习笔记(4)Vue组件中的数据传递

Vue组件中的数据传递

相关文章

那年今日