-
Notifications
You must be signed in to change notification settings - Fork 0
/
atom.xml
98 lines (52 loc) · 92.5 KB
/
atom.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>胡迪的博客</title>
<link href="/atom.xml" rel="self"/>
<link href="http://yoursite.com/"/>
<updated>2019-10-11T03:34:28.539Z</updated>
<id>http://yoursite.com/</id>
<author>
<name>Helen Hu</name>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title>Hello World</title>
<link href="http://yoursite.com/2019/10/11/hello-world/"/>
<id>http://yoursite.com/2019/10/11/hello-world/</id>
<published>2019-10-11T03:34:28.539Z</published>
<updated>2019-10-11T03:34:28.539Z</updated>
<content type="html"><![CDATA[<p>Welcome to <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a>! This is your very first post. Check <a href="https://hexo.io/docs/" target="_blank" rel="noopener">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a href="https://hexo.io/docs/troubleshooting.html" target="_blank" rel="noopener">troubleshooting</a> or you can ask me on <a href="https://github.com/hexojs/hexo/issues" target="_blank" rel="noopener">GitHub</a>.</p><h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><h3 id="Create-a-new-post"><a href="#Create-a-new-post" class="headerlink" title="Create a new post"></a>Create a new post</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo new <span class="string">"My New Post"</span></span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/writing.html" target="_blank" rel="noopener">Writing</a></p><h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo server</span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/server.html" target="_blank" rel="noopener">Server</a></p><h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo generate</span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/generating.html" target="_blank" rel="noopener">Generating</a></p><h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo deploy</span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/deployment.html" target="_blank" rel="noopener">Deployment</a></p>]]></content>
<summary type="html">
<p>Welcome to <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a>! This is your very first post. Check <a href="https://hexo.
</summary>
</entry>
<entry>
<title>面试中不可不知道的node.js与es6重要知识点梳理</title>
<link href="http://yoursite.com/2018/10/16/node.js&es6/"/>
<id>http://yoursite.com/2018/10/16/node.js&es6/</id>
<published>2018-10-15T16:00:00.000Z</published>
<updated>2019-10-17T01:50:06.815Z</updated>
<content type="html"><![CDATA[<h2 id="es6-在面试过程中被提及的概率很大"><a href="#es6-在面试过程中被提及的概率很大" class="headerlink" title="es6(在面试过程中被提及的概率很大)"></a>es6(在面试过程中被提及的概率很大)</h2><ul><li>箭头函数中this指向</li></ul><blockquote><p>箭头函数没有自己的this,它的this来自外部对象的this,箭头函数的this是在定义函数时绑定的，不>是在执行过程中绑定的。即函数在定义时，this就继承了定义函数的对象。</p></blockquote><ul><li>let/const/var的区别<blockquote><p><strong><code>let</code></strong>是定义变量的关键字,它没有变量提升,必须先定义再使用,且不能重复定义,它具有块级作用域,let定义的全局变量不会附加到window对象的属性中(不同通过window调用)</p></blockquote></li></ul><blockquote><p><strong><code>const</code></strong>是定义常量的,也就是数据只读,不可以修改,const定义的常量名,常量名一般采用全大写的方式,一旦定义就不能修改,一旦声明，就必须立即初始化,具有块级作用域,没有变量提升，必须先定义再使用,const实际上保证的，并不是常量的值不得改动，而是只能保证这个指针是固定的（即总是指向一个固定的地址）</p></blockquote><blockquote><p><strong><code>var</code></strong>定义变量会产生变量的提升,var可以通过window调用,没有块级作用域</p></blockquote><pre><code>关于var const let 总结</code></pre><table><thead><tr><th align="center">关键字</th><th align="center">变量提升</th><th align="center">块级作用域</th><th align="center">初始值</th><th align="center">更改值</th><th align="center">通过window调用</th></tr></thead><tbody><tr><td align="center">let</td><td align="center">×</td><td align="center">√</td><td align="center">-</td><td align="center">Yes</td><td align="center">No</td></tr><tr><td align="center">const</td><td align="center">×</td><td align="center">√</td><td align="center">Yes</td><td align="center">No</td><td align="center">No</td></tr><tr><td align="center">var</td><td align="center">√</td><td align="center">×</td><td align="center">-</td><td align="center">Yes</td><td align="center">Yes</td></tr></tbody></table><ul><li>解构赋值(数组,对象)–重要的</li></ul><blockquote><p>ES 6 允许从数组和对象中提取值，对变量进行赋值<br>解构:从数组和对象中提取值<br>赋值:把解构之后的值保存到变量</p></blockquote><ul><li>array对象的拓展</li></ul><blockquote><ol><li>扩展运算符 (语法:console.log(…[1,2,3]);)它的作用是把数组中的元素一项项地展开：把一个整体的数组拆开成单个的元素。</li></ol></blockquote><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">应用一:数组拷贝</span><br><span class="line"><span class="keyword">var</span> arr1 = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]</span><br><span class="line"><span class="keyword">var</span> arr2 = [...arr1]</span><br><span class="line">应用二:数组合并</span><br><span class="line"><span class="keyword">var</span> arr0 = [<span class="string">'a'</span>,<span class="string">'b'</span>];</span><br><span class="line"><span class="keyword">var</span> arr1 = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>];</span><br><span class="line"><span class="keyword">var</span> arr2 = [<span class="number">4</span>, ...arr1];</span><br><span class="line"><span class="keyword">var</span> arr3 = [...arr0 ,...arr1];</span><br><span class="line">应用三:<span class="built_in">Math</span>.max()</span><br><span class="line"><span class="built_in">Math</span>.max(<span class="number">1</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">6</span>);</span><br><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">6</span>];</span><br><span class="line"><span class="built_in">Math</span>.max(...arr);</span><br><span class="line"><span class="comment">// 或者 Math.max.apply(this,[1,2,3,566])</span></span><br></pre></td></tr></table></figure><blockquote><ol start="2"><li>Array.from()方法<br>数组 = Array.from(非数组对象)</li></ol></blockquote><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">3.</span> <span class="built_in">Array</span>.find()方法 </span><br><span class="line">查找到是数组中的元素</span><br><span class="line"><span class="keyword">let</span> result = 数组.find(<span class="function"><span class="keyword">function</span>(<span class="params">item,index,self</span>)</span>{ </span><br><span class="line"> <span class="comment">//.... </span></span><br><span class="line"> <span class="comment">// 如果满足查找的条件</span></span><br><span class="line"> <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">})</span><br></pre></td></tr></table></figure><blockquote><ol start="4"><li>Array.findIndex()方法<br>它查找的数组中的元素的下标。</li></ol></blockquote><blockquote><ol start="5"><li>Array.inclues()方法<br>数组.includes(表示查找的内容，表示开始查找的位置) 参数2为可选项</li></ol></blockquote><ul><li>class类/实现继承</li></ul><blockquote><p>class实现继承的方式为extends</p></blockquote><ul><li>set对象拓展</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Set</span>是ES6 中新增的内置对象，类似于数组，但是成员的值没有重复的值。</span><br><span class="line">* 应用场景:数组去重</span><br><span class="line">案例一:<span class="keyword">let</span> arr = [<span class="number">1</span>,<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">3</span>];</span><br><span class="line"><span class="built_in">console</span>.log([...new <span class="built_in">Set</span>(arr)])</span><br><span class="line"></span><br><span class="line">案例二:<span class="keyword">const</span> s = <span class="keyword">new</span> <span class="built_in">Set</span>();</span><br><span class="line">[<span class="number">2</span>,<span class="number">3</span>,<span class="number">5</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">2</span>,<span class="number">2</span>].forEach(<span class="function"><span class="params">x</span>=></span>s.add(x));</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> i <span class="keyword">of</span> s){</span><br><span class="line"> <span class="built_in">console</span>.log(i);</span><br><span class="line">}</span><br><span class="line"><span class="comment">// 2 3 5 4 </span></span><br><span class="line"><span class="comment">//案例二代码摘自阮一峰书</span></span><br></pre></td></tr></table></figure><blockquote><ul><li>Set 的成员方法<br>size：属性，获取 set 中成员的个数，相当于数组中的 length<br>add(value)：添加某个值，返回 Set 结构本身。<br>delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。<br>has(value)：返回一个布尔值，表示该值是否为Set的成员。<br>clear()：清除所有成员，没有返回值。<br>forEach:遍历</li></ul></blockquote><ul><li>新增的数据类型以及含义</li></ul><blockquote><p>*ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。<br>Symbol 值通过Symbol函数生成。这就是说，对象的属性名现在可以有两种类型，一种是原来就有的字符串，另一种就是新增的 Symbol 类型。凡是属性名属于 Symbol 类型，就都是独一无二的，可以保证不会与其他属性名产生冲突。</p></blockquote><blockquote><p>Symbol函数前不能使用new命令，否则会报错。这是因为生成的 Symbol 是一个原始类型的值，不是对象。也就是说，由于 Symbol 值不是对象，所以不能添加属性。基本上，它是一种类似于字符串的数据类型。</p></blockquote><ul><li>async/await的基本含义</li></ul><blockquote><p>async它用来修饰一个函数，会返回一个promise对象，可以使用then方法添加回调函数。当函数执行时，如果遇到 了await就会先返回，等 到异步操作完成，再接着执行函数体后面的语句。</p></blockquote><blockquote><p>await接一个promise对象， 它会自动解析这个promise对象中的promiseValue。只能出现在async函数中。一般在后面接一个函数，而这个函数会返回一个promise对象</p></blockquote><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">'fs'</span>);</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">readFile</span>(<span class="params">filename</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =></span> {</span><br><span class="line"> fs.readFile(filename, <span class="string">'utf8'</span>, (err, data) => {</span><br><span class="line"> <span class="keyword">if</span> (err) {</span><br><span class="line"> resolve(<span class="literal">null</span>);</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> resolve(data);</span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"> });</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">dosomethin</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">let</span> rs = <span class="keyword">await</span> readFile();</span><br><span class="line">}</span><br></pre></td></tr></table></figure><ul><li>Promise的基本使用以及几个状态常见的含义—重要的</li></ul><blockquote><p>promise有三种状态:pending(就绪),resolved(成功解决),rejected(拒绝)</p></blockquote><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">示例:</span><br><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">'fs'</span>);</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">readFile</span>(<span class="params">filename</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =></span> {</span><br><span class="line"> fs.readFile(filename, <span class="string">'utf8'</span>, (err, data) => {</span><br><span class="line"> <span class="keyword">if</span> (err) {</span><br><span class="line"> reject(err);</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> resolve(data);</span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"> });</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">readFile(<span class="string">'./server.js1'</span>)</span><br><span class="line"> .then(<span class="function"><span class="params">rs</span> =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(rs);</span><br><span class="line"> })</span><br><span class="line"> .catch(<span class="function"><span class="params">err</span> =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'err'</span>, err);</span><br><span class="line"> });</span><br></pre></td></tr></table></figure><h2 id="node-js"><a href="#node-js" class="headerlink" title="node.js"></a>node.js</h2><ul><li>npm是什么?如何去发布一个自己的包</li></ul><blockquote><p>npm是包管理工具<br>先准备好自己要发布的包,然后执行以下命令npm adduser/npm login —–>npm pulish</p></blockquote><ul><li>除了npm还是用过其它的包管理工具吗?</li></ul><blockquote><p>yarn 还有 cnpm</p></blockquote><ul><li>node中的模块是什么,什么是模块加载机制?</li></ul><blockquote><p>一个js文件中可以引入其他的js文件，能使用引入的js文件的中的变量、数据，这种特性就称为模块化。</p></blockquote><blockquote><p>模块加载机制:<br>内部模块 - node.js提供的模块如 fs,http,path等<br>自定模块 - 我们自己写的模块<br>第三方模块 - 通过npm安装的模块<br>使用require引入相应的模块，即可使用。</p></blockquote><ul><li>简述一下什么是事件循环 <strong>eventloop</strong> </li></ul><p><img alt="1571186917466" data-src="C:%5CUsers%5CAdministrator%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5C1571186917466.png" class="lozad"></p><blockquote><p>*Event Loop即事件循环，是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制，也就是我们经常使用异步的原理。</p></blockquote><blockquote><p>*JS是单线程执行的，而基于事件循环模型，形成了基本没有阻塞（除了alert或同步XHR等操作）的状态<br>————————————————</p></blockquote><blockquote><p>*JavaScript的事件分两种，宏任务(macro-task)和微任务(micro-task)<br>宏任务：包括整体代码script，setTimeout，setInterval<br>微任务：Promise.then(非new Promise)，process.nextTick(node中)</p></blockquote><blockquote><p>*执行栈在执行完同步任务后，查看执行栈是否为空，如果执行栈为空，就会去检查微任务(microTask)队列是否为空，如果为空的话，就执行Task（宏任务），否则就一次性执行完所有微任务。<br>每次单个宏任务执行完毕后，检查微任务(microTask)队列是否为空，如果不为空的话，会按照先入先出的规则全部执行完微任务(microTask)后，设置微任务(microTask)队列为null，然后再执行宏任务，如此循环。</p></blockquote><p>链接：<a href="https://juejin.im/post/5c3d8956e51d4511dc72c200" target="_blank" rel="noopener">https://juejin.im/post/5c3d8956e51d4511dc72c200</a></p><ul><li>什么是事件驱动/和非阻塞I/O模型?</li></ul><blockquote><p>*事件驱动模型是一种响应事件模型，事件驱动就是在持续事务管理的过程中，由当前时间点上出现的事件引发的调动可用资源执行相关任务，解决不断出现的问题，防止事务堆积的一种策略。</p></blockquote><ul><li>简单描述一下为什么会产生跨域问题,该如何解决?</li></ul><blockquote><p>浏览器出于安全而有同源策略,即协议,端口,域名的必须一致,非同源策略就会产生跨域问题</p></blockquote><blockquote><p>解决方法一:jsonp跨域<br>解决方法二:cors 跨域资源共享,允许发送ajax</p></blockquote><ul><li>jsonp的原理是什么?</li></ul><blockquote><p>利用标签请求资源不受同源策略限制的特点,创建script标签,指定src,利用标签把请求发出去,定义好一个处理事件,把数据梳理函数的名称传给后端,后端返回符合js函数调用语法的字符串</p></blockquote><ul><li>express是什么?还使用过类似的东西吗?</li></ul><blockquote><p>express是一种框架,Koa,Meteor,socketstream ,Sails.js </p></blockquote><ul><li>使用node.js还能干些什么<blockquote></blockquote></li></ul><p>*Web开发：Express + EJS + Mongoose/MySQL<br>*REST开发：Restify<br>*Web聊天室(IM)：Express + Socket.io<br>*Web爬虫：Cheerio/Request<br>*Web博客：Hexo</p><ul><li>Web论坛: nodeclub </li><li>Web幻灯片：Cleaver </li><li>前端包管理平台: bower.js</li><li>OAuth认证：Passport</li><li>定时任务工具: later</li><li>浏览器环境工具: browserify</li><li>命令行编程工具：Commander</li><li>Web控制台工具: tty.js</li><li>客户端应用工具: node-webwit</li><li>操作系统: node-os</li></ul><h2 id="预习Vue"><a href="#预习Vue" class="headerlink" title="预习Vue"></a>预习<a href="https://cn.vuejs.org" target="_blank" rel="noopener">Vue</a></h2><ul><li>Vue是什么?</li></ul><blockquote><p>是一套用于构建用户界面的渐进式框架。</p></blockquote><ul><li>什么是SPA</li></ul><blockquote></blockquote><p>Single Page Application（单页应用程序）<br>就是只有一个Web页面的应用，是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序。</p><blockquote></blockquote><p>优势：</p><blockquote></blockquote><p> 1 减少了请求体积，加快页面响应速度，降低了对服务器的压力<br> 2 更好的用户体验，让用户在web app感受native app的流畅<br>缺点：<br> 因为技术使用了ajax，导致页面不利于SEO，但是可以通过其他技术去规避<br> （SEO原则：搜索引擎的蜘蛛只识别href的一般超链接，而不识别JavaScript代码，遇到一般超链接就会爬进去，遇到JavaScript不会爬进去。即，搜索引擎抓不到AJAX动态加载的内容。）<br> 1）服务端渲染 2）页面静态化（专门为爬虫准备的）<br>主要技术点：</p><blockquote></blockquote><p>1 ajax<br>2 锚点的使用（window.location.hash #）<br>3 hashchange 事件</p><ul><li><p>什么是mvvm?和mvc之间的区别是什么</p><blockquote></blockquote><p>MVC即model，view，control，jQuery就是采用的这种设计模式<br>MVVM即model，view，viewmodel，它是数据驱动模式，即所有的一切通过操作数据来进行，而尽量避免操作dom树。</p></li><li><p>如何去创建一个vue实例</p></li></ul><blockquote><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">>1. body中,设置Vue管理的视图<div id="app"></div></span><br><span class="line">>2. 引入vue.js</span><br><span class="line">>3. 实例化Vue对象 new Vue();</span><br><span class="line">>4. 设置Vue实例的选项:如el、data... </span><br><span class="line">>new Vue({选项:值});</span><br><span class="line">>5. 在<div id='app'></div>中通过{{ }}使用data中的数据</span><br><span class="line">></span><br></pre></td></tr></table></figure></blockquote><ul><li>使用哪个指令实现数据双向绑定?</li></ul><blockquote><p>使用v-model指令，可以实现表单元素和Model中数据的双向绑定，并且v-model指令只能运用在表单元素中。</p></blockquote><ul><li>学会查阅官方API</li></ul><p>好哒~</p>]]></content>
<summary type="html">
<h2 id="es6-在面试过程中被提及的概率很大"><a href="#es6-在面试过程中被提及的概率很大" class="headerlink" title="es6(在面试过程中被提及的概率很大)"></a>es6(在面试过程中被提及的概率很大)</h2><ul>
<l
</summary>
<category term="Javascript" scheme="http://yoursite.com/categories/Javascript/"/>
<category term="ES6" scheme="http://yoursite.com/categories/Javascript/ES6/"/>
<category term="知识点" scheme="http://yoursite.com/tags/%E7%9F%A5%E8%AF%86%E7%82%B9/"/>
</entry>
<entry>
<title>Vue基础01</title>
<link href="http://yoursite.com/2018/10/16/Vue01self/"/>
<id>http://yoursite.com/2018/10/16/Vue01self/</id>
<published>2018-10-15T16:00:00.000Z</published>
<updated>2019-10-17T03:40:07.433Z</updated>
<content type="html"><![CDATA[<h1 id="Vue基础01"><a href="#Vue基础01" class="headerlink" title="Vue基础01"></a>Vue基础01</h1><h2 id="vue为什么这么秀"><a href="#vue为什么这么秀" class="headerlink" title="vue为什么这么秀?"></a>vue为什么这么秀?</h2><blockquote><ul><li>Vue是一个优秀的<strong><code>前端框架</code></strong></li></ul></blockquote><blockquote><ol><li>和DOM<strong><code>解耦</code></strong></li><li>适应当前<strong><code>SPA</code></strong>的项目开发 </li><li>当下各种新框架都采用了<strong><code>类Vue</code></strong>或者<strong><code>类React</code></strong>的语法去作 为主语法, 微信小程序/MpVue/uni-app </li></ol></blockquote><p>##vue 特点</p><blockquote><ol><li><strong><code>响应式数据</code></strong> 数据驱动视图 可以让我们只关注数据</li><li><strong><code>MVVM</code></strong> 双向绑定 </li><li><strong><code>指令</code></strong>增强了html功能 新特性</li><li><strong><code>组件化开发</code></strong> 复用代码</li></ol></blockquote><h2 id="vue使用说明书之实例化一个vue对象"><a href="#vue使用说明书之实例化一个vue对象" class="headerlink" title="vue使用说明书之实例化一个vue对象"></a>vue使用说明书之实例化一个vue对象</h2><blockquote><p><strong><code>步骤</code></strong>:</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">>1. body中,设置Vue管理的视图<span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line">>2. 引入vue.js</span><br><span class="line">>3. 实例化Vue对象 new Vue();</span><br><span class="line">>4. 设置Vue实例的选项:如el、data、methods </span><br><span class="line">>new Vue({选项:值});</span><br><span class="line">>5. 在<span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">'app'</span>></span><span class="tag"></<span class="name">div</span>></span>中通过{{ }}使用data中的数据</span><br><span class="line">></span><br></pre></td></tr></table></figure></blockquote><h2 id="实例选项-el"><a href="#实例选项-el" class="headerlink" title="实例选项-el"></a>实例选项-el</h2><blockquote><ul><li>作用:当前Vue实例所管理的html视图</li><li>值:通常是id选择器(或者是一个 HTMLElement 实例)</li><li>不要让el所管理的视图是html或者body!</li><li>el可以用id选择器,class选择器,dom对象设置</li></ul></blockquote><h2 id="实例选项-data"><a href="#实例选项-data" class="headerlink" title="实例选项-data"></a>实例选项-data</h2><blockquote><ul><li>Vue 实例的数据对象，是响应式数据(数据驱动视图) 数据变化 => 视图变化</li><li>可以通过 <code>vm.$data</code> 访问原始数据对象</li><li>Vue 实例也代理了 data 对象上所有的属性，因此访问 <code>vm.a</code> 等价于访问 <code>vm.$data.a</code></li><li>视图中绑定的数据必须<strong><code>显示</code></strong>的初始化到 data 中</li><li>数据对象的更新方式 直接 采用 <strong><code>实例.属性 = 值</code></strong></li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">><span class="xml"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span></span><br><span class="line"><span class="xml">> <span class="tag"><<span class="name">p</span>></span>{{count}} <span class="tag"></<span class="name">p</span>></span></span></span><br><span class="line"><span class="xml">> <span class="tag"><<span class="name">p</span>></span> {{showMessage}}<span class="tag"></<span class="name">p</span>></span></span></span><br><span class="line"><span class="xml">> <span class="tag"><<span class="name">p</span>></span> {{list}}<span class="tag"></<span class="name">p</span>></span></span></span><br><span class="line"><span class="xml">></span></span><br><span class="line"><span class="xml">><span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line">><span class="xml"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./vue.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span></span><br><span class="line">><span class="xml"><span class="tag"><<span class="name">script</span>></span></span></span><br><span class="line"><span class="xml">> var vm = new Vue({</span></span><br><span class="line"><span class="xml">> el: "#app",</span></span><br><span class="line"><span class="xml">> data: {</span></span><br><span class="line"><span class="xml">> count: 1,</span></span><br><span class="line"><span class="xml">> showMessage: false,</span></span><br><span class="line"><span class="xml">> list: [1, 2, 3]</span></span><br><span class="line"><span class="xml">> },</span></span><br><span class="line"><span class="xml">> methods: {},</span></span><br><span class="line"><span class="xml">> });</span></span><br><span class="line"><span class="xml">></span></span><br><span class="line"><span class="xml">></span></span><br><span class="line"><span class="xml">> console.log(vm.count);</span></span><br><span class="line"><span class="xml">> console.log(vm.showMessage);</span></span><br><span class="line"><span class="xml">> console.log(vm.list);</span></span><br><span class="line"><span class="xml">></span></span><br><span class="line"><span class="xml">></span></span><br></pre></td></tr></table></figure></blockquote><h2 id="实例选项-methods"><a href="#实例选项-methods" class="headerlink" title="实例选项-methods"></a>实例选项-methods</h2><blockquote><ul><li>methods是一个对象</li><li>可以直接通过 VM 实例访问这些方法，或者在<strong>指令表达式中使用</strong>。</li><li>方法中的 <code>this</code> 自动绑定为 Vue 实例。</li><li>methods中所有的方法 同样也被代理到了 Vue实例对象上,都可通过this访问</li><li>注意，<strong><code>不应该使用箭头函数来定义 method 函数</code></strong> (例如 <code>plus: () => this.a++</code>)。理由是箭头函数绑定了父级作用域的上下文，所以 <code>this</code> 将不会按照期望指向 Vue 实例，<code>this.a</code> 将是 undefined</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">><span class="keyword">new</span> Vue({</span><br><span class="line">> el:<span class="string">"#app"</span>,</span><br><span class="line">> data:{</span><br><span class="line">> name:<span class="string">"Hello world"</span>,</span><br><span class="line">> name2:<span class="string">"Hello world2"</span></span><br><span class="line">> },</span><br><span class="line">> methods:{</span><br><span class="line">> fn1:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line">> <span class="comment">// 常规写法</span></span><br><span class="line">> <span class="built_in">console</span>.log(<span class="keyword">this</span>.name)</span><br><span class="line">> <span class="keyword">this</span>.fn2() <span class="comment">// 调用方法2</span></span><br><span class="line">> },</span><br><span class="line">> fn2() {</span><br><span class="line">> <span class="comment">// es6 写法</span></span><br><span class="line">> <span class="built_in">console</span>.log(<span class="keyword">this</span>.name2)</span><br><span class="line">> }</span><br><span class="line">> }</span><br><span class="line">>})</span><br><span class="line">></span><br></pre></td></tr></table></figure></blockquote><blockquote></blockquote><h2 id="插值表达式"><a href="#插值表达式" class="headerlink" title="插值表达式"></a>插值表达式</h2><blockquote><p>作用:会将绑定的数据实时的显示出来:</p><p>形式: 通过 <strong><code></code></strong>包裹的形式 </p><p>通过任何方式修改所绑定的数据,所显示的数据都会被实时替换(响应式数据)</p></blockquote><ul><li>a </li><li>a = 10 </li><li>a == 10 </li><li>a > 10</li><li>a + b + c</li><li>“1” + “2” + “3”</li><li>a.length.split(‘’)</li><li>a > 0 ? “成功” : “失败”</li></ul><p><strong><code>注意</code></strong>:不能写 <code>var a = 10; 分支语句 循环语句</code></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- js表达式 --></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>{{ 1 + 2 + 3 }}<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>{{ 1 > 2 }}<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="comment"><!-- name为data中的数据 --></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>{{ name + ':消息' }}<span class="tag"></<span class="name">p</span>></span> </span><br><span class="line"><span class="comment"><!-- count 为data中的数据 --></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>{{ count === 1 }}<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="comment"><!-- count 为data中的数据 --></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>{{ count === 1 ? "成立" : "不成立" }}<span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- 方法调用 --></span></span><br><span class="line"><span class="comment"><!-- fn为methods中的方法 --></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>{{ fn() }}<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="comment"><!-- list为data中的数据 数组类型 --></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>{{ list.reverse() }}<span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure><blockquote><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">><span class="xml"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span></span><br><span class="line"><span class="xml">> {{name+"真棒"}}</span></span><br><span class="line"><span class="xml">> <span class="tag"><<span class="name">p</span>></span> {{count+1}} <span class="tag"></<span class="name">p</span>></span> </span></span><br><span class="line"><span class="xml">> </span></span><br><span class="line"><span class="xml">> {{[...this.list].reverse().join("") }}</span></span><br><span class="line"><span class="xml">> {{name.split("").reverse().join("")}} </span></span><br><span class="line"><span class="xml">></span></span><br><span class="line"><span class="xml">></span></span><br><span class="line"><span class="xml">> <span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line">> <span class="xml"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./vue.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span></span><br><span class="line">> <span class="xml"><span class="tag"><<span class="name">script</span>></span></span></span><br><span class="line"><span class="xml">> var vm = new Vue({</span></span><br><span class="line"><span class="xml">> el:"#app",</span></span><br><span class="line"><span class="xml">> data:{</span></span><br><span class="line"><span class="xml">> name:"张三",</span></span><br><span class="line"><span class="xml">> count:2,</span></span><br><span class="line"><span class="xml">> list:[1,2,3]</span></span><br><span class="line"><span class="xml">> },</span></span><br><span class="line"><span class="xml">> methods:{},</span></span><br><span class="line"><span class="xml">></span></span><br><span class="line"><span class="xml">> });</span></span><br><span class="line"><span class="xml">>// {{name.split("").join("")}} </span></span><br><span class="line"><span class="xml">></span></span><br><span class="line"><span class="xml">></span></span><br></pre></td></tr></table></figure></blockquote><h2 id="系统指令-v-text-和-v-html"><a href="#系统指令-v-text-和-v-html" class="headerlink" title="系统指令-v-text 和 v-html"></a>系统指令-v-text 和 v-html</h2><blockquote><p>很像innerText和innerHTML</p><ul><li><p>v-text:更新标签中的内容</p><ul><li>v-text和插值表达式的区别<ul><li>v-text 更新<strong><code>整个</code></strong>标签中的内容</li><li>插值表达式: 更新标签中局部的内容</li></ul></li></ul></li><li><p>v-html:更新标签中的内容/标签</p><ul><li>可以渲染内容中的HTML标签</li><li>注意:尽量避免使用，容易造成危险 (XSS跨站脚本攻击)</li></ul><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line">> <span class="comment"><!-- v-text指令的值会替换标签内容 --></span></span><br><span class="line">> <span class="tag"><<span class="name">p</span>></span>{{str}}<span class="tag"></<span class="name">p</span>></span></span><br><span class="line">> <span class="tag"><<span class="name">p</span> <span class="attr">v-text</span>=<span class="string">"str"</span>></span><span class="tag"></<span class="name">p</span>></span></span><br><span class="line">> <span class="tag"><<span class="name">p</span> <span class="attr">v-text</span>=<span class="string">"str"</span>></span>我是p标签中的内容<span class="tag"></<span class="name">p</span>></span></span><br><span class="line">> <span class="tag"><<span class="name">p</span> <span class="attr">v-text</span>=<span class="string">"strhtml"</span>></span>我是p标签中的内容<span class="tag"></<span class="name">p</span>></span></span><br><span class="line">> <span class="tag"><<span class="name">p</span> <span class="attr">v-html</span>=<span class="string">"str"</span>></span><span class="tag"></<span class="name">p</span>></span></span><br><span class="line">> </span><br><span class="line">> <span class="comment"><!-- v-html指令的值(包括标签字符串)会替换掉标签的内容 --></span></span><br><span class="line">> <span class="tag"><<span class="name">p</span> <span class="attr">v-html</span>=<span class="string">"strhtml"</span>></span>我是p标签中的内容<span class="tag"></<span class="name">p</span>></span></span><br><span class="line">> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line">> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./vue.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line">> <span class="tag"><<span class="name">script</span>></span></span><br><span class="line"><span class="javascript">> <span class="keyword">new</span> Vue({</span></span><br><span class="line"><span class="javascript">> el: <span class="string">'#app'</span>,</span></span><br><span class="line">> data: {</span><br><span class="line"><span class="javascript">> str: <span class="string">'abc'</span>,</span></span><br><span class="line"><span class="xml">> strhtml: '<span class="tag"><<span class="name">span</span>></span>content<span class="tag"></<span class="name">span</span>></span>'</span></span><br><span class="line">> }</span><br><span class="line">> });</span><br><span class="line">> <span class="tag"></<span class="name">script</span>></span></span><br><span class="line">></span><br></pre></td></tr></table></figure></li></ul></blockquote><h2 id="系统指令-v-if-和-v-show"><a href="#系统指令-v-if-和-v-show" class="headerlink" title="系统指令-v-if 和 v-show"></a>系统指令-v-if 和 v-show</h2><blockquote><ul><li><p>使用: v-if 和 v-show 后面的表达式返回的布尔值 来决定 该元素显示隐藏</p></li><li><p><strong>注意</strong> : v-if 是直接决定元素 的 添加 或者删除 而 v-show 只是根据样式来决定 显示隐藏</p></li></ul><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line">> <span class="comment"><!-- 如果isShow的值是true ,就显示p标签 --></span></span><br><span class="line">> <span class="tag"><<span class="name">p</span> <span class="attr">v-if</span>=<span class="string">"isShow"</span>></span>我是p标签中的内容<span class="tag"></<span class="name">p</span>></span></span><br><span class="line">> <span class="tag"><<span class="name">p</span> <span class="attr">v-show</span>=<span class="string">"isShow"</span>></span>我是p标签中的内容<span class="tag"></<span class="name">p</span>></span></span><br><span class="line">> <span class="comment"><!-- 如果标签显示与隐藏切换频繁, 就使用v-show </span></span><br><span class="line"><span class="comment">> v-show本质是通过修改标签的display值</span></span><br><span class="line"><span class="comment">> --></span></span><br><span class="line">> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line">> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./vue.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line">> <span class="tag"><<span class="name">script</span>></span></span><br><span class="line"><span class="javascript">> <span class="keyword">new</span> Vue({</span></span><br><span class="line"><span class="javascript">> el: <span class="string">'#app'</span>,</span></span><br><span class="line">> data: {</span><br><span class="line"><span class="javascript">> isShow: <span class="literal">false</span></span></span><br><span class="line">> }</span><br><span class="line">> });</span><br><span class="line">> <span class="tag"></<span class="name">script</span>></span></span><br><span class="line">></span><br></pre></td></tr></table></figure></blockquote><blockquote><p><code>v-if</code> 有更高的切换开销，而 <code>v-show</code> 有更高的初始渲染开销。</p><p>因此，如果需要非常频繁地切换，则使用 <code>v-show</code> 较好；<br>如果在运行时条件很少改变，则使用 <code>v-if</code> 较好。</p></blockquote><p><strong><code>扩展</code></strong> 如果 有多个元素需要根据条件进行渲染，怎么办？我们可以用一个<strong><code>div标签</code></strong>来<strong><code>包裹多个元素</code></strong>，</p><p>但是这样的话 我们相当于<strong><code>多了一个div标签</code></strong>，我们可以采用一个<strong><code>template</code></strong>标签，来解决这个问题，template标签不会产生任何实质的标签在页面上，并且能完成相应的功能</p><blockquote><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line">> <span class="tag"><<span class="name">p</span> <span class="attr">v-html</span>=<span class="string">"nameHtml"</span> <span class="attr">v-if</span>=<span class="string">"showMessage"</span>></span><span class="tag"></<span class="name">p</span>></span></span><br><span class="line">> <span class="tag"><<span class="name">span</span> <span class="attr">v-show</span>=<span class="string">" showMessage"</span>></span>搜狗输入法很好用<span class="tag"></<span class="name">span</span>></span></span><br><span class="line">> <span class="tag"><<span class="name">template</span> <span class="attr">v-if</span>=<span class="string">"showMessage"</span>></span></span><br><span class="line">> <span class="tag"><<span class="name">p</span> <span class="attr">v-html</span>=<span class="string">"nameHtml"</span>></span><span class="tag"></<span class="name">p</span>></span></span><br><span class="line">> <span class="tag"><<span class="name">p</span> <span class="attr">v-html</span>=<span class="string">"nameHtml1"</span>></span><span class="tag"></<span class="name">p</span>></span></span><br><span class="line">> <span class="tag"><<span class="name">p</span> <span class="attr">v-html</span>=<span class="string">"nameHtml2"</span>></span><span class="tag"></<span class="name">p</span>></span></span><br><span class="line">> <span class="tag"><<span class="name">p</span> <span class="attr">v-html</span>=<span class="string">"nameHtml3"</span>></span><span class="tag"></<span class="name">p</span>></span></span><br><span class="line">> <span class="tag"><<span class="name">p</span>></span></span><br><span class="line">> {{content}}</span><br><span class="line">> <span class="tag"></<span class="name">p</span>></span></span><br><span class="line">> <span class="tag"><<span class="name">p</span>></span></span><br><span class="line">> {{content}}</span><br><span class="line">> <span class="tag"></<span class="name">p</span>></span></span><br><span class="line">> </span><br><span class="line">> <span class="tag"></<span class="name">template</span>></span></span><br><span class="line">> </span><br><span class="line">> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line">></span><br></pre></td></tr></table></figure></blockquote><blockquote><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">> <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue({</span><br><span class="line">> el: <span class="string">"#app"</span>,</span><br><span class="line">> data: {</span><br><span class="line">> showMessage: <span class="literal">true</span>,</span><br><span class="line">> content:<span class="number">123</span>,</span><br><span class="line">> nameHtml: <span class="string">"<p style='color:red'>张三丰今天加班</P>"</span>,</span><br><span class="line">> nameHtml1: <span class="string">"<p style='color:red'>张三丰今天加班1</P>"</span>,</span><br><span class="line">> nameHtml2: <span class="string">"<p style='color:red'>张三丰今天加班2</P>"</span>,</span><br><span class="line">> nameHtml3: <span class="string">"<p style='color:red'>张三丰今天加班3</P>"</span></span><br><span class="line">> },</span><br><span class="line">> methods: {},</span><br><span class="line">> });</span><br><span class="line">> </span><br><span class="line">> <span class="xml"><span class="comment"><!-- 注意:这里不可以两个p标签嵌套,否则既不报错,也不显示内容 --></span></span></span><br><span class="line"><span class="xml">> <span class="comment"><!-- 注意: template不可以跟v-show连用,否则既不报错,也不显示内容 --></span></span></span><br><span class="line"><span class="xml">> </span></span><br><span class="line"><span class="xml">></span></span><br></pre></td></tr></table></figure></blockquote><h2 id="系统指令-v-on绑定事件"><a href="#系统指令-v-on绑定事件" class="headerlink" title="系统指令-v-on绑定事件"></a>系统指令-v-on绑定事件</h2><blockquote><ul><li><p>场景: 使用v-on指令给元素绑定事件</p></li><li><p>使用: 绑定 v-on:事件名.修饰符=”方法名” 可使用 <strong><code>@事件名="方法名的方式"</code></strong> //一定是方法名!!!方法名字</p></li><li><p><strong>注意</strong> 方法名 中 可以采用$event的方式传形参 也可以直接写事件名 默认第一个参数为event事件参数</p></li><li><p>修饰符(以下都是,可不写)</p></li></ul><ul><li><code>.once</code> - 只触发一次回调。</li><li><code>.prevent</code> - 调用 <code>event.preventDefault()</code>。</li></ul><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br></pre></td><td class="code"><pre><span class="line">><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line">><span class="comment"><!-- v-on:xx事件名='当触发xx事件时执行的语句' --></span></span><br><span class="line">><span class="comment"><!-- 执行一段js语句:可以使用data中的属性 --></span></span><br><span class="line">><span class="tag"><<span class="name">button</span> <span class="attr">v-on:click</span>=<span class="string">"count += 1"</span>></span>增加 1<span class="tag"></<span class="name">button</span>></span></span><br><span class="line">><span class="comment"><!-- v-on的简写方法 --></span></span><br><span class="line">><span class="tag"><<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"count += 1"</span>></span>增加 1<span class="tag"></<span class="name">button</span>></span></span><br><span class="line">><span class="comment"><!-- 执行一个方法 --></span></span><br><span class="line">><span class="tag"><<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"add"</span>></span>增加 1<span class="tag"></<span class="name">button</span>></span></span><br><span class="line">><span class="comment"><!-- 执行一个方法、这种写法可以传形参 --></span></span><br><span class="line">><span class="tag"><<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"fn1(count)"</span>></span>执行fn1方法<span class="tag"></<span class="name">button</span>></span></span><br><span class="line">><span class="comment"><!-- 执行一个方法、这种写法可以传形参,特殊的形参$event --></span></span><br><span class="line">><span class="tag"><<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"fn2($event)"</span>></span>执行fn2方法<span class="tag"></<span class="name">button</span>></span></span><br><span class="line">><span class="tag"><<span class="name">hr</span>></span></span><br><span class="line">><span class="comment"><!-- v-on修饰符 如 once: 只执行一次 --></span></span><br><span class="line">><span class="tag"><<span class="name">button</span> @<span class="attr">click.once</span>=<span class="string">"fn4"</span>></span>只执行一次<span class="tag"></<span class="name">button</span>></span></span><br><span class="line">></span><br><span class="line">><span class="tag"><<span class="name">p</span>></span>上面的按钮被点击了 {{ count }} 次。<span class="tag"></<span class="name">p</span>></span></span><br><span class="line">><span class="tag"></<span class="name">div</span>></span></span><br><span class="line">><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./vue.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line">><span class="tag"><<span class="name">script</span>></span></span><br><span class="line"><span class="javascript">><span class="keyword">new</span> Vue({</span></span><br><span class="line"><span class="javascript">> el: <span class="string">'#app'</span>,</span></span><br><span class="line">> data: {</span><br><span class="line">> count: 0,</span><br><span class="line"><span class="javascript">> items: [<span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'c'</span>]</span></span><br><span class="line">> },</span><br><span class="line">> methods: {</span><br><span class="line"><span class="javascript">> add: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span></span><br><span class="line"><span class="javascript">> <span class="keyword">this</span>.count += <span class="number">1</span>;</span></span><br><span class="line">> },</span><br><span class="line"><span class="javascript">> fn1: <span class="function"><span class="keyword">function</span>(<span class="params">count</span>) </span>{</span></span><br><span class="line"><span class="javascript">> <span class="built_in">console</span>.log(count);</span></span><br><span class="line"><span class="javascript">> <span class="built_in">console</span>.log(<span class="string">'fn1方法被执行'</span>);</span></span><br><span class="line">> },</span><br><span class="line"><span class="javascript">> fn2: <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>{</span></span><br><span class="line"><span class="javascript">> <span class="built_in">console</span>.log(e);</span></span><br><span class="line"><span class="javascript">> <span class="built_in">console</span>.log(<span class="string">'fn2方法被执行'</span>);</span></span><br><span class="line">> },</span><br><span class="line"><span class="javascript">> fn3: <span class="function"><span class="keyword">function</span>(<span class="params">index</span>) </span>{</span></span><br><span class="line"><span class="javascript">> <span class="built_in">console</span>.log(index);</span></span><br><span class="line"><span class="javascript">> <span class="built_in">console</span>.log(<span class="string">'fn3方法被执行'</span>);</span></span><br><span class="line">> },</span><br><span class="line"><span class="javascript">> fn4: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span></span><br><span class="line"><span class="javascript">> <span class="built_in">console</span>.log(<span class="string">'fn4方法被执行了'</span>);</span></span><br><span class="line">> }</span><br><span class="line">> }</span><br><span class="line">>});</span><br><span class="line">><span class="tag"></<span class="name">script</span>></span></span><br><span class="line">></span><br></pre></td></tr></table></figure></blockquote><blockquote><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line">><span class="xml"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span></span><br><span class="line"><span class="xml">></span></span><br><span class="line">> <input @change="changeAndGet" type="text" /></span><br><span class="line">> <input @input="changeAndGet" type="text" /> </span><br><span class="line">> <!-- oninput事件是跟随光标移动 --></span><br><span class="line">> </span><br><span class="line">> <button v-on:click="getName">按钮</button></span><br><span class="line">></span><br><span class="line">> </div></span><br><span class="line">></span><br><span class="line">> <script src="./vue.js"></script></span><br><span class="line">> <script></span><br><span class="line">> var vm = new Vue({</span><br><span class="line">> el:"#app",</span><br><span class="line">> data:{</span><br><span class="line">> name:"hello world"</span><br><span class="line">> },</span><br><span class="line">> methods:{</span><br><span class="line">> changeAndGet(e){</span><br><span class="line">> console.log(e.target.value); </span><br><span class="line">> // e.target表示当前用户点击的事件源具体是谁!!</span><br><span class="line">> //记住这个组合属性 e.target.value,注意没有调用的括号哦!</span><br><span class="line">> //target.value是这个input框的属性,不是方法!区别于jq中的val()方法</span><br><span class="line">> },</span><br><span class="line">> getName(){</span><br><span class="line">> console.log(this.name);</span><br><span class="line">> },</span><br><span class="line">></span><br><span class="line">> }</span><br><span class="line">></span><br><span class="line">> });</span><br><span class="line">></span><br></pre></td></tr></table></figure></blockquote><h2 id="系统指令-v-for-数组"><a href="#系统指令-v-for-数组" class="headerlink" title="系统指令-v-for-数组"></a>系统指令-v-for-数组</h2><blockquote><ul><li><p>根据一组数组或对象的选项列表进行渲染。</p></li><li><p><code>v-for</code> 指令需要使用 <code>item in items</code> 或者 <code>item of items</code> 形式的特殊语法，</p></li><li><p><code>items</code> 是源数据数组 /对象</p></li></ul><p>当要渲染相似的标签结构时用v-for</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">>item <span class="keyword">in</span> items <span class="comment">// item为当前遍历属性数组项的值</span></span><br><span class="line">>(item,index) <span class="keyword">in</span> items <span class="comment">//item为当前遍历属性数组项的值 index为数组的索引</span></span><br><span class="line">></span><br><span class="line">></span><br></pre></td></tr></table></figure></blockquote><blockquote><p><strong>注意</strong> v-for写的位置 应该是重复的标签上 不是其父级元素上 需要注意</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line">><span class="meta"><!DOCTYPE html></span></span><br><span class="line">><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line">><span class="tag"><<span class="name">head</span>></span></span><br><span class="line">> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line">> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>></span></span><br><span class="line">> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>></span></span><br><span class="line">> <span class="tag"><<span class="name">title</span>></span>作业9<span class="tag"></<span class="name">title</span>></span></span><br><span class="line">><span class="tag"></<span class="name">head</span>></span></span><br><span class="line">><span class="tag"><<span class="name">body</span>></span></span><br><span class="line">> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line">> <span class="tag"><<span class="name">ul</span>></span></span><br><span class="line">> <span class="tag"><<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">"item in list"</span>></span>{{item}}<span class="tag"></<span class="name">li</span>></span> </span><br><span class="line">> <span class="comment"><!-- 这里的等号后面引号千万不要丢,花括号里的item代表遍历的数组中的每个具体的成员 --></span></span><br><span class="line">> <span class="tag"></<span class="name">ul</span>></span></span><br><span class="line">></span><br><span class="line">> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line">></span><br><span class="line">> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./vue.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line">> <span class="tag"><<span class="name">script</span>></span></span><br><span class="line"><span class="javascript">> <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue({</span></span><br><span class="line"><span class="javascript">> el:<span class="string">"#app"</span>,</span></span><br><span class="line">> data:{</span><br><span class="line"><span class="javascript">> list:[<span class="string">'北京'</span>,<span class="string">'上海'</span>,<span class="string">'天津'</span>]</span></span><br><span class="line">> },</span><br><span class="line">> methods:{},</span><br><span class="line">></span><br><span class="line">> });</span><br><span class="line"><span class="javascript">><span class="comment">// 1. 初始化一个Vue实例</span></span></span><br><span class="line"><span class="javascript">><span class="comment">// 2. 定义data对象中list:['北京','上海','天津']</span></span></span><br><span class="line"><span class="javascript">><span class="comment">// 3. 将list中的内容 v-for循环在li标签上显示</span></span></span><br><span class="line">> <span class="tag"></<span class="name">script</span>></span></span><br><span class="line">><span class="tag"></<span class="name">body</span>></span></span><br><span class="line">><span class="tag"></<span class="name">html</span>></span></span><br><span class="line">></span><br></pre></td></tr></table></figure></blockquote><blockquote></blockquote><h2 id="基础-系统指令-v-for-对象"><a href="#基础-系统指令-v-for-对象" class="headerlink" title="基础-系统指令-v-for-对象"></a>基础-系统指令-v-for-对象</h2><blockquote><p><strong><code>目标</code></strong>:掌握v-for循环对象的用法 </p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><span class="line">> <span class="meta"><!DOCTYPE html></span></span><br><span class="line">> <span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line">></span><br><span class="line">> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line">> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line">> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>></span></span><br><span class="line">> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>></span></span><br><span class="line">> <span class="tag"><<span class="name">title</span>></span>Document<span class="tag"></<span class="name">title</span>></span></span><br><span class="line">> <span class="tag"></<span class="name">head</span>></span></span><br><span class="line">></span><br><span class="line">> <span class="tag"><<span class="name">body</span>></span></span><br><span class="line">> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line">> <span class="comment"><!-- v-for作用:列表渲染,当遇到相似的标签结构时,就用v-for去渲染</span></span><br><span class="line"><span class="comment">> v-for="元素 in 容器(数组和对象)"</span></span><br><span class="line"><span class="comment">> v-for="对象中的属性值 in data中的对象名"</span></span><br><span class="line"><span class="comment">> --></span></span><br><span class="line">> <span class="comment"><!-- 对象 --></span></span><br><span class="line">> <span class="comment"><!-- (v,k,i)in 对象</span></span><br><span class="line"><span class="comment">> v:值</span></span><br><span class="line"><span class="comment">> k:键</span></span><br><span class="line"><span class="comment">> i:对象中每对key-value的索引 从0开始</span></span><br><span class="line"><span class="comment">> 注意: v,k,i是参数名,见名知意即可!</span></span><br><span class="line"><span class="comment">> --></span></span><br><span class="line">> <span class="tag"><<span class="name">p</span> <span class="attr">v-for</span>=<span class="string">"value in per"</span>></span>{{value}}<span class="tag"></<span class="name">p</span>></span></span><br><span class="line">> <span class="tag"><<span class="name">hr</span>></span></span><br><span class="line">> <span class="tag"><<span class="name">p</span> <span class="attr">v-for</span>=<span class="string">"(value,key) in per"</span>></span>{{value}}----{{key}}<span class="tag"></<span class="name">p</span>></span></span><br><span class="line">> <span class="tag"><<span class="name">hr</span>></span></span><br><span class="line">> <span class="tag"><<span class="name">p</span> <span class="attr">v-for</span>=<span class="string">"(value,key,i) in per"</span>></span>{{value}}----{{key}}--{{i}}<span class="tag"></<span class="name">p</span>></span></span><br><span class="line">></span><br><span class="line">> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line">> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./vue.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line">> <span class="tag"><<span class="name">script</span>></span></span><br><span class="line"><span class="javascript">> <span class="keyword">new</span> Vue({</span></span><br><span class="line"><span class="javascript">> el: <span class="string">'#app'</span>,</span></span><br><span class="line">> data: {</span><br><span class="line">> per: {</span><br><span class="line"><span class="javascript">> name: <span class="string">'老王'</span>,</span></span><br><span class="line">> age: 38,</span><br><span class="line"><span class="javascript">> gender: <span class="string">'男'</span></span></span><br><span class="line">> }</span><br><span class="line">> },</span><br><span class="line">> methods: {</span><br><span class="line">></span><br><span class="line">> }</span><br><span class="line">> })</span><br><span class="line">> <span class="tag"></<span class="name">script</span>></span></span><br><span class="line">> <span class="tag"></<span class="name">body</span>></span></span><br><span class="line">></span><br><span class="line">> <span class="tag"></<span class="name">html</span>></span></span><br><span class="line">></span><br></pre></td></tr></table></figure></blockquote><blockquote><p>语法:</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">>item <span class="keyword">in</span> items <span class="comment">// item为当前遍历属性对象的值</span></span><br><span class="line">>(item, key, index) <span class="keyword">in</span> items <span class="comment">//item为当前遍历属性对象的值 key为当前属性名的值 index为当前索引的值</span></span><br><span class="line">></span><br></pre></td></tr></table></figure></blockquote><blockquote><p><strong><code>任务</code></strong>: </p><ol><li>初始化一个Vue实例</li><li>定义data对象中 person: { name: ‘张三’, sex:’男’,age: 18 }</li><li>将person中的内容 v-for循环在li标签上显示</li></ol><p><strong><code>路径</code></strong>参照代码示例</p></blockquote><h2 id="基础-系统指令-v-for-key"><a href="#基础-系统指令-v-for-key" class="headerlink" title="基础-系统指令-v-for-key"></a>基础-系统指令-v-for-key</h2><blockquote><p><strong><code>目标</code></strong>: 掌握在 v-for循环中给循环项赋值key</p><ul><li><p>场景:列表数据变动会导致 视图列表重新更新 为了 提升性能 方便更新 需要提供 一个属性 key</p></li><li><p>使用: 通常是给列表数据中的唯一值 也可以用索引值</p></li></ul><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line">></span><br><span class="line">> <span class="comment"><!-- v-for </span></span><br><span class="line"><span class="comment">> key属性: 值通常是一个唯一的标识</span></span><br><span class="line"><span class="comment">> key是一个可选属性</span></span><br><span class="line"><span class="comment">> 养成好习惯:建议在写v-for时 设置:key="唯一值"</span></span><br><span class="line"><span class="comment">> --></span></span><br><span class="line">> <span class="tag"><<span class="name">ul</span>></span></span><br><span class="line">> <span class="tag"><<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">"(item,index) in list"</span> <span class="attr">:key</span>=<span class="string">"index"</span>></span>{{item}}---{{index}}<span class="tag"></<span class="name">li</span>></span></span><br><span class="line">> <span class="tag"></<span class="name">ul</span>></span></span><br><span class="line">> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line">> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./vue.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line">> <span class="tag"><<span class="name">script</span>></span></span><br><span class="line"><span class="javascript">> <span class="keyword">new</span> Vue({</span></span><br><span class="line"><span class="javascript">> el: <span class="string">'#app'</span>,</span></span><br><span class="line">> data: {</span><br><span class="line"><span class="javascript">> list: [<span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'c'</span>]</span></span><br><span class="line">> },</span><br><span class="line">> methods: {</span><br><span class="line">></span><br><span class="line">> }</span><br><span class="line">> });</span><br><span class="line">> <span class="tag"></<span class="name">script</span>></span></span><br><span class="line">></span><br></pre></td></tr></table></figure></blockquote><blockquote><p><strong><code>任务</code></strong></p><ol><li>初始化一个Vue实例</li><li>定义data对象中list:[‘北京’,’上海’,’天津’]</li><li>将list中的内容 v-for循环在li标签上显示</li><li>给每个li标签赋值key</li></ol></blockquote><h2 id="当v-if和v-for相遇"><a href="#当v-if和v-for相遇" class="headerlink" title="当v-if和v-for相遇"></a>当v-if和v-for相遇</h2><blockquote><p><strong><code>目标</code></strong>: 了解v-if 和v-for的层级关系及使用</p><ul><li>v-for循环元素时,标签可使用item属性, 如果这个时候用v-if来进行操作 会产生什么效果?</li></ul><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">><span class="tag"><<span class="name">p</span> <span class="attr">v-if</span>=<span class="string">"index>1"</span> <span class="attr">v-for</span>=<span class="string">"(item,index) in list"</span>></span><span class="tag"></<span class="name">p</span>></span></span><br><span class="line">></span><br></pre></td></tr></table></figure></blockquote><blockquote><p>以上代码执行: 会将数组中前两个元素忽略掉</p><p>说明一个问题: v-for 的优先级大于v-if ,所有v-if才能使用v-for的变量</p><p><strong><code>任务</code></strong>: </p><ol><li><p>初始化一个Vue实例</p></li><li><p>定义一个 list:[ 4,4,3,2,22,2,4643,443,44,34,5,3 ]</p><p>3 将大于10 的列表渲染出来 使用v-for 和v-if</p></li></ol><p><strong><code>路径</code></strong>参照代码示例</p></blockquote><h2 id="基础-表格案例-效果演示"><a href="#基础-表格案例-效果演示" class="headerlink" title="基础-表格案例-效果演示"></a>基础-表格案例-效果演示</h2><blockquote><p><strong><code>目标</code></strong>通过分析页面需求,提取案例功能点</p><p>功能点: </p><ol><li>添加商品</li><li>删除商品</li><li>搜索商品</li><li>列表循环 </li><li>数据不存在 显示不存在数据</li><li>时间格式</li></ol></blockquote><h2 id="基础-表格案例-列表渲染"><a href="#基础-表格案例-列表渲染" class="headerlink" title="基础-表格案例-列表渲染"></a>基础-表格案例-列表渲染</h2><blockquote><p><strong><code>目标-任务</code></strong>-完成表格案例的列表渲染</p><p><strong><code>路径</code></strong></p><ol><li>静态页面 准备</li><li>实例化一个Vue</li><li>定义表格数据</li><li>采用v-for 循环将静态内容切换为动态内容</li><li>采用v-if控制提示消息</li></ol><p>具体参考代码实现</p></blockquote>]]></content>
<summary type="html">
<h1 id="Vue基础01"><a href="#Vue基础01" class="headerlink" title="Vue基础01"></a>Vue基础01</h1><h2 id="vue为什么这么秀"><a href="#vue为什么这么秀" class="header
</summary>
<category term="Vue" scheme="http://yoursite.com/categories/Vue/"/>
<category term="基础" scheme="http://yoursite.com/categories/Vue/%E5%9F%BA%E7%A1%80/"/>
<category term="知识点" scheme="http://yoursite.com/tags/%E7%9F%A5%E8%AF%86%E7%82%B9/"/>
</entry>
</feed>