说明
【Vue 开发实战】学习笔记。
了解一下 mustache
https://github.com/mustache/mustache
受 ctemplate 和 et 的启发，Mustache 是一种与框架无关的方式来呈现无逻辑视图。
正如 ctemplates 所说，“它强调将逻辑与表示分离：在这种模板语言中嵌入应用程序逻辑是不可能的。”
有关实现列表（Ruby 除外）和提示，请参阅 http://mustache.github.io/。
将 Mustache 视为您的观点的替代品。 您的视图不是由带有随机助手和任意逻辑的 ERB 或 HAML 组成的视图，而是分为两部分：一个 Ruby 类和一个 HTML 模板。
我们将 Ruby 类称为“视图”，将 HTML 模板称为“模板”。
您的所有逻辑、决策和代码都包含在您的视图中。 您的所有标记都包含在您的模板中。 该模板只在您的视图中引用方法。
这种严格的分离使得编写干净的模板更容易，更容易测试你的视图，并且在你的应用程序的前端工作更有趣。
第一个Vue程序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app">{{message}}</div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var vm = new Vue({ el: "#app", data: { message: "kaimo 313" } }) </script> </body> </html>
我们在控制台修改 message 的值，发现视图也会跟着变化
vm.message = "kaimo666";
v-bind
给 id 帮个动态的值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> {{message}} <div v-bind:id="id1"></div> <!-- 简写模式 --> <div :id="id2"></div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var vm = new Vue({ el: "#app", data: { id1: "kaimo111", id2: "kaimo222", message: "kaimo 313" } }) </script> </body> </html>
v-if 和 v-show
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> {{message}} <!-- v-bind --> <div v-bind:id="id1"></div> <!-- v-bind：简写模式 --> <div :id="id2"></div> <!-- v-if、v-show --> <ul> <li> <span v-if="!item.del">{{item.title}}</span> <span v-else style="text-decoration: line-through;">{{item.title}}</span> </li> <li> <button v-show="item.del">删除</button> </li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var vm = new Vue({ el: "#app", data: { id1: "kaimo111", id2: "kaimo222", message: "kaimo 313", item: { title: "课程1", del: false } } }) </script> </body> </html>
控制台为修改del 为 true
vm.item.del = true
可以看到 v-if 的 dom 不会显示，而 v-show 的会隐藏
v-for
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> {{message}} <!-- v-bind --> <div v-bind:id="id1"></div> <!-- v-bind：简写模式 --> <div :id="id2"></div> <!-- v-if、v-show --> <ul> <li> <span v-if="!item.del">{{item.title}}</span> <span v-else style="text-decoration: line-through;">{{item.title}}</span> </li> <li> <button v-show="item.del">删除</button> </li> </ul> <!-- v-for --> <ul> <li v-for="item in list"> <span v-if="!item.del">{{item.title}}</span> <span v-else style="text-decoration: line-through;">{{item.title}}</span> <button v-show="item.del">删除</button> </li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var vm = new Vue({ el: "#app", data: { id1: "kaimo111", id2: "kaimo222", message: "kaimo 313", item: { title: "课程1", del: false }, list: [ { title: "课程1", del: true },{ title: "课程2", del: false }, ] } }) </script> </body> </html>
