Vue.js基础教程：指令与事件处理-优快云博客

本文链接：https://blog.youkuaiyun.com/zgt15679799695/article/details/124991311

本文是Vue.js的基础学习篇，介绍了Vue.js的安装、基本使用、主要指令如v-text、v-html、v-model、v-on、v-bind、v-for以及v-if/v-else-if/v-else的用法，并提到了Vue开发工具Vetur和Vue 2 Snippets的安装与使用，同时补充了ES6的数组方法findIndex和includes的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

插件安装推荐

vue.js是什么

vue的基本使用

v-text指令（类似于innerText）

v-html指令（类似innerHTML）

v-if,v-else-if,v-else指令

补充：es6数组方法findIndex,数组与字符串判断的includes

插件安装推荐

vscode有二个常用插件：vetur，Vue 2 Snippets

vetur:让一些vue的关键字能高亮显示，还能进行一些语法的检测。
- 语法错误检查，包括 CSS/SCSS/LESS/Javascript/TypeScript等
- 语法高亮，包括 html/css/sass/scss/less/js/ts等
Vue 2 Snippets：能在平时写代码过程中提示功能更强大,对vue的语法有提示

官网地址(里面列出了相关提示快捷词)： Vue 3 Snippets - Visual Studio Marketplace

安装方式有二种：在线安装（能上网，条件允许推荐在线安装）,离线安装

在线安装：在vscode中按（ctrl+shift+x）,搜索插件名称（例：vetur），

会出现相关插件，如果里面有install.就点击安装，如果安装完成就没install了

离线安装：拷贝相应的压缩包解压到相应目录下面（2个vscode插件.zip）

C:\Users\电脑用户名\.vscode\extensions

安装完成后，重启一下vscode就可使用插件了

vue.js是什么

官网地址

我们学习一个知识，首先是不是要了解它是什么？有什么特点？

vue.js是什么：vue就是一个javascript框架，

特点：无需再操作dom,只关心数据

vue做法与传统js对比

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- js传统做法 -->
    <input type="text" id="txt">
    <p id="p">您输入了:</p>
    <script>
        let _txt = document.getElementById("txt")
        let _p = document.getElementById("p")
        _txt.oninput = function () {
            _p.innerText = "您输入了:" + _txt.value
        }
    </script>

    <!-- vue做法 -->
    <div id="app">
        <input type="text" v-model="msg">
        <p>您输入了:{
  {msg}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                msg: "hello"
            }
        })
    </script>
</body>

</html>

总结：对vue而言，我们无需再操作dom,只需要关心数据data,把相应的数据与标签用vue的语法关联上就OK了

vue的基本使用

我们刚子解了vue是什么和它的特点，那我们如何去使用它呢？

直通车

基本使用方法（分三步）：

引包(导入vue.js到html)
- 引包这里官网说到二个词，开发环境，生产环境
  - 开发环境：就是我们作为开发人员写代码过程中使用的环境,选择包相当于jquery时的jquery.min.js。
  - 生产环境：项目正式上线后的环境,选择包相当于jquery时的jquery.js。
```
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
```

布局。（写好页面标签，以前怎么写现在还怎么写）例：

 <div id="app">
        {
    {msg}}
    //这个div写了一个id,就是留这个id以便vue更方便vue实例化时方便获取
    </div>

vue实例化

<script>
        new Vue({
            //这里el相当于确定实例化范围就是id为app的标签，后面写法相当于一个选择器，注：这里不能选择body与html,尽量写一个id标签供选择，独一无二，可读性强，规范。  
            el: "#app",
            //这里的data就是vue需要使用到的数据，vue是以数据驱动页面，数据就来自于这里
            data: {
                msg: "hello"
            }
        })
    </script>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- 基本使用分为三步：
1：导包；2：布局；3：实例化
-->

    <!-- 2:布局 -->
    <div id="app">
        <!-- vue的一个插值语法，相当于挖个坑，用下面的就是值来填上 -->
        {
  { message }}message
        <div>{
  {message}}</div>
    </div>



    <!-- 1:导包(开发环境的包) -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        //3:实例化过程    
        var app = new Vue({
            el: '#app',//el实际就是element，选择标签  实际就是确定vue的使用范围  ,注意这里不能选择 <html> or <body>      
            data: {      //数据存放的地方
                message: 'Hello Vue!',
                txt: ""
            }
        })
    </script>
</body>

</html>