30分钟快速入门Vue.js_vue教程-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42257666/article/details/144220417

文章目录

一、前言
二、3种方式构建Vue
三、第一个Vue程序
四、Vue基础指令
五、总结

一、前言

建议初学者学习之前，已经熟练掌握HTML、CSS、JavaScript和AJAX基础知识。
Vue是一种用于构建用户界面的渐进式的JavaScript框架，能够简化Dom元素操作，并且采用响应式数据驱动。
在这里插入图片描述

官方给出了3种快速入手方法：

工程化项目
CDN的全局构建版本
CDN的ES模块构建版本

二、3种方式构建Vue

2.1、npm init vue@latest

npm是项目包管理工具，包含了很多工具包，例如vue脚手架。打开cmd命令行，然后输入上面init或者下面create的命令，然后回车。

npm create vue@latest

它会安装并执行create-vue脚手架，然后提示你输入项目名称、是否使用TypeScript语法等，一般一直默认回车即可，因为后续在项目中也可以更改配置。

在这里插入图片描述

3、 cd到项目目录，然后执行npm install命令安装所需依赖，再执行npm run dev启动项目。
在这里插入图片描述

4、在浏览器中输入地址：http://localhost:5173/，回车可以看到Vue的页面。
在这里插入图片描述

5、可以在VS Code中打开新建的项目，目录结构如下，assets是静态资源目录，components是组件目录，App.vue是根组件，main.js是入口文件。

在这里插入图片描述

2.2、使用CDN 全局构建版本

你可以借助 script 标签直接通过 CDN 来使用 Vue：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

这里我们使用了 unpkg，但你也可以使用任何提供 npm 包服务的 CDN，例如 jsdelivr 或 cdnjs。当然，你也可以下载此文件并自行提供服务。

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

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

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('Hello vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

通过 CDN 使用 Vue 时，不涉及“构建步骤”。这使得设置更加简单，并且可以用于增强静态的 HTML 或与后端框架集成。但是，你将无法使用单文件组件 (SFC) 语法。

2.3、使用CDN ES模块构建版本

在本文档的其余部分我们使用的主要是 ES 模块语法。现代浏览器大多都已原生支持 ES 模块。因此我们可以像这样通过 CDN 以及原生 ES 模块使用 Vue：

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

<script type="module">
  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

三、第一个Vue程序

本教程使用CDN 全局构建版本来演示，因为对于初学者而言最容易上手。

3.1、创建Vue程序

1、新建一个html文件，加上基础的标签。

<!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>Hello Vue</title>
</head>
<body>
    <div id="app">
    </div>
</body>
</html>

2、在body标签内的script标签中，导入开发版本的Vue.js。可以把vue.js下载到本地，然后使用相对路径访问，也可以直接把src设置为官网的链接：https://cdn.jsdelivr.net/npm/vue/dist/vue.js。

<body>
    <div id="app">
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../js/vue.js"></script>
    <script>
    </script>
</body>

3、创建Vue实例对象，设置el属性和data属性。

 <!-- 开发环境版本，包含了有帮助的命令行警告 -->
 <script src="../js/vue.js"></script>
 <script>
     var app = new Vue({
         el: "#app",
         data: {
             message: "学习IT技术",
             info:"必须非常细节"
         }
     }) 
 </script>

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

<!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>Hello Vue</title>
</head>

<body>
    <div id="app">
        <h2 v-text="message + '!'"></h2>
        <h3 v-text="info + '!'"></h3>
        <h4>{{message + info}}</h4>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../js/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "学习IT技术",
                info: "必须非常细节"
            }
        }) 
    </script>
</body>

</html>

5、使用VS Code的Live Server插件运行到浏览器中。
在这里插入图片描述

3.2、el:挂载点

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

3.3、data:数据对象

Vue中用到的数据定义在data中。
data中可以写复杂类型的数据。
渲染复杂类型数据时，遵守js的语法即可。

四、Vue基础指令

Vue指令：以v-开头的一组特殊语法。

4.1、v-text

设置标签的文本值(textContent)，默认写法会替换全部内容，使用差值表达式{{ }}可以替换指定内容，内部支持写表达式。

<body>
    <div id="app">
        <h2 v-text="message + '!'"></h2>
        <h3 v-text="info + '!'"></h3>
        <h4>{{message + info}}</h4>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../js/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "学习IT技术",
                info: "必须非常细节"
            }
        }) 
    </script>
</body>

4.2、v-html

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

<body>
    <!-- 2.html结构 -->
    <div id="app">
        <p v-html="content"></p>
        <p v-text="content"></p>
    </div>
    <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../js/vue.js"></script>
    <script>
        <!-- 3.创建Vue实例 -->
        var app = new Vue({
            el: "#app",
            data: {
                content: "<a href='https://blog.youkuaiyun.com/qq_42257666'>振华OPPO</a>"
            }
        }) 
    </script>
</body>

4.3、v-on

v-on指令的作用是绑定事件，简写为@，方法中通过this关键字获取data中的数据。事件绑定的方法写成函数调用的形式，可以传入自定义参数，定义方法时需要定义形参来接收传入的实参，事件的后面跟上 .修饰符可以对事件进行限制，.enter 可以限制触发的按键为回车。

<body>
    <div id="app">
        <input type="button" value="v-on指令" v-on:click="doIt">
        <input type="button" value="v-on简写" @click="doIt">
        <input type="button" value="双击事件" @dblclick="learnIt">
        <!-- 事件修饰符（.enter回车） -->
        <input type="text" @keyup.enter="sayHi">
        <h2 @click="changeFood">{{food}}</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../js/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                food: "西兰花炒蛋"
            },
            methods: {
                doIt: function () {
                    alert("做IT");
                },
                learnIt: function () {
                    alert("学习IT");
                },
                changeFood: function () {
                    this.food += "非常好吃"
                },
                sayHi: function () {
                    alert("吃了没");
                }
            },
        }) 
    </script>
