Vue自学官方文档入门【一】

最新推荐文章于 2024-08-07 09:50:55 发布

FrequencyStar

最新推荐文章于 2024-08-07 09:50:55 发布

阅读量416

点赞数

分类专栏： Vue官方文档入门文章标签： vue

本文链接：https://blog.csdn.net/FrequencyStar/article/details/107677370

版权

Vue官方文档入门专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Vue入门之一

1、介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2、起步

可以通过下面的CDN引入Vue（入门过程中暂时不使用vue-cli）

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

3、声明式渲染

Vue的核心是一个允许采用简洁模板语法来声明式地将数据渲染进DOM的系统

文本插值

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 要在下面的vue对象新建之前引入 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <h1 id="app">{{message}}</h1>

    <script>
      let vue = new Vue({
        el: '#app',
        data: {
          message: 'hello vue'
        }
      })
    </script>
  </body>
</html>

在这里插入图片描述

绑定元素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/dist/vue.js"></script>
  </head>
  <body>
    <h1 id="app">
      <span v-bind:title="message">鼠标悬停查看信息</span>
    </h1>

    <script>
      let vue = new Vue({
        el: '#app',
        data: {
          message: '页面加载于' + new Date().toLocaleString()
        }
      })
    </script>
  </body>
</html>

在这里插入图片描述

4、条件与循环

v-if和v-for

v-if ：当seen是true时，h1标签显示，是false时，h1标签隐藏。

<!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/dist/vue.js"></script>
  </head>
  <body>
    <h1 id="app" v-if="seen">你能看到我吗？</h1>

    <script>
      let vue = new Vue({
        el: '#app',
        data: {
          seen: true
        }
      })
    </script>
  </body>
</html>

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/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <ol>
        <li v-for="(todo, index) in todos" :key="index">
          {{todo.text}}
        </li>
      </ol>
    </div>

    <script>
      let vue = new Vue({
        el: '#app',
        data: {
          todos: [{ text: 'Java' }, { text: 'Vue' }, { text: 'Python' }]
        }
      })
    </script>
  </body>
</html>

在这里插入图片描述

5、处理用户输入

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/dist/vue.js"></script>
  </head>
  <body>
    <h1 id="app">
      <span>{{message}}</span><br />
      <button v-on:click="reverseMessage">逆转消息</button>
    </h1>

    <script>
      let vue = new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue.js'
        },
        methods: {
          /*
           * Vue methods中使用箭头函数要注意，this的指向
           */
          // reverseMessage: () => {
          //   console.log(this) //这里this指向windows
          //   vue.message = vue.message.split('').reverse().join('')
          // }

          reverseMessage: function () {
            console.log(this) //这里this指向vue
            this.message = this.message.split('').reverse().join('')
          }
        }
      })
    </script>
  </body>
</html>

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/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <span>{{message}}</span><br />
      <input type="text" v-model="message" />
    </div>

    <script>
      let vue = new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue.js!'
        }
      })
    </script>
  </body>
</html>

在这里插入图片描述

6、组件化应用构建

组件系统是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/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <ul>
        <todo-items
          v-for="(item, index) in groceryList"
          v-bind:key="item.id"
          v-bind:todo="item"
        ></todo-items>
      </ul>
    </div>

    <script>
      Vue.component('todo-items', {
        props: ['todo'],
        template: `<li>{{todo.text}}</li>`
      })
      let vue = new Vue({
        el: '#app',
        data: {
          groceryList: [
            { id: 0, text: '今天要早起' },
            { id: 1, text: '吃午饭' },
            { id: 2, text: '早睡' }
          ]
        }
      })
    </script>
  </body>
</html>

FrequencyStar

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue自学官方文档入门【一】

Vue入门之一1、介绍Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。2、起步可以通过下面的CDN引入Vue（入门过程中暂时不使用vue-cli）&lt
复制链接

扫一扫