Vue快速入门（附实战小项目：记事本、天气预报、音乐播放器）

最新推荐文章于 2024-09-23 22:03:38 发布

2401_84152189

最新推荐文章于 2024-09-23 22:03:38 发布

阅读量628

点赞数 10

分类专栏：程序员文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2401_84152189/article/details/137711077

版权

程序员专栏收录该内容

191 篇文章 1 订阅

订阅专栏

.gitignore:上传到服务器忽略哪些文件的配置（比如模拟本地数据mock不让他在get提交/打包上线的时候忽略不使用可在这里配置）
.postcssrc.js:前缀的配置（css转化的配置）
.editorconfig:对代码进行规范，例：root是否进行检测，代码尾部是否换行，缩行前面几个空格…（建议定义这个规范）
.eslintrc.js:配置eslint语法规则（在这里面的rules属性中配置让哪个语法规则失效）
.eslintignore:忽略eslint对项目某些文件的语法规则的检查

若拿到别人的项目或从gethub上下载的项目第一步就是要在项目中cnpm install;下载项目所依赖的插件，然后npm run dev （npm run start）运行项目

五、Vue核心指令

Vue导入

或

1、插值表达式

指令：{{ }}

2、v-text

设置标签的文本值（textContent）

3、v-html

设置标签的innerHTML，内容中有html结构会被解析为标签

4、v-on

为元素绑定事件

传递自定义参数，事件修饰符

…

methods: {

clicktest: function (p1) {

this.message = p1 + “已经被修改” + this.count++

}

5、计数器实战

<button @click=“sub”>-

<button @click=“add”>+

6、v-show

根据表达式的真假，切换元素的显示和隐藏

<button @click=“changee”>步尔斯特

7、v-if

根据表达式的真假，切换元素的显示和隐藏（操作dom元素）

<button @click=“changee”>步尔斯特

8、v-bind

设置元素属性

<button @click=“changee”>步尔斯特

9、v-for

根据数据生成列表结构，经常和数组结合使用

{{index}} -> {{item}}
{{item.name}}

10、v-model

获取和设置表单元素的值

<input type=“text” v-model=“message” @keyup.enter=“getM”>

{{message}}

六、实战小项目

 1、记事本

可动态增加、删除、显示总数、一键清除、隐藏

html
步尔斯特记事本

步尔斯特记事本

<input v-model=“inputValue” @keyup.enter=“add” autofocus=“autofocus” autocomplete=“off” placeholder=“请输入任务”

class=“new-todo” />
{{ index+1 }}.

{{ item }}

<button class=“destroy” @click=“remove(index)”>

{{ list.length }} items left

<button v-show=“list.length!=0” class=“clear-completed” @click=“clear”>

Clear

css

html,

body {

margin: 0;

padding: 0;

}

body {

background: #fff;

}

button {

margin: 0;

padding: 0;

border: 0;

background: none;

font-size: 100%;

vertical-align: baseline;

font-family: inherit;

font-weight: inherit;

color: inherit;

-webkit-appearance: none;

appearance: none;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

body {

font: 14px “Helvetica Neue”, Helvetica, Arial, sans-serif;

line-height: 1.4em;

background: #f5f5f5;

color: #4d4d4d;

min-width: 230px;

max-width: 550px;

margin: 0 auto;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

font-weight: 300;

}

:focus {

outline: 0;

}

.hidden {

display: none;

}

#todoapp {

background: #fff;

margin: 180px 0 40px 0;

position: relative;

box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);

}

#todoapp input::-webkit-input-placeholder {

font-style: italic;

font-weight: 300;

color: #e6e6e6;

}

#todoapp input::-moz-placeholder {

font-style: italic;

font-weight: 300;

color: #e6e6e6;

}

#todoapp input::input-placeholder {

font-style: italic;

font-weight: 300;

color: gray;

}

#todoapp h1 {

position: absolute;

top: -160px;

width: 100%;

font-size: 60px;

font-weight: 100;

text-align: center;

color: rgba(175, 47, 47, .8);

-webkit-text-rendering: optimizeLegibility;

-moz-text-rendering: optimizeLegibility;

text-rendering: optimizeLegibility;

}

.new-todo,

.edit {

position: relative;

margin: 0;

width: 100%;

font-size: 24px;

font-family: inherit;

font-weight: inherit;

line-height: 1.4em;

border: 0;

color: inherit;

padding: 6px;

border: 1px solid #999;

box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);

box-sizing: border-box;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

.new-todo {

padding: 16px;

border: none;

background: rgba(0, 0, 0, 0.003);

box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);

}

.main {

position: relative;

z-index: 2;

border-top: 1px solid #e6e6e6;

}

.toggle-all {

width: 1px;

height: 1px;

border: none; /* Mobile Safari */

opacity: 0;

position: absolute;

right: 100%;

bottom: 100%;

}

.toggle-all + label {

width: 60px;

height: 34px;

font-size: 0;

position: absolute;

top: -52px;

left: -13px;

-webkit-transform: rotate(90deg);

transform: rotate(90deg);

}

