【Web】Vue初探

梦里梦外; 2023-10-04 15:27 0阅读 0赞

## 准备 ##

安装VS Code。安装Debugger for Chrome插件。编写配置，放到.vscode目录，名字是launch.json：

{
      "version": "0.2.0",
      "configurations": [
        {
          "type": "pwa-chrome",
          "request": "launch",
          "name": "Open ${file}",
          "file": "${file}"
        }
      ]
    }

下面的示例都来自https://cn.vuejs.org/。

## 示例一 ##

<!DOCTYPE html>
    <html>
    
    <head>
      <title>My first Vue app</title>
      <script src="https://unpkg.com/vue"></script>
    </head>
    
    <body>
      <div id="app">
        {
       { message }}
      </div>
    
      <script>
        var app = new Vue({
          el: '#app',
          data: {
            message: 'Hello Vue!'
          }
        })
      </script>
    </body>
    
    </html>

运行结果（VS Code中安装Chrome插件，配置，按F5执行）：

![653b944308878017339ef789bf1abac7.png][]

按F12打开调试台，可以动态修改上述的显示：

![02426738ec5a0a00259cd0f6e0e42c01.png][]

另外，这里的<script src="https://unpkg.com/vue"></script>是外部导入的Vue，如果去掉这句，结果就没有什么意义了：

![bc430bb23692953ea38fdaf067f23f53.png][]

从这里可以看出来Vue的一些东西：Vue挂载标记（用“\{ \{\}\}”括起来）到DOM元素上，后续在Vue实例上操作标记即可，而不需要再去操作DOM（类似getElementById()），代码中的<div>成了唯一的入口。

## 示例二 ##

后续没有特殊的情况的话会去掉<html>等不重要的DOM，所以下面的代码并不是完整的，但是实际运行的结果还是完整的：

<body>
      <div id="app-2">
        <span v-bind:title="message">
          鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </span>
      </div>
    
      <script>
        var app2 = new Vue({
          el: '#app-2',
          data: {
            message: '页面加载于 ' + new Date().toLocaleString()
          }
        })
      </script>
    </body>

运行结果：

![5ba48a9a29b523df9864ad82d2148b28.png][]

鼠标停留在字符串上时会有额外提示（不过截图的时候显示不出来）。

代码中的v-bind是Vue提供的特殊指令。指令都是由“v-”开头的，它们会在渲染的DOM上应用特殊的响应式行为。这里的v-bind的意思是将title这个属性（attribute）和Vue实例的message这个Property保持一致。

这里“鼠标悬停来显示信息”是title这个属性本身的特定，属于DOM的一部分，如果没有“v-bind:”这样的代码，则悬停之后就打印“message”，而有了v-bind之后，就跟Vue中的message这个Property联系起来了，而不是简单的字符串“message”了。

从这里可以看出来Vue的一些东西：除了“\{ \{\}\}”标记的内容，特定的字符串也不是简单的字符串而已了，而是会被Vue替换掉，或者替换这个词也不准确，应该说被处理成其它的了。

## 示例三、四 ##

<body>
      <div id="app-3">
        <p v-if="seen">现在你看到我了</p>
      </div>
    
      <script>
        var app3 = new Vue({
          el: '#app-3',
          data: {
            seen: true
          }
        })
      </script>
    </body>

这里也是一个Vue指令，这次是v-if，其实就是判断seen的值，这里跟上一例一样，“seen”原本是字符串，但是到Vue里面当成变量用了，默认是true，所以会显示“现在你看到我了”这句话，但是通过浏览器的Console可以修改值，改成false，就没有显示了：

![c088a8288e260d471e1052196cbfecbc.png][]

v-if是条件判断，其它还有v-for，示例代码：

<body>
      <div id="app-4">
        <ol>
          <li v-for="todo in todos">
            {
       { todo.text }}
          </li>
        </ol>
      </div>
    
      <script>
        var app4 = new Vue({
          el: '#app-4',
          data: {
            todos: [
              { text: '学习 JavaScript' },
              { text: '学习 Vue' },
              { text: '整个牛项目' }
            ]
          }
        })
      </script>
    </body>

这里示例更明显了，v-for之后的字符串已经类似foreach里面的语句了，todos像是一个列表或者数组之类的东西（或者JSON？），在Vue实例里面进行了赋值，最终的结果：

![93e0cdb0a8a5ec98359ddb1037b5b49d.png][]

从这里可以看出来Vue的一些东西：Vue会在DOM中定义一些入口（目前看到的有“\{ \{\}\}”和字符串），可以称为“锚”吧，然后在Vue实例中操作这些“锚”，来完成最终的操作。这样的好处应该是显示（DOM）和控制操作基本完全分离了。

