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

当前 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, Vue!"  // 定义数据}})

el:挂载点

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

data:数据对象

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

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

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

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

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

1.4完整的html代码

包含上述3步的完整的html文件如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue Rendering Example</title><!-- 引入Vue.js文件 --><script src="./vue.js"></script>
</head>
<body><div id="app"><!-- 使用插值渲染数据 --><h1>{{ message }}</h1>        </div><script>// 创建Vue实例new Vue({el: '#app', // 指定挂载点data: {message: 'Hello, Vue!' // 定义数据}});
</script>
</body>
</html>

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)}}})

v-on绑定的事件也可以传递参数，比如通过下面的方式传递了两个参数p1和p2。

<input type=“button” @click=“doIt(p1,p2)” />

在Vue的可以通过以下方式接收参数：

var app = new Vue({el: "#app",methods: