### 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)


最近在读一本哲学入门的书：《苏菲的世界》，今天刚好读到苏格拉底那章。我有个习惯，就是当我觉得书中某段内容很有趣的时候，就会读给孩子听。

>我们知道苏格拉底生于雅典，他有生之年大半时间都在市中心广场与市场等地与他遇见的人闲谈。他说："乡野的树木不能教我任何东西。"有时他也会连续好几小时站着思想、发呆。

当我把这段文字读给孩子听时，孩子显得非常不耐烦，并且很快就把话题转移到我脚丫子很臭的事情上了。好吧，每次只要她对我说的事情不感兴趣，就会想办法转移话题，这件事我早已经习惯了。打游戏或是看《斗罗大陆》的时候，她从没提起过这么一回事，哪怕是一边看电视一边吃东西都不会提。


书中，苏菲刚好14岁，比我家孩子大一岁，但是苏菲却表现出了对哲学浓厚的兴趣，以至于我产生了对当下教育体制深深的忧虑。但也不排除孩子确实对哲学没有兴趣的可能性，因为随便和人谈起苏格拉底，这个话题肯定没有当前的微博或抖音热门话题来得更有趣。


的确如此，看完这章之后，我扫了一眼评论：

![认证](https://suiyan.cc/assets/images/2025/0211.jpg)

当我看完苏格拉底这章之后，我对这本书的兴趣才刚刚燃起。之前我读的时候是很勉强的，但是随着小苏菲收到的信越来越多，内容越来越深入哲学的本质和核心问题，我也和她一样开始思考和着迷了。

看这本书之前，我并不是对哲学很感兴趣，只是觉得思考是一件很有趣的事情。最近几天，看了一些书还有一些博文之后，我发现所谓的思考其实就是在了解世界和人的本质，这和哲学的目的几乎是一样的。所以，有一天我就和Kimi聊起了哲学，并让Kimi推荐一些哲学方面的入门书籍。我并不打算深入系统地学习哲学，只是对哲学感兴趣而已。


因为哲学家们大多都是疯子、叛逆者，而我只是一个普通人而已。我只是希望换一种思维方式去思考问题罢了。


书中的开篇提到了哲学最初的起源，大体就是古希腊时期，人们开始思考并质疑世界的起源。当时人们普遍相信世界是由神创造的，人们相信神话，但是有一些人开始质疑神话的真实性，自然派哲学家就是在这个时候出现的。自然派哲学家在那个时候就像是一群疯子。你想象一下，我们现在的人都知道地球是一个球体，是太阳系的一员，宇宙浩瀚无边，而突然有一天，有人说地球其实是一个巨大的汉堡包，太阳系就是一家快餐店……那么你一定会觉得这个人疯了！


哲学家就是这样的一群人，但是他们并不是胡说八道，而是通过观察和理性思考得出的结论。


我们或许不用再去争论世界的由来与人类的起源，这些都是书本上可以找到答案的，我们甚至可以通过AI更方便地得到你要的答案。但是，随着人类生活的巨变，新的问题也应运而生，其中一个例子就是人工智能。机器人最终会获得意识或自知力吗？人脑如何运作？人类和机器的区别是什么？甚至，离我们更近的问题：如果有一天我们死了，我们的博客怎么办？会不会考虑把所有的数据都喂给大模型，然后让大模型模拟我们，每隔一定时间发布一篇博文，让AI生成的我和来访者互动，让这个博客继续以我的习惯和思维方式演变运作下去？


哲学的起源是早于科学的，有很多无法解释的科学现象都可以用哲学来解释，而且这些哲学解释有很多都被后来的科学所证实了。


也许这就是哲学的魅力所在吧。这是本让我慢慢去读的书，因为书中有很多内容需要我去思考和理解。也许，我会带着问题和苏菲一起成长，一起思考和探索。哲学就是让我们像孩子一样去好奇地探索和思考这个世界的本质，去质疑和批判。

当苏格拉底遇见青春期少女，哲学的光芒能否穿透脚丫子的阴影？

苏格拉底不如脚丫子


![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组件中的数据传递

相关文章

那年今日