## 示例五 ##

<body>
      <div id="app-5">
        <p>{
       { message }}</p>
        <button v-on:click="reverseMessage">反转消息</button>
      </div>
    
      <script>
        var app5 = new Vue({
          el: '#app-5',
          data: {
            message: 'Hello Vue.js!'
          },
          methods: {
            reverseMessage: function () {
              this.message = this.message.split('').reverse().join('')
            }
          }
        })
      </script>
    </body>

这个例子中的DOM部分没有特别的差异，仅仅又学了一个Vue指令v-on:click，不过在Vue实例中，不仅有el和data，还有methods了。目前对这几个值还没有特别的了解，后续应该会深入。

## 实例六 ##

<body>
      <div id="app-6">
        <p>{
       { message }}</p>
        <input v-model="message">
      </div>
    
      <script>
        var app6 = new Vue({
          el: '#app-6',
          data: {
            message: 'Hello Vue!'
          }
        })
      </script>
    </body>

这里是另外的一个Vue指令v-model，它能实现表单输入和应用状态之间的双向绑定。执行结果：

![941a15213ca0c40536506d985ef145e2.png][]

修改输入框中的内容，上面的显示也会实时地改变，但是所谓地双向目前是看不出来。

## 组件 ##

组件系统是Vue的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：

![59be9123e9125a017ba4f9d5462bd7c9.png][]

在Vue里，一个组件本质上是一个拥有预定义选项的一个Vue实例。下面是一个例子：

// 定义名为 todo-item 的新组件
    Vue.component('todo-item', {
      template: '<li>这是个待办项</li>'
    })
    
    var app = new Vue(...)

这里创建了一个名为“todo-item”的组件，它用起来就像一个DOM的元素节点，如下代码所示：

下面是一个完整地例子：

<body>
      <div id="app-7">
        <ol>
          
          <todo-item
            v-for="item in groceryList"
            v-bind:todo="item"
            v-bind:key="item.id">
          </todo-item>
        </ol>
      </div>
    
      <script>
        Vue.component('todo-item', {
          props: ['todo'],
          template: '<li>{
       { todo.text }}</li>'
        })
    
        var app7 = new Vue({
          el: '#app-7',
          data: {
            groceryList: [
              { id: 0, text: '蔬菜' },
              { id: 1, text: '奶酪' },
              { id: 2, text: '随便其它什么人吃的东西' }
            ]
          }
        })
      </script>
    </body>

相比前面的组件示例，这里的多了一个props，它是组件的属性，类似于DOM元素节点的属性，本例中属性的名称是todo。目前还看不懂这个代码，比如说为什么有个key？后续应该会有介绍。最终执行的结果：

![71dd89646044748bf30a01d178efae75.png][]

从这里可以看出来Vue的一些东西：Vue的组件似乎就是自定义的DOM元素节点，方便将网页细分，更易于开发和管理。但相比于DOM元素节点的优势：元素节点是规范，虽然定义了但是也不是所有浏览器都支持；Vue组件相比于DOM元素节点有更多的特定，后面会介绍。

[653b944308878017339ef789bf1abac7.png]: https://img-blog.csdnimg.cn/img_convert/653b944308878017339ef789bf1abac7.png
[02426738ec5a0a00259cd0f6e0e42c01.png]: https://img-blog.csdnimg.cn/img_convert/02426738ec5a0a00259cd0f6e0e42c01.png
[bc430bb23692953ea38fdaf067f23f53.png]: https://img-blog.csdnimg.cn/img_convert/bc430bb23692953ea38fdaf067f23f53.png
[5ba48a9a29b523df9864ad82d2148b28.png]: https://img-blog.csdnimg.cn/img_convert/5ba48a9a29b523df9864ad82d2148b28.png
[c088a8288e260d471e1052196cbfecbc.png]: https://img-blog.csdnimg.cn/img_convert/c088a8288e260d471e1052196cbfecbc.png
[93e0cdb0a8a5ec98359ddb1037b5b49d.png]: https://img-blog.csdnimg.cn/img_convert/93e0cdb0a8a5ec98359ddb1037b5b49d.png
[941a15213ca0c40536506d985ef145e2.png]: https://img-blog.csdnimg.cn/img_convert/941a15213ca0c40536506d985ef145e2.png
[59be9123e9125a017ba4f9d5462bd7c9.png]: https://img-blog.csdnimg.cn/img_convert/59be9123e9125a017ba4f9d5462bd7c9.png
[71dd89646044748bf30a01d178efae75.png]: https://img-blog.csdnimg.cn/img_convert/71dd89646044748bf30a01d178efae75.png