本文档详细介绍了Vue的本地应用实践，包括V-text、V-html、V-on、V-show、V-if、V-bind、V-for、V-on、V-model等指令的使用。通过计数器案例和小黑记事本的应用，展示了如何实现内容绑定、事件监听、条件渲染、列表循环等功能。此外，还提供了视频教程链接和代码仓库地址。
第二章：本地应用
通过vue实现常见网页效果。
Vue指令是以v-开头的一组特殊语法。
常见Vue指令
1、内容绑定，事件绑定：v-text、v-html、v-on基础
2、显示切换，属性绑定：v-show、v-if、v-bind
3、列表循环，表单元素绑定：v-for、v-on补充、v-model
本地应用-V-text指令
v-text作用：设置标签内容
使用差值表达式{ {}}可替换指定内容
| <body> <div id="app"> <h2 v-text="message+'!'">深圳</h2> <h2>{ { message +'!'}}深圳</h2> </div> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ message:"你好，小黑", } }) </script> </body> </html> |
| 你好，小黑！ 你好，小黑！深圳 |
本地应用-V-html指令
v-html作用：设置标签inner html
内容有html结构会被解析为标签。
| <body> <div id="app"> <h2 v-html="content"> </h2> </div> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ content:"<a href=’www.baidu.com>百度</a> ", } }) </script> </body> </html> |
| 百度 |
本地应用-V-on基础
v-on作用：为元素绑定事件
事件名不行要写on，指令可以简写为@
本地应用案例-计数器
最大值10，最小值0，超出范围会弹窗提示
| <body> <div id="app"> <!-- 计数器 --> <div class="input-num"> <button @click="sub"> - </button> <span>{ { num }}</span> <button @click="add"> + </button> </div> <img src="http://www.itheima.com/images/logo.png" alt="" /> </div> |
最低0.47元/天 解锁文章
1909
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