.toggle-all + label:before {

content: “❯”;

font-size: 22px;

color: #e6e6e6;

padding: 10px 27px 10px 27px;

}

.toggle-all:checked + label:before {

color: #737373;

}

.todo-list {

margin: 0;

padding: 0;

list-style: none;

max-height: 420px;

overflow: auto;

}

.todo-list li {

position: relative;

font-size: 24px;

border-bottom: 1px solid #ededed;

height: 60px;

box-sizing: border-box;

}

.todo-list li:last-child {

border-bottom: none;

}

.todo-list .view .index {

position: absolute;

color: gray;

left: 10px;

top: 20px;

font-size: 16px;

}

.todo-list li .toggle {

text-align: center;

width: 40px;

/* auto, since non-WebKit browsers doesn’t support input styling */

height: auto;

position: absolute;

top: 0;

bottom: 0;

margin: auto 0;

border: none; /* Mobile Safari */

-webkit-appearance: none;

appearance: none;

}

.todo-list li .toggle {

opacity: 0;

}

.todo-list li .toggle + label {

/*

Firefox requires # to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433

IE and Edge requires everything to be escaped to render, so we do that instead of just the # - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/

*/

background-image: url(“data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E”);

background-repeat: no-repeat;

background-position: center left;

}

.todo-list li .toggle:checked + label {

background-image: url(“data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E”);

}

.todo-list li label {

word-break: break-all;

padding: 15px 15px 15px 60px;

display: block;

line-height: 1.2;

transition: color 0.4s;

}

.todo-list li.completed label {

color: #d9d9d9;

text-decoration: line-through;

}

.todo-list li .destroy {

display: none;

position: absolute;

top: 0;

right: 10px;

bottom: 0;

width: 40px;

height: 40px;

margin: auto 0;

font-size: 30px;

color: #cc9a9a;

margin-bottom: 11px;

transition: color 0.2s ease-out;

}

.todo-list li .destroy:hover {

color: #af5b5e;

}

.todo-list li .destroy:after {

content: “×”;

}

.todo-list li:hover .destroy {

display: block;

}

.todo-list li .edit {

display: none;

}

.todo-list li.editing:last-child {

margin-bottom: -1px;

}

.footer {

color: #777;

padding: 10px 15px;

height: 20px;

text-align: center;

border-top: 1px solid #e6e6e6;

}

.footer:before {

content: “”;

position: absolute;

right: 0;

bottom: 0;

left: 0;

height: 50px;

overflow: hidden;

box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6,

0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6,

0 17px 2px -6px rgba(0, 0, 0, 0.2);

}

.todo-count {

float: left;

text-align: left;

}

.todo-count strong {

font-weight: 300;

}

.filters {

margin: 0;

padding: 0;

list-style: none;

position: absolute;

right: 0;

left: 0;

}

.filters li {

display: inline;

}

.filters li a {

color: inherit;

margin: 3px;

padding: 3px 7px;

text-decoration: none;

border: 1px solid transparent;

border-radius: 3px;

}

.filters li a:hover {

border-color: rgba(175, 47, 47, 0.1);

}

.filters li a.selected {

border-color: rgba(175, 47, 47, 0.2);

}

.clear-completed,

html .clear-completed:active {

float: right;

position: relative;

line-height: 20px;

text-decoration: none;

cursor: pointer;

}

.clear-completed:hover {

text-decoration: underline;

}

.info {

margin: 50px auto 0;

color: #bfbfbf;

font-size: 15px;

text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);

text-align: center;

}

.info p {

line-height: 1;

}

.info a {

color: inherit;

text-decoration: none;

font-weight: 400;

}

.info a:hover {

text-decoration: underline;

}

/*

Hack to remove background from Mobile Safari.

Can’t use it globally since it destroys checkboxes in Firefox

*/

@media screen and (-webkit-min-device-pixel-ratio: 0) {

.toggle-all,

.todo-list li .toggle {

background: none;

}

.todo-list li .toggle {

height: 40px;

}

}

@media (max-width: 430px) {

.footer {

height: 50px;

}

.filters {

bottom: 10px;

}

}

js

const app = new Vue({

el: “#todoapp”,

data: {

// 总数据

todoList: [“吃饭饭”, “睡觉觉”, “写代码”],

// 输入的内容

inputValue: “”,

},

// 方法

methods: {

// 增加任务

addTodo() {

this.todoList.push(this.inputValue);

},

// 删除任务

delTodo(index) {

this.todoList.splice(index, 1);

},

clearTodo() {

this.todoList = [];

}

}

});

2、天气预报

可动态查看实时天气情况

html
天知道

<input type=“text” v-model=“city” @keyup.enter=“searchWeather” class=“input_txt” placeholder=“请输入查询的天气”/>

搜索

北京

上海

广州

深圳
{{ item.type }}

{{ item.low }}

~

{{ item.high }}

{{ item.date }}

css-1

