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

初心者的一些问题解答

什么是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/icon-default.png?t=N7T8https://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应用该整个结构块中,而其他地方则不应用。

3.实验是否成功

        打开index.html,在输入框中输入些东西,看是否成功

所以的确是成功了,我们用vue实现了之前的操作,但是却用更少及更清晰的代码。

下一课,将继续深入vue的开发!

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值