<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>9102全员学Vue--2.怎么三两下拼出一个页面 | Here. There.</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3, minimum-scale=1">
<meta name="author" content="被删">
<meta name="description" content="本节内容主要包括使用Vue框架过程中需要掌握的一些基本概念，以及怎么使用现有的一些开源库和组件快速创建项目。另外再附赠对状态管理、数据传递的一些方法和理解叭。总而言之，这一节开始会是与Vue紧密相关的内容啦。">
<link rel="alternate" href="/atom.xml" title="Here. There." type="application/atom+xml">
<link rel="icon" href="/img/favicon.ico">
<link rel="apple-touch-icon" href="/img/pacman.jpg">
<link rel="apple-touch-icon-precomposed" href="/img/pacman.jpg">
<link rel="stylesheet" href="/css/style.css">
<script type="text/javascript">
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "//hm.baidu.com/hm.js?3d902de4a19cf2bf179534ffd2dd7b7f";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<meta name="generator" content="Hexo 6.3.0"></head>
<body>
<header>
<div>
<div id="imglogo">
<a href="/"><img src="/img/sun.png" alt="Here. There." title="Here. There."/></a>
</div>
<div id="textlogo">
<h1 class="site-name"><a href="/" title="Here. There.">Here. There.</a></h1>
<h2 class="blog-motto">Love ice cream. Love sunshine. Love life. Love the world. Love myself. Love you.</h2>
</div>
<div class="navbar"><a class="navbutton navmobile" href="#" title="菜单">
</a></div>
<nav class="animated">
<ul>
<li><a href="/">首页</a></li>
<li><a target="_blank" rel="noopener" href="https://github.com/godbasin/godbasin.github.io">所有文章</a></li>
<li><a href="/archives">归档</a></li>
<li><a href="/categories">分类</a></li>
<li><a href="https://godbasin.github.io/front-end-playground">前端游乐场</a></li>
<li><a href="/about">关于我</a></li>
</ul>
</nav>
</div>
</header>
<div id="container">
<div id="main" class="post" itemscope itemprop="blogPost">
<article itemprop="articleBody">
<header class="article-info clearfix">
<h1 itemprop="name">
<a href="/2019/07/11/vue-for-everyone-2/" title="9102全员学Vue--2.怎么三两下拼出一个页面" itemprop="url">9102全员学Vue--2.怎么三两下拼出一个页面</a>
</h1>
<p class="article-author">By
<a href="https://godbasin.github.io" title="被删">被删</a>
</p>
<p class="article-time">
<time datetime="2019-07-11T15:09:51.000Z" itemprop="datePublished">2019-07-11</time>
更新日期:<time datetime="2019-07-11T15:20:44.836Z" itemprop="dateModified">2019-07-11</time>
</p>
</header>
<div class="article-content">
<div id="toc" class="toc-article">
<strong class="toc-title">文章目录</strong>
<ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#Vue%E5%9F%BA%E6%9C%AC%E6%A6%82%E5%BF%B5"><span class="toc-number">1.</span> <span class="toc-text">Vue基本概念</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#Vue%E7%BB%84%E4%BB%B6"><span class="toc-number">1.1.</span> <span class="toc-text">Vue组件</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F"><span class="toc-number">1.1.1.</span> <span class="toc-text">生命周期</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E6%8D%AE"><span class="toc-number">1.1.2.</span> <span class="toc-text">数据</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E8%8F%9C%E5%8D%95"><span class="toc-number">1.1.2.1.</span> <span class="toc-text">1. 菜单</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E5%88%97%E8%A1%A8"><span class="toc-number">1.1.2.2.</span> <span class="toc-text">2. 列表</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%B9%E6%B3%95"><span class="toc-number">1.1.3.</span> <span class="toc-text">方法</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BB%84%E4%BB%B6"><span class="toc-number">1.2.</span> <span class="toc-text">组件</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BB%84%E4%BB%B6%E7%9A%84%E8%87%AA%E6%88%91%E4%BF%AE%E5%85%BB"><span class="toc-number">1.2.1.</span> <span class="toc-text">组件的自我修养</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Vue-%E7%BB%84%E4%BB%B6"><span class="toc-number">1.2.2.</span> <span class="toc-text">Vue 组件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Element"><span class="toc-number">1.2.3.</span> <span class="toc-text">Element</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E4%BD%BF%E7%94%A8-Element"><span class="toc-number">1.2.3.1.</span> <span class="toc-text">1. 使用 Element</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E4%BD%BF%E7%94%A8-Element-%E7%BB%84%E4%BB%B6"><span class="toc-number">1.2.3.2.</span> <span class="toc-text">2. 使用 Element 组件</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%A1%B5%E9%9D%A2%E7%BB%91%E5%AE%9A"><span class="toc-number">1.2.4.</span> <span class="toc-text">页面绑定</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#0-Vue-%E7%BB%91%E5%AE%9A%E8%AF%AD%E6%B3%95"><span class="toc-number">1.2.4.1.</span> <span class="toc-text">0. Vue 绑定语法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E8%8F%9C%E5%8D%95%E7%BB%91%E5%AE%9A"><span class="toc-number">1.2.4.2.</span> <span class="toc-text">1. 菜单绑定</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E5%88%97%E8%A1%A8%E7%BB%91%E5%AE%9A"><span class="toc-number">1.2.4.3.</span> <span class="toc-text">2. 列表绑定</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-%E8%A1%A8%E5%8D%95%E7%BB%91%E5%AE%9A"><span class="toc-number">1.2.4.4.</span> <span class="toc-text">3. 表单绑定</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AF%BE%E5%90%8E%E4%BD%9C%E4%B8%9A"><span class="toc-number">1.2.5.</span> <span class="toc-text">课后作业</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BB%93%E6%9D%9F%E8%AF%AD"><span class="toc-number">1.3.</span> <span class="toc-text">结束语</span></a></li></ol></li></ol>
</div>
<p>本节内容主要包括使用Vue框架过程中需要掌握的一些基本概念，以及怎么使用现有的一些开源库和组件快速创建项目。另外再附赠对状态管理、数据传递的一些方法和理解叭。总而言之，这一节开始会是与Vue紧密相关的内容啦。<br><span id="more"></span></p>
<h1 id="Vue基本概念"><a href="#Vue基本概念" class="headerlink" title="Vue基本概念"></a>Vue基本概念</h1><p>首先，要快速写出来一个 Vue 项目，要先理解一些基本的概念。概念这样的东西，一个个介绍讲解会很枯燥，那既然这一节内容是快速创建一个 Vue 项目，那我们就一边讲怎么写一边介绍相关概念叭。</p>
<p>这里会主要以管理端这样的页面为最终效果，毕竟这是最常见也是最容易写的一类型页面。</p>
<h2 id="Vue组件"><a href="#Vue组件" class="headerlink
被删前端博客--喜欢请star.zip
需积分: 1 101 浏览量
2024-03-01
23:55:07
上传
评论
收藏 5.36MB ZIP 举报
被删前端博客--喜欢请star.zip （620个子文件） 
index.md.bak 1KB style.css 43KB jquery.fancybox.css 5KB jquery.fancybox-buttons.css 2KB jquery.fancybox-thumbs.css 735B coveredbyyourgrace-webfont.eot 42KB fontawesome-webfont.eot 37KB
fancybox_loading@2x.gif 14KB fancybox_loading.gif 6KB blank.gif 43B
index.html 119KB index.html 108KB index.html 103KB index.html 102KB index.html 98KB index.html 89KB index.html 86KB index.html 86KB index.html 84KB index.html 84KB index.html 83KB index.html 83KB index.html 83KB index.html 83KB index.html 82KB index.html 82KB index.html 80KB index.html 80KB index.html 79KB index.html 78KB index.html 78KB index.html 77KB index.html 75KB index.html 75KB index.html 74KB index.html 73KB index.html 73KB index.html 73KB index.html 72KB index.html 72KB index.html 72KB index.html 72KB index.html 71KB index.html 71KB index.html 71KB index.html 70KB index.html 70KB index.html 70KB index.html 70KB index.html 70KB index.html 70KB index.html 69KB index.html 69KB index.html 68KB index.html 68KB index.html 68KB index.html 68KB index.html 68KB index.html 68KB index.html 68KB index.html 67KB index.html 67KB index.html 67KB index.html 67KB index.html 67KB index.html 67KB index.html 66KB index.html 66KB index.html 66KB index.html 66KB index.html 66KB index.html 66KB index.html 66KB index.html 66KB index.html 66KB index.html 65KB index.html 65KB index.html 65KB index.html 65KB index.html 64KB index.html 64KB index.html 64KB index.html 64KB index.html 64KB index.html 64KB index.html 64KB index.html 64KB index.html 64KB index.html 63KB index.html 63KB index.html 63KB index.html 63KB index.html 63KB index.html 63KB index.html 63KB index.html 63KB index.html 62KB index.html 62KB index.html 62KB index.html 62KB共 620 条
- 1
- 2
- 3
- 4
- 5
- 6
- 7
资源评论
