Vue学习（一）_vuwxim-CSDN博客

本文链接：https://blog.csdn.net/qq_45976392/article/details/118741314

本文介绍了如何使用Vue 2.5.21构建简单应用，包括文本插值、v-bind指令、条件与循环展示、v-for遍历数组、用户输入处理和组件化开发。通过实例演示了Vue的数据绑定和组件传递，是初学者理解Vue基础的好资料。

摘要由CSDN通过智能技术生成

Vue

Vue是一套用于构建用户界面的渐进式框架

第一个Vue程序`声明式渲染`

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
        {{message}}
    </div>

    <script type="text/javascript">
      var vm = new Vue({
        el: "#app",
        data: {
          message: "hello,vue!",
        },
      });
    </script>
  </body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wn86vJJU-1626319324649)(C:\Users\VV\AppData\Roaming\Typora\typora-user-images\image-20210714235528218.png)]$

除了文本插值还可以这样绑定元素attribute：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
  </head>
  <body>
    <div id="app-2">
      <span v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
      </span>
    </div>

    <script type="text/javascript">
      var app2 = new Vue({
        el: "#app-2",
        data: {
          message: "页面加载于 " + new Date().toLocaleString(),
        },
      });
    </script>
  </body>
</html>

v-bind attribute 被称为指令，指令带有前缀 v-，表示它们是Vue提供的特殊的attribute ，它们会在渲染的DOM上应用特殊的响应式行为，这里，该指令的意思是：“将这个元素的titileattribute 和Vue实例的messageproperty保持一致”

如果再次打开浏览器的Javascript控制台，输入app2.message = '新消息'，就会再一次看到这个绑定了titileattribute的HTML进行了更新。

条件与循环

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
  </head>
  <body>
    <div id="app-3">
      <p v-if="seen">现在你能看到我</p>
    </div>

    <script type="text/javascript">
      var app3 = new Vue({
        el: "#app-3",
        data: {
          seen: true,
        },
      });
    </script>
  </body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ce2fV59N-1626319324651)(C:\Users\VV\AppData\Roaming\Typora\typora-user-images\image-20210715102029422.png)]$

加入在控制台输入app.seen=false，你会发现之前显示的信息消失。

这个例子演示了不仅可以把数据绑定在DOM文本或attribute，还可以绑定到DOM结构。此外，Vue也提供了一个强大的过渡效果系统，可以在Vue插入/更新/移除元素时自动应用过渡效果

v-for指令可以绑定数组的数据来渲染一个项目列表：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
  </head>
  <body>
    <div id="app-4">
      <ol>
          <li v-for="todo in todos">
                {{todo.text}}
          </li>
      </ol>
    </div>

    <script type="text/javascript">
      var app4 = new Vue({
        el: "#app-4",
        data: {
          todos:[
            {text:'学习语文'},
            {text:'学习数学'},
            {text:'学习英语'}
          ]
        },
      });
    </script>
  </body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UYeW9lPe-1626319324653)(C:\Users\VV\AppData\Roaming\Typora\typora-user-images\image-20210715102820619.png)]$

在控制台里，输入app4.todos.push({text:'新项目'}),你会发现列表最后添加了一个新的项目

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-keOK5UoN-1626319324655)(C:\Users\VV\AppData\Roaming\Typora\typora-user-images\image-20210715103020933.png)]$

处理用户输入

为了让用户和你的应用进行交互，我们可以用v-on指令添加一个事件监听器，通过它调用在Vue实例中定义的方法：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
  </head>
  <body>
    <div id="app-5">
      <p>{{message}}</p>
      <button v-on:click="reverseMessage">反转消息</button>
    </div>

    <script type="text/javascript">
      var app5 = new Vue({
        el: "#app-5",
        data: {
          message: "Hello Vue.js!",
        },
        methods: {
          reverseMessage: function () {
            this.message = this.message.split("").reverse().join("");
          },
        },
      });
    </script>
  </body>
</html>

可以看到点击按钮后的效果是这样：
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LuBkkbnQ-1626319324658)(C:\Users\VV\AppData\Roaming\Typora\typora-user-images\image-20210715103833042.png)]$

在reverseMessage方法中，我们更新了应用的状态，但没有触碰DOM–所有的DOM操作都由Vue来处理，编写的代码只需要关注逻辑层面

Vue还提供了v-model指令，它能轻松实现表单输入和应用状态之间的双向绑定。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
  </head>
  <body>
    <div id="app-6">
      <p>{{message}}</p>
      <input v-model="message">
    </div>

    <script type="text/javascript">
      var app6 = new Vue({
        el: "#app-6",
        data: {
          message: "Hello Vue!",
        },
      });
    </script>
  </body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A4rgmZ1s-1626319324659)(C:\Users\VV\AppData\Roaming\Typora\typora-user-images\image-20210715104719774.png)]$

p标签的值会跟着输入栏的变化实时变化

组件化应用构建

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-59StM5c0-1626319324660)(C:\Users\VV\AppData\Roaming\Typora\typora-user-images\image-20210715105132100.png)]$

在Vue里，一个组件本质上是一个拥有预定义选项的一个Vue实例。在Vue中注册组件的方法：

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

var app = new Vue(...)

现在可以用它构建另一个组件模板：

<ol>
  <!-- 创建一个 todo-item 组件的实例 -->
  <todo-item></todo-item>
</ol>

但是这样会为每个代办项渲染相同的文本，所以我们应该能从父作用域将数据传到子组件才对。所以我们修改一下组件的定义，使之能够接受一个prop:

Vue.component('todo-item', {
  // todo-item 组件现在接受一个
  // "prop"，类似于一个自定义 attribute。
  // 这个 prop 名为 todo。
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

我们可以使用v-bind指令将待办项传到循环输出的每个组件中：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
  </head>
  <body>
    <div id="app-7">
      <ol>
        <!--
      现在我们为每个 todo-item 提供 todo 对象
      todo 对象是变量，即其内容可以是动态的。
      我们也需要为每个组件提供一个“key”，稍后再
      作详细解释。
    -->
        <todo-item
          v-for="item in groceryList"
          v-bind:todo="item"
          v-bind:key="item.id"
        >
        </todo-item>
      </ol>
    </div>

    <script type="text/javascript">
      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>
</html>