</body>

4.4、v-show

v-show指令是根据真假切换元素的显示状态，原理是修改元素的display，实现显示隐藏。指令后面的内容最终都会解析为布尔值，值为true元素显示，值为false元素隐藏。数据改变之后，对应元素的显示状态会同步更新。

<body>
    <!-- 2.html结构 -->
    <div id="app">
        <input type="button" value="切换显示状态" @click="changeIsShow">
        <input type="button" value="添加年龄" @click="addAge">
        <img src="../images/img.jpg" v-show="isShow" width="200px" height="200px">
        <img src="../images/img.jpg" v-show="age >= 18" width="100px" height="100px">
        <!-- <img src="地址", v-show="isShow">
        <img src="地址", v-show="true"> -->
    </div>
    <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../js/vue.js"></script>
    <script>
        <!-- 3.创建Vue实例 -->
        var app = new Vue({
            el: "#app",
            data: {
                isShow: true,
                age: 16
            },
            methods: {
                changeIsShow: function () {
                    this.isShow = !this.isShow;
                },
                addAge: function () {
                    this.age++;
                }
            }
        })
    </script>
</body>

4.5、v-if

根据表达值的真假，切换元素的显示和隐藏(操纵dom元素)。表达式的值为true则元素存在于dom树中；为false则从dom树中移除。频繁的切换v-show，反之使用v-if，前者的切换消耗小。

<body>
    <!-- 2.html结构 -->
    <div id="app">
        <input type="button" value="切换显示" @click="toggleIsShow">
        <p v-if="isShow">学习Vue</p>
        <p v-show="isShow">学习Vue v-show修饰</p>
        <h2 v-if="temperature >= 35">非常热</h2>
    </div>
    <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
    <script src="./vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isShow: true,
                temperature: 36
            },
            methods: {
                toggleIsShow: function() {
                    this.isShow = !this.isShow;
                }
            }
        })
    </script>
</body>

4.6、v-bind

v-bind指令是为元素绑定属性，完整写法是 v-bind:属性名，简写的话可以直接省略v-bind，只保留 :属性名，如果需要动态的增删class建议使用对象的方式。

<body>
    <!-- 2.html结构 -->
    <div id="app">
        <img :src="imgSrc" alt="" :title="imgTitle + '!!!'" 
        :class="isActive? 'active': ''" @click="toggleActive">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle + '!!!'" 
        :class="{active: isActive}" @click="toggleActive">
    </div>
    <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../js/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                imgSrc: "http://www.itheima.com/images/logo.png",
                imgTitle: "振华OPPO",
                isActive: false
            },
            methods: {
                toggleActive: function() {
                    this.isActive = !this.isActive;
                }
            }
        })
    </script>
</body>

4.7、v-for

v-for指令的作用是：根据数据生成列表结构，v-for经常和数组结合使用，语法是( item,index ) in array，其中item是数组array中的元素，index是元素所在的数组下标，数组长度的更新会同步到页面上，是响应式的。

<body>
    <!-- 2.html结构 -->
    <div id="app">
        <input type="button" @click="add" value="加菜">
        <input type="button" @click="remove" value="减菜">
        <ul>
            <li v-for="(it, index) in arr">
                {{ index + 1 }} 一线城市：{{ it }}
            </li>
        </ul>
        <h2 v-for="item in vegetables" :title="item.name + '：' + item.price + '元'">
            {{ item.name }}
        </h2>
    </div>
    <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../js/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data: {
                arr: ["北京", "上海", "广州", "深圳"],
                vegetables: [
                    {name: "宫保鸡丁", price: 19.9},
                    {name: "家常豆腐", price: 12.6}
                ]
            },
            methods: {
                add: function() {
                    this.vegetables.push({name:"百叶烧肉", price: 29.9});
                },
                remove: function() {
                    this.vegetables.shift();
                }
            }
        })
    </script>
</body>

4.8、v-model

v-model指令的作用是便捷的设置和获取表单元素的值，绑定的数据会和表单元素值相关联，且两者是双向绑定的。

五、总结

学习Vue开发是一段既充满挑战又极具收获的旅程。Vue.js作为现代前端框架，以其简洁的语法、高效的数据绑定和灵活的组件化设计，迅速赢得了广大开发者的青睐。通过系统学习，可以掌握Vue的基础概念，如双向数据绑定、指令系统、计算属性和侦听器，这些构成了Vue框架的核心机制，能够构建动态交互的Web应用。

此外，Vue社区资源丰富，文档详尽，论坛和GitHub上的讨论可以让你在遇到问题时能够快速找到解决方案。参与开源项目，你可以有机会学习他人优秀的代码风格和实践经验，进一步拓宽了你的技术视野。

古人云：顺为贱，逆为贵。顺流而下易，逆流而上难。意淫是顺淫念之流而下，是离本逐妄，是贱。戒意淫是逆淫念之流而上，是离妄返本，是贵。当我们保持觉知时，我们就可以做念头的主人。反之，如果我们失去了内心的觉察，那么念头就会反客为主。你跟着念头跑，你的觉知就会迷失在念头之流里。淫念一起你跟着它跑，你就给淫念注入了无限的生机与活力，而你就是淫念无限活力的背后推动黑手，你变成了淫念的根，结果就会戒淫失败。观心，就是观“淫念的生起之处”，就是观察你心中的淫念究竟从何处起来的。你如此一观，就让自己一瞬间从淫念中脱离出来（由妄念返回本觉），你一脱离，淫念就失去了根，一瞬间就瓦解了。这就是瓦解淫念的秘密。