Vue快速入门(二）——选项式 API介绍

news2024/10/1 12:20:28

当前 Vue 的最新稳定版本是 v3.4.35，而Vue 2 已于 2023 年 12 月 31 日停止维护。
Vue2的书写风格是选项式 API ，而Vue3的书写风格同时支持选项式API和组合式 API。那我们选哪一种风格的API来学习呢？我建议先学习选项式API，然后再学习组合式API。学习选项式API，既是能写Vue3，用能看懂Vue2，毕竟Vue2的项目现在也还挺多的。而且学会了选项式API，再学组合式API也是很简单的，并不会花很多时间。这样不是也挺好的吗？
下面开始今天的学习吧。

１、第一个Vue程序

创建一个Vue程序需要以下几个步骤：

1.1导入开发版本的Vue.js

如果再html文件中使用Vue.js，可以如下方式导入：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

也可以把vue.js下载到本地与html文件同一目录，然后在script标签内导入：

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

1.2创建Vue实例对象, 设置el属性和data属性

   var app = new Vue({
       el:"#app", // 指定挂载点
       data:{
	     message:"Hello"  // 定义数据
            }
       })

el:挂载点

el是用来设置Vue实例挂载（管理）的元素
Vue会管理el选项命中的元素及其内部的后代元素
可以使用其他的选择器,但是建议使用ID选择器
可以使用其他的双标签,不能使用HTML和BODY

data:数据对象

Vue中用到的数据定义在data中
data中可以写复杂类型的数据（如对象、数组等）
例如：

  data:{
	message:"Hello",
	array:["JAVA","C#","Python"],   // 数组
	obj:{   // 对象
		name:"zhangsan",
		age:20
		}
  }

渲染复杂类型数据时,遵守js的语法即可

1.3使用简洁的模板语法把数据渲染到页面上

  <div id="app">
      {{ message }}
  </div>

2、Vue指令

Vue指令指的是,以v-开头的一组特殊语法

2.1 v-text指令

v-text指令的作用是:设置标签的内容(textContent)
例如：在javascript脚本中输入：

var app = new Vue({
            el:"#app",
            data:{
                message:"Hello"
            }
        })

如果在h2标签内使用v-text=“message+’!’”，就是把h2的内容设置为message变量的内容加一个叹号。也可以使用差值表达式{{}}（两个大括号）替换指定内容，即使用{{ message + "! "}}达到一样的效果。
即：

<div id="app">
      <h2 v-text="message+’!’"></h2>
      <h2>{{ message + "! "}}</h2>
    </div>

页面就会显示：
在这里插入图片描述

提示：内部支持写表达式

2.2 v-html指令

v-html指令的作用是:设置元素的innerHTML,内容中有html结构会被解析为标签。
而v-text指令无论内容是什么,只会解析为文本。

提示：解析文本使用v-text,需要解析html结构使用v-html

例如：

var app = new Vue({
            el:"#app",
            data:{                
                content:"<a href='#'>百度</a>"
            }
        })

<div id="app">
      <p v-html='content'></p>
    </div>

页面显示：
在这里插入图片描述

2.3 v-on指令

v-on指令的作用是:为元素绑定事件。
事件名不需要写on，比如想在on-click事件上绑定事件写成：v-on:click=“doIt"即可。
指令可以简写为@，比如v-on:click可以写成**@click**。
绑定的方法定义在Vue对象的methods属性中。
例如：

<div id="app">
      <input type="button" value="事件绑定" v-on:click=“doIt">
      <input type="button" value="事件绑定" v-on:monseenter=“doIt">
      <input type="button" value="事件绑定" v-on:dblclick=“doIt">
      <input type="button" value="事件绑定" @dblclick=“doIt">
    </div>

var app = new Vue({
            el:"#app",
            methods:{
              doIt:function(){
                // 逻辑
              }
            }
        })

方法内部通过this关键字可以访问定义在data中数据。
例如：

var app = new Vue({
            el:"#app",
            data:{
                message:'Hello!'
            }
            methods:{
              doIt:function(){
                console.log(this.message)
              }
            }
        })