查看“Vue 的特点”的源代码

'''<big>Vue 的特点</big>'''

1.采用<u>'''组件化'''</u>模式，提高代码复用率、且让代码更好维护。

对于“组件化”的举例解释：

比如有一个页面，有三个板块：推荐活动、新闻、热门

就可以分开考虑、实现：Activity.vue、News.vue、Hot.vue

.vue 文件中可以包含 html 代码、css 代码、JS 代码

在 Vue 中，一个 .vue 文件就是一个组件。


2.<u>'''声明式'''</u>编码，让编码人员无需直接操作 DOM，提高开发效率。

对“声明式”的举例解释：

比如现在有数据：<syntaxhighlight lang="json">
[
  {id:'001',name:'张三',age:18},
  {id:'002',name:'李四',age:19},
  {id:'003',name:'王五',age:20}
]
</syntaxhighlight>还有容器：<syntaxhighlight lang="html">
<ul id="list"></ul>
</syntaxhighlight>想要实现的效果是把 JSON 数据变成 ul 里面的 li 显示出来：<syntaxhighlight lang="html">
<ul id="list">
  <li>001-张三-18</li>
  <li>002-李四-19</li>
  <li>003-王五-20</li>
</ul>
</syntaxhighlight>如果是'''<big>命令式编码</big>'''：<syntaxhighlight lang="javascript">
//准备 html 字符串
let htmlStr = ''
//遍历数据拼接 html 字符串
persons.forEach(p => {
  htmlStr += `<li>${p.id} - ${p.name} - ${p.age}</li>`
});
//获取 list 元素
let list = document.getElementById('list')
//修改内容（亲自操作DOM）
list.innerHTML = htmlStr
</syntaxhighlight>'''<big>声明式编码</big>'''：<syntaxhighlight lang="html">
<ul id="list">
  <li v-for="p in persons">
    {{p.id}} - {{p.name}} - {{p.age}}
  </li>
</url>
</syntaxhighlight>v-for 是 vue 中的遍历指令