## Vue.js 简介

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。

Vue 只关注视图层， 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

## 第一个Vue实例



    
    <script src="https://suiyan.cc/assets/plugins/vue.js"></script>

    <div id="v1" v-bind:title="title">
    {{ msg }}
    <p v-text="vtext"></p>
    <div v-html="vhtml"  v-on:click="alt"></div>

    <input type="text" v-model="tx">
    <p v-text="tx"></p>
    </div>

    <script>
        var v = new Vue({
            el: "#v1",
            data:{
                msg:"Hello Vue!",
                title:"试试把鼠标放上去。",
                vtext:"我是通过v-text绑定的数据",
                vhtml:"<h1>哈哈哈字是不是好大？",
                tx:"v-model绑定数据，修改试试吧"
            },
            methods:{
                alt :function(){
                    alert("是不是有提示了？")
                }
            }
        })
    </script>

这是一个声明式渲染 `{{ msg  }}`类似于模板便签被插在HTML中。
`v-text,v-html`是另外两种数据绑定方式。

`v-bind:title`Vue中的特殊指令，可以简写为`:title`,

`v-on:click`绑定点击事件

`v-model` 可以双向绑定数据，试试修改程序中的数据。

## MVVM

MVVM是一种架构模式，并非一种框架，是一种思想，一种组织和管理代码的艺术。它利用数据绑定、属性依赖、路由事件、命令等特性实现高效灵活的架构。

在MVVM中，View和View Controller是联系在一起，可以把它们视为一个组件，View和View Controller都不能直接引用Model，而是通过引用视图模型（ViewModel），ViewModel是存放View Controller所需要数据的地方（View Controller敢要，ViewModel就敢给），使用MVVM会轻微的增加代码量，但总体上减少了代码的复杂性、耦合性。

Vue快速学习笔记(1)Vue实例基础

### Vue中的监听

`watch`用来监听`Vue`实例中数据的变化，然后可以出发一个事件。
例如，反转字符串：



    <script src="assets/plugins/vue.js"></script>
    <div id="app">
        <input type="text" v-model="vt">
        <p v-text="nvt"></p>
    </div>

   
    <script>
       var vm = new Vue({
            el:"#app",
            data:{
                vt:"",
                nvt:""
            },
            watch: {
                vt:function(val){
                    this.nvt=this.vt.split('').reverse().join('')

                }
            },
        })

    </script>

除了 watch 选项之外，您还可以使用命令式的 vm.$watch API。


### Vue中的计算属性

计算属性和监听有些相似，有的时候作用都差不多吧。

下边的例子就是采用Vue的计算属性，

 
    <script src="assets/plugins/vue.js"></script>

    <div id="app1">
        <p>计算属性</p>
        <input type="text" v-model="vt">
        <p v-text="rtvt"></p>
    </div>

   
    <script>


        var vm1 = new Vue({
            el :"#app1",
            data:{
                vt:""
            },
            computed: {
                rtvt:function(){
                    return this.vt.split("").reverse().join("")
                }
            },

        })

    </script>


感觉计算属性要比监听简单直观些。

Vue快速学习笔记(2)Vue中的监听与计算属性

### 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的组件


从大年初一开始，DeepSeek官方的一些功能无法访问和使用，例如联网、API。今天早上测试了一下，联网的功能已经恢复了。而且API也可以使用了。

当然如果你那边的使用还是有问题，可以考虑使用纳米AI搜索的APP中选择使用DeepSeek-R1 360高速专线临时使用一下，估计DeepSeek官网会逐渐恢复开放使用。


DeepSeek API 我使用的VScode 中的插件 cline 进行了测试，已经可以使用了，速度还是不错的。但是DeepSeek官方API页面还是无法打开。

[DeepSeek服务状态](https://status.deepseek.com/) 这里可以看到DeepSeek官方的一些服务状态。

从大年初一开始，DeepSeek官方的一些功能无法访问和使用，例如联网、API。今天早上测试了一下，联网的功能已经恢复了。而且API也可以使用了。

Vue快速学习笔记(2)Vue中的监听与计算属性

Vue中的监听

Vue中的计算属性

相关文章

那年今日