[Code with me]学习Vue.js | 前端UI框架 | 无任何前置知识要求式教程

绛红

已于 2024-04-25 21:34:51 修改

阅读量1k

点赞数 28

分类专栏：网站前端 Vue.js框架文章标签： vue.js 前端学习

于 2024-04-06 00:09:28 首次发布

本文链接：https://blog.csdn.net/m0_59035787/article/details/137375735

版权

网站前端同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

Vue.js框架

1 篇文章 0 订阅

订阅专栏

初心者的一些问题解答

什么是Vue.js

答：Vue.js是一种可以让开发者方便快捷地开发出响应式网站前端的JavaScript框架。

什么是JavaScript

答：JavaScript是一种所有游览器都支持的动态类型编程语言，意味着程序员不需要事先声明变量的数据类型，只有在第一次给变量赋值时，语言环境才会确定其数据类型，非常适合网站编程。

什么是框架

答：框架就是一个第三方库，类似于预制好的房子，你只需要摆家具，贴窗花，即可。复杂而底层的代码框架已经帮你实现了。

什么是响应式

答：网站或app可以动态响应用户的输入，动态地更新屏幕（例如：显示当用户输入错误，弹出一个报警的窗口）。

什么是网站前端

答：基本上就是用户能看到的东西，技术上讲就是：HTML+CSS+Javascript构成的网页，运行在用户端这边的。

为什么用框架不用原生呢？

答：1.原生会要求你重新造轮子；

2.如果你的代码能力不行，会导致欠优化代码或bug错误；

3.如果你在一个团队中工作，其他成员可能不熟悉你的代码结构或者想法，不易于团队工作。

总之，Vue将复杂底层的事情处理好了，使得我们开发者或团队可以专注于核心业务逻辑，开发出美观漂亮的应用程序。

问题解答结束！准备工具：

1.使用Vue的IDE：Visual code；下载地址如下：

https://visualstudio.microsoft.com/zh-hans/https://visualstudio.microsoft.com/zh-hans/2.IDE的小技巧

2.配置自动代码对齐：按下ctrl + s 和 ctrl + k 打开键盘快捷方式，输入format document

如果未绑定，记得绑定，然后按下shift+Alt+F就可以自动代码对齐。

倘若不能使用的话，可以按下ctrl+shift+X来到扩展，下载安装prettier扩展项，也可以进行自动代码对齐，it will do the job!

开始编码|用原生js：

标题为无需任何前置知识教程，那我就是这个意思，我会从最简单的网站开始搭建起来。

在整篇博客的最上面你会找到我附上的附件，下载下来，一步一步地跟着操作。

1.用js指针指向DOM的元素

const buttonEl = document.querySelector('button');
const inputEl = document.querySelector('input');
const listEl = document.querySelector('ul');

这些代码做了什么呢？

它找到了Html文件中的DOM树中的某个元素，在这个例子中是‘button’、‘input’、‘ul’，并将这些转换为js对象存储在变量‘buttonEl’、‘inputEl’、‘listEl’上，使得我们可以借助变量名操作DOM元素。

2.追加button的事件监听器

buttonEl.addEventListener('click',addGoal);

这些代码做了什么呢？

在buttonEl对象上增加一个事件监听器，监听事件为'click'点击，一旦监听到点击事件后，触发并执行‘addGoal函数’。

3.补充addGoal函数

function addGoal(){
    const enteredValue = inputEl.value;
    const listItemEl = document.createElement('li');
    listItemEl.textContent = enteredValue;
    listEl.appendChild(listItemEl);
    inputEl.value = '';
}

这些代码做了什么呢？

它获得输入框的值并赋值给enterValue；在DOM中创造一个li元素，将输入框的值放入新建的li元素中，并将其添加进ul,并重置输入框的数据。

4.现在打开index.html，试验下吧

总结，可以看得出来，只是一个简单的网站，简单的功能，实现起来却很繁杂。

接下来用vue框架实现

请大家将之前的js代码全部框选，然后ctrl+/，全部注释

1.引入vue.js

来到vue的中文网站---->快速上手 | Vue.js

找到这样的字眼，我们从互联网直接引用vue.js的第三方包

我将代码放在下面，可能你看这篇博客的时候已经不是这样的url，所以可能需要请大家前往vue的网站自行查询。

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

来到index.html文件里面，记得这行代码要放在 <script src="app.js"></script>前面，就像这样

2.使用Vue

1.) 创建Vue全局变量，以及声明数据

Vue.createApp({
    data() {
        return {
            goals: [],
            enteredValue: '',
        };
    }
});

我做了什么呢：

我创建了一个Vue的全局变量，使用它的一个方法createApp。在这个方法里，我们可以配置整个app或叫做网站，配置列表数据，输入框数据等等。

我添加了data参数，这是固定写法，意味着你可以将网站中所有的数据存储在此，作为一个数据仓库综合管理。该data参数返回一个数组对象，我放在一个goals数组，和一个enteredValue字符串在内。

题外话：其实data参数的标准写法是这样的，但因为JavaScript中可以简写，所以使用上方写法。

    data: function() {
        return {
            goals: [],
            enteredValue: '',
        };
    }

2.)绑定数据至html上

来到html中，在如图在input后面添加v-model="enteredValue"

<input type="text" id="goal" v-model="enteredValue" />

我做了什么呢：

v-model是vue中一个指令，它找到js文件和html文件都有enteredValue的值，并建立连接。在这个例子中js文件的enteredValue一旦有任何变化，都会映射到input输入框中。

3.)增加method参数

既然有data参数，那必然也有method参数，不然怎么处理方法呢？对吧

Vue.createApp({
    data: function() {
        return {
            goals: [],
            enteredValue: '',
        };
    },
    methods:{
        addGoal() {
            this.goals.push(this.enteredValue);
        }
    },
});

我做了什么呢：

我在data后面添加了methods参数，这也是固定的不能更改的单词，这块区域主要放置方法。

我放置了一个addGoal方法，该方法能将获得的enteredValue的值添加进goals数组中。

4.)自动化添加li列表表项，同时告诉vue应用于结构块

在html中，找到li项，添加v-for="goal in goals"

<li v-for="goal in goals">{{ goal }}</li>

在js中最底下添加mount('#app')

Vue.createApp({
    data: function() {
        return {
            goals: [],
            enteredValue: '',
        };
    },
    methods:{
        addGoal() {
            this.goals.push(this.enteredValue);
        }
    },
}).mount('#app');

我做了什么呢？

我在li项中，添加了v-for="goal in goals"，这意味着vue会找到js中goals数组并将其一个接一个地取出，并作为li列项添加进ul。

我在vue.createApp()后面添加mount()方法，并将#app作为参数添加进去，这是告诉vue，找到index.html中id=app的结构块，并将vue应用该整个结构块中，而其他地方则不应用。