body{

font-family:‘Microsoft YaHei’;

}

.wrap{

position: fixed;

left:0;

top:0;

width:100%;

height:100%;

/* background: radial-gradient(#f3fbfe, #e4f5fd, #8fd5f4); */

/* background:#8fd5f4; */

/* background: linear-gradient(#6bc6ee, #fff); */

background:#fff;

}

.search_form{

width:640px;

margin:100px auto 0;

}

.logo img{

display:block;

margin:0 auto;

}

.form_group{

width:640px;

height:40px;

margin-top:45px;

}

.input_txt{

width:538px;

height:38px;

padding:0px;

float:left;

border:1px solid #41a1cb;

outline:none;

text-indent:10px;

}

.input_sub{

width:100px;

height:40px;

border:0px;

float: left;

background-color: #41a1cb;

color:#fff;

font-size:16px;

outline:none;

cursor: pointer;

position: relative;

}

.input_sub.loading::before{

content:‘’;

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

background: url(‘…/img/loading.gif’);

}

.hotkey{

margin:3px 0 0 2px;

}

.hotkey a{

font-size:14px;

color:#666;

padding-right:15px;

}

.weather_list{

height:200px;

text-align:center;

margin-top:50px;

font-size:0px;

}

.weather_list li{

display:inline-block;

width:140px;

height:200px;

padding:0 10px;

overflow: hidden;

position: relative;

background:url(‘…/img/line.png’) right center no-repeat;

background-size: 1px 130px;

}

.weather_list li:last-child{

background:none;

}

/* .weather_list .col02{

background-color: rgba(65, 165, 158, 0.8);

}

.weather_list .col03{

background-color: rgba(94, 194, 237, 0.8);

}

.weather_list .col04{

background-color: rgba(69, 137, 176, 0.8);

}

.weather_list .col05{

background-color: rgba(118, 113, 223, 0.8);

} */

.info_date{

width:100%;

height:40px;

line-height:40px;

color:#999;

font-size:14px;

left:0px;

bottom:0px;

margin-top: 15px;

}

.info_date b{

float: left;

margin-left:15px;

}

.info_type span{

color:#fda252;

font-size:30px;

line-height:80px;

}

.info_temp{

font-size:14px;

color:#fda252;

}

.info_temp b{

font-size:13px;

}

.tem .iconfont {

font-size: 50px;

}

css-2

body,ul,h1,h2,h3,h4,h5,h6{

margin: 0;

padding: 0;

}

h1,h2,h3,h4,h5,h6{

font-size:100%;

font-weight:normal;

}

a{

text-decoration:none;

}

ul{

list-style:none;

}

img{

border:0px;

}

/* 清除浮动，解决margin-top塌陷 */

.clearfix:before,.clearfix:after{

content:‘’;

display:table;

}

.clearfix:after{

clear:both;

}

.clearfix{

zoom:1;

}

.fl{

float:left;

}

.fr{

float:right;

}

js

/*

请求地址:http://wthrcdn.etouch.cn/weather_mini

请求方法:get

请求参数:city(城市名)

响应内容:天气信息
1. 点击回车
2. 查询数据
3. 渲染数据
*/

var app = new Vue({

el:“#app”,

data:{

city:‘’,

weatherList:[]

},

methods: {

searchWeather:function(){

// console.log(‘天气查询’);

// console.log(this.city);

// 调用接口

// 保存this

var that = this;

axios.get(‘http://wthrcdn.etouch.cn/weather_mini?city=’+this.city)

.then(function(response){

// console.log(response);

console.log(response.data.data.forecast);

that.weatherList = response.data.data.forecast

})

.catch(function(err){})

}

},

})

3、音乐播放器

html
悦听player

<input type=“text” autocomplete=“off” v-model=“query” @keyup.enter=“searchMusic” />

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后：

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

点击这里领取Web前端开发经典面试题

.fr{

float:right;

}

js

/*

请求地址:http://wthrcdn.etouch.cn/weather_mini

请求方法:get

请求参数:city(城市名)

响应内容:天气信息
1. 点击回车
2. 查询数据
3. 渲染数据
*/

var app = new Vue({

el:“#app”,

data:{

city:‘’,

weatherList:[]

},

methods: {

searchWeather:function(){

// console.log(‘天气查询’);

// console.log(this.city);

// 调用接口

// 保存this

var that = this;

axios.get(‘http://wthrcdn.etouch.cn/weather_mini?city=’+this.city)

.then(function(response){

// console.log(response);

console.log(response.data.data.forecast);

that.weatherList = response.data.data.forecast

})

.catch(function(err){})

}

},

})

3、音乐播放器

html
悦听player

<input type=“text” autocomplete=“off” v-model=“query” @keyup.enter=“searchMusic” />

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-h2eunWMK-1712978222799)]

[外链图片转存中…(img-0xipyqUD-1712978222799)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

[外链图片转存中…(img-rw1qwHsM-1712978222800)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后：

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

点击这里领取Web前端开发经典面试题