小白初入前端之Vue.js的学习之路——初识vue
【摘要】 其实本人之前在上学时学习过一小点点的前端，主要是后端，以致于后来去一家公司实习。当时维护某明星的个人网站，在此期间不可避免写一些前端的代码，当是时还在使用jQuery，感觉好方便。本人窃以为前端的发展前途远大于后端，因为人们都是视觉动物嘛，喜欢交互性强的东西， 后端大家都看不见，没意思，所以现在开学慢慢接触学习前端。学习前端不能学习目前不太用的东西，大家都说要熟读jQuery等的源码等，对思...
其实本人之前在上学时学习过一小点点的前端，主要是后端，以致于后来去一家公司实习。当时维护某明星的个人网站，在此期间不可避免写一些前端的代码，当是时还在使用jQuery，感觉好方便。
本人窃以为前端的发展前途远大于后端，因为人们都是视觉动物嘛，喜欢交互性强的东西， 后端大家都看不见，没意思，所以现在开学慢慢接触学习前端。
学习前端不能学习目前不太用的东西，大家都说要熟读jQuery等的源码等，对思维有提升。但某以为还是先学习目前的潮流比较好，会做项目了再慢慢细细研究。所以选择从Vue开始，同步学习基础知识，齐头并进。嘿哈！
Vue是中国人写的，所以文档对于我们阅读很友好，very good！那么接下来开始使用vue吧。当然我首先还是有一丢丢html和js知识基础的，css完全不会，不过不影响，用bootstrap等css框架即可。
读了基础的vue文档之后，准备着手写一个记事本的前端小页面，在此将源码贴出来，css的样式完全用的bootstrap的，不要问我为什么这么用，我也不知道，反正样式出来了，并且我们毕竟以vue为主。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>My NoteBook</title>
<!-- Bootstrap core CSS -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Static navbar -->
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">My NoteBook</a>
</div>
</div>
</nav>
<div id="app">
<div class="container">
<div class="form-group-lg">
<input type="text" class="form-control" placeholder="请输入笔记" @keyup.enter="add" v-model="message">
</div>
<div style="margin-top: 30px;" v-for="(item, index) in notes">
<blockquote>
<div class="container">
<div class="row">
<div class="col-md-10">
{{ item }}
</div>
<div class="col-md-2">
<button type="button" class="btn btn-danger" @click="del(index)">删除</button>
</div>
</div>
</div>
</blockquote>
</div>
</div> <!-- /container -->
<div class="container" style="margin-top: 30px;">
<div class="row">
<div class="col-md-10">
共{{ notes.length }}条笔记
</div>
<div class="col-md-2">
<button type="button" class="btn btn-danger" @click="remove_all">清除所有内容</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/vue.min.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
notes: [],
message: "",
},
methods: {
add: function () {
this.notes.push(this.message);
this.message = "";
},
del: function (index) {
this.notes.splice(index, 1);
},
remove_all: function () {
this.notes = [];
this.message = "";
}
},
})
</script>
</body>
</html>有点长哈，我们在代码末端创建了vue实例，在html中其实仅仅用到了vue提供的插值操作{{ }}和事件响应@click（即v-on）,十分简单，适合入门。那么我们将成果图放在此处。
今后再学习，再进步。
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
作者其他文章
评论（0）