开发者社区> ArimaMisaki> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

一幅长文细学Vue(二)——Vue基础入门

简介: 在本文中,我们会快速地入门Vue。主要了解的是Vue各种指令语法。
+关注继续查看

2 Vue基础入门

摘要

​ 在本文中,我们会快速地入门Vue。主要了解的是Vue各种指令语法。

声明:为了文章的清爽性,在文章内部的代码演示中只会附上部分演示代码。

作者:来自ArimaMisaki创作

[TOC]

2.1 概述

2.1.1 单文件组件

说明:在Vue项目中我们常常将一整个项目拆分成多个组件。举一个比较生动的例子,我们将要用积木制作一个超级玛丽,那我们需要将一个超级玛丽分为头、身子、脚等一系列组件。在后续的开发中,如果我们还想做一个不一样的超级玛丽,则我们可以找找以往的组件,看看有没有组件可以复用。

在Vue项目中,组件以.vue的文件形式存在。它也被成为单文件组件。其结构分为template、css、script。


2.1.2 API风格

说明:Vue的组件可以按照两种不同的风格进行书写:选项式API组合式API

选项式API:如果使用选项式API,我们可以用包含多个选项对象来描述组件的逻辑。选项有很多种,我们会在后续一一介绍。在初级学习阶段,我们大多书写选项式API。

组合式API:我们可以通过导入的API函数来描述组件逻辑。


2.1.3 声明式渲染

说明:Vue的核心功能是声明式渲染。通过扩展于标准 HTML 的模板语法,我们可以根据 JavaScript 的状态来描述 HTML 应该是什么样子的。当状态改变时,HTML 会自动更新。

我们可以在data组件选项中来声明响应式状态,该选项应该是一个返回对象的函数。

<script>
export default {
  data() {
    return {
      message: 'Hello World!',
      counter: {
        count: 0
      }
    }
  }
}
</script>

<template>
  <h1>{{ message }}</h1>
  <p>Count is: {{ counter.count }}</p>
</template>


2.1.4 属性绑定

说明:我们可以使用v-bind:指令来绑定一个属性值,由于v-bind经常被使用,所以其可以被简写为:

<script>
export default {
  data() {
    return {
      titleClass: 'title'
    }
  }
}
</script>

<template>
  <h1 :class="titleClass">Make me red</h1>
</template>

<style>
.title {
  color: red;
}
</style>


2.1.5 事件监听

说明:我们可以使用v-on来监听DOM事件,其简写为@

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods:{
    increment(){
      this.count++
    }
  }
}
</script>

<template>
  <!-- 使此按钮生效 -->
  <button @click="increment">count is: {{ count }}</button>
</template>


2.1.6 表单绑定

说明:如果我们希望一个通过一个表单改变数据,那么我们可以使用v-on+v-bind完成这样的操作,但是Vue为我们提供了语法糖v-model,它通常用于双向绑定。

语法糖:简化语法,让你觉得语法不再枯燥无味。

<script>
export default {
  data() {
    return {
      text: ""
    }
  },
}
</script>

<template>
  <input v-model="text" placeholder="Type here">
  <p>{{ text }}</p>
</template>


2.1.7 条件渲染

说明:我们可以使用v-ifv-else-ifv-else来进行条件渲染,其中v-if和v-else-if对应的值只有为真的情况下才会渲染。

<script>
export default {
  data() {
    return {
      awesome: true
    }
  },
  methods: {
    toggle() {
      this.awesome = !this.awesome
    }
  }
}
</script>

<template>
  <button @click="toggle">toggle</button>
  <h1 v-if="awesome">Vue is awesome!</h1>
  <h1 v-else>Oh no 😢</h1>
</template>


2.1.8 列表渲染

说明:当我们想要渲染多个li标签时,我们可以将标签中的内容置于数组中,并使用v-for指令。

<script>
// 给每个 todo 对象一个唯一的 id
let id = 0

export default {
  data() {
    return {
      newTodo: '',
      todos: [
        { id: id++, text: 'Learn HTML' },
        { id: id++, text: 'Learn JavaScript' },
        { id: id++, text: 'Learn Vue' }
      ]
    }
  },
  methods: {
    addTodo() {
      this.todos.push({ id: id++, text: this.newTodo })
      this.newTodo = ''
    },
    removeTodo(todo) {
      this.todos = this.todos.filter((t) => t !== todo)
    }
  }
}
</script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo">
    <button>Add Todo</button>    
  </form>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
</template>


2.1.9 生命周期初探

说明:目前为止,我们并没有实际动手去操作DOM,但是有时候我们也有要手动操作DOM的情况。Vue为我们提供了模板引用,具体的做法是在标签中使用ref属性,之后我们可以在script标签中使用this.$refs.p来访问操作该标签对应的DOM。

我们可以通过mounted()函数来操作DOM,它常被称为生命周期钩子,因为它允许我们注册一个在组件特定生命周期调用的回调函数。

<script>
export default {
  mounted(){
    this.$refs.p.textContent = 'I like you'
  }
}
</script>

<template>
  <p ref="p">hello</p>
</template>


