2024年三、Vue 的一些语法样例，五步搞定前端开发环境部署

下面是我在学习HTML和CSS的时候整理的一些笔记，有兴趣的可以看下：

进阶阶段

进阶阶段，开始攻 JS，对于刚接触 JS 的初学者，确实比学习 HTML 和 CSS 有难度，但是只要肯下功夫，这部分对于你来说，也不是什么大问题。

JS 内容涉及到的知识点较多，看到网上有很多人建议你从头到尾抱着那本《JavaScript高级程序设计》学，我是不建议的，毕竟刚接触 JS 谁能看得下去，当时我也不能，也没那样做。

我这部分的学习技巧是，增加次数，减少单次看的内容。就是说，第一遍学习 JS 走马观花的看，看个大概，去找视频以及网站学习，不建议直接看书。因为看书看不下去的时候很打击你学下去的信心。

然后通过一些网站的小例子，开始动手敲代码，一定要去实践、实践、实践，这一遍是为了更好的去熟悉 JS 的语法。别只顾着来回的看知识点，眼高手低可不是个好习惯，我在这吃过亏，你懂的。

1、JavaScript 和 ES6

在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。

2、前端框架

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

以 Vue 为例，我整理了如下的面试题。

export default {

name: “”,

data(){

return {

object: {

name: ‘quellanan’,

url: ‘http://quellanan.xyz’,

slogan: ‘学的不仅是技术，更是梦想！’

}

}

}

}

可以看到我使用了三种方式进行for 循环。index 是索引，key 是键， value 是值。这些其实和Java 中的循环差不多。无非就是通过索引遍历，要不就是通过键值遍历。

v-if 和v-else-if v-else 也是一样的。满足条件就显示组件，知道这样用就可以。

但是有一点，上面代码也发现了，无论是v-if 还是v-for, 都要与某个标签结合使用。单独是无法使用的。

监听事件

===================================================================

听起来很高大上，其实就是一个 watch 方法。

我们写一个单位换算的组件:

千米 :

米 :

小时 :

分钟 :

秒 :

天 :

星期 :

计数器: {{ counter }}

<button @click = “counter++”>点我

v-model 表示数据双向绑定，这个没有什么好说的。data 初始化数据，watch 方法中就是监听函数，监听各自的组件并进行处理。

发送HTTP 请求

========================================================================

我们要做前后端分离，那么通过http 请求访问后端数据是避免不了的。所以我们一起来看下。我这里也是查看资料中的例子。直接拿过来用了。

我们创建一个BlogList.vue 文件，内容如下：

{{blog.title}}

上面的代码可以看到。mounted 方法中发送http 请求。mounted 函数是初始化页面后，将数据渲染到界面上的。

mounted () {

this.$http.get(‘api/interface/blogs/all’).then((response) => {

this.blogs = response.body.blogs

}, (response) => {

console.error(response)

});

},

我们启动项目，发现报这种错误。这是因为我们项目中没有引入 vue-resource 所以我们需要在项目中引入。

我们在idea 中打开控制台（alt+F12）。

npm install vue-resource

安装好之后，我们在在main.js 中引入它

import VueResource from ‘vue-resource’

Vue.use(VueResource)

Vue.http.options.emulateJSON = true //允许使用post 请求。

在config–index.js 中设置一下代理，模拟一下跨域请求，不然接口访问不了。

最后

---

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。