2.2 指令汇总

  • 插值表达式:从data中渲染文本,可在里面使用js表达式
  • v-text:从data中渲染文本
  • v-html:从data中渲染标签及其内容
  • v-bind:从data中渲染属性,可简写为:
  • v-on事件:从methods中获取事件,可简写为@事件,如@click
  • v-model:用于双向绑定,只能用于表单元素。==当需要维护组件内外数据的同步时,也可以使用该指令==
  • v-if:条件渲染指令。v-if会动态创建或移除DOM元素,具有切换开销
  • v-else:配合v-if使用
  • v-else-if:配置v-if使用
  • v-show:条件渲染指令。v-show会动态地显示与隐藏,本质是display:none,具有渲染开销
  • v-for:列表循环指令。从data中的列表中循环获取数据,语法是==元素 in 列表名==或==(元素名,索引) in 列表名==


2.3 事件对象

说明

  1. 在原生DOM事件绑定中,可以在事件处理函数的形参处,接收事件对象event。同理在v-on指令所绑定的事件处理函数中,同样可以接收到事件对象event。
  2. 事件对象event必须写在参数列表的第一个,如果不想写在第一个,请在传参时事件变量前加上$。
<body>
    <div id = "app">
        <b>count的值为:{{count}}</b>
        <button v-on:click="addCount">+1</button>
    </div>

    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                count:0,
            },
            methods:{
                addCount(e){
                    const nowBgColor = e.target.style.backgroundColor;
                    e.target.style.backgroundColor = nowBgColor === 'red'?'':'red';
                    this.count+1;
                }
            }
        })
    </script>
</body>


2.4 事件修饰符

事件修饰符说明
.prevent阻止默认行为(阻止a链接的跳转,阻止表单的提交)
.stop阻止事件冒泡
.capture以捕获模式触发当前的事件处理函数
.once绑定的事件只触发一次
.self只有在event.target是当前元素自身时触发事件处理函数


2.5 按键修饰符

事件修饰符说明
@keyup.enter按enter键后会发生对应事件
@keyup.esc按esc键后会发生对应事件
<body>
    <div id="app">
        <input type="text" @keyup.enter = "submit" @keyup.esc = "clearInput">
    </div>

    <script src = "./vue.js"></script>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{

            },
            methods:{
                submit(e){
                    console.log('按下了enter键,最新的值是:'+e.target.value);
                },
                clearInput(e){
                    e.target.value = '';
                },
            }
        })
    </script>
</body>


2.6 v-model修饰符

说明

  • 使用.trim可以使得文本框输入的空格传到后台时被忽略
  • 使用.number可以保重转换后仍为数值
  • 使用.lazy可以让文本框失去焦点后再更新而非实时更新
<body>
    <div id="app">
        <!-- 使用.trim可以是的文本框输入的空格传到后台时被忽略 -->
        姓名:<input type="text" v-model.trim = "username">
        <hr>
        <!-- 使用.number可以保重转换后仍为数值 -->
        年龄:<input type="text" v-model.number="age">
        <hr>
        <!-- 使用.lazy可以让文本框失去焦点后再更新而非实时更新 -->
        地址:<input type="text" v-model.lazy = "address">
    </div>

    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                username:'ArimaMisaki',
                age:13,
                address:'北京市',
            }
        })
    </script>
</body>


2.7 使用key来维护列表状态

引入:在我们使用v-for指令时,常常会因为添加或删除数组的元素,导致维护的li标签顺序与想象中不符。

说明:在标签中添加key属性,值为列表中的某个值。相当于数据库中的主键。通常列表指定值最好是id。key能够维护表单的状态。

<body>
    <div id="app">
        <div>
            <input type="text" v-model="name">
            <button @click="addNewUser">添加</button>
        </div>

        <ul>
            <li v-for = "{user,index} in userlist" :key = "user.id">
                <input type="checkbox">
                姓名:{{user.name}}
            </li>
        </ul>
    </div>

    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                userlist: [
                    { id: 1, name: 'zs' },
                    { id: 2, name: 'ls' }
                ],
                name: '',  
            }
        })
    </script>
</body>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
SAP Cloud Application Programming 编程模型(CAP)的设计准则
在SAP的云应用程序编程模型(CAP)是一个框架,语言,库和工具,为构建企业级的服务和应用。它引导开发人员沿着经过验证的最佳实践和大量现成的解决方案来应对重复性任务的“黄金之路” 。
40 0
深度长文回顾web基础组件 (二)
深度长文回顾web基础组件 (二)
42 0
从头编写 asp.net core 2.0 web api 基础框架 (5) EF CRUD
原文:从头编写 asp.net core 2.0 web api 基础框架 (5) EF CRUD 第1部分:http://www.cnblogs.com/cgzl/p/7637250.html 第2部分:http://www.
815 0
从头编写 asp.net core 2.0 web api 基础框架 (4) EF配置
原文:从头编写 asp.net core 2.0 web api 基础框架 (4) EF配置 第1部分: http://www.cnblogs.com/cgzl/p/7637250.html 第2部分:http://www.
1055 0
从头编写 asp.net core 2.0 web api 基础框架 (4) EF配置
第1部分: http://www.cnblogs.com/cgzl/p/7637250.html 第2部分:http://www.cnblogs.com/cgzl/p/7640077.html 第3部分:http://www.
1271 0
UWP入门(二) -- 基础笔记
原文:UWP入门(二) -- 基础笔记 不错的UWP入门视频,1092417123,欢迎交流 UWP-04 - What i XMAL? XAML - XML Syntax(语法) ,create instance of Classes that define the UI by setting properties(属性).
1143 0
+关注
ArimaMisaki
一个认真并且每天保持学习的开荒者
文章
问答
文章排行榜
最热
最新
相关电子书
更多
基于VUE的单页面性能优化实践
立即下载
利用编译将 Vue 组件转成 React 组件
立即下载
产品经理的硬技能——业务建模
立即下载