登录  /  注册
博主信息
博文 43
粉丝 0
评论 3
访问量 34853
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
1.vue常用术语 2. 样式与事件绑定 3. 列表渲染,并理解diff算法:key
Time
原创
708人浏览过

1.vue常用术语

挂载点:当前vue的实例范围

  1. <div class="app">
  2. <p>用户名:{{username}}</p>
  3. </div>
  4. <script>
  5. const app = Vue.createApp({
  6. data() {
  7. return {
  8. username: "Hello world",
  9. };
  10. },
  11. }).mount(".app");
  12. </script>

vue实例:

  1. const app = Vue.createApp({
  2. data() {
  3. return {
  4. username: "Hello world",
  5. };
  6. },
  7. }).mount(".app");

数据注入:原理就是使用访问器属性

  1. //直接获取到值
  2. console.log(app.username);

响应式:外部修改映射到vue实例中的数据,实时更新

  1. //直接更新数据
  2. app.username = '自定义修改值'

2. 样式与事件绑定

  1. 1.属性绑定:v-bind可以用":"简写 v-bind可以添加任意属性。添加样式可以写成v-bind:style="变量名"
  2. 2.事件绑定:v-on 可以用"@"简写v-on添加事件。如添加点击事件可以写成v-onclick=""event:用@event
  3. 3.数据双向绑定:v-model.例如: <input type="text" v-model="commot" :value="commot" />

3. 列表渲染,并理解diff算法:key

列表渲染

  1. //数组和对象使用方法一样
  2. <div class="app">
  3. <ul>
  4. <li v-for="city of citys">{{city}}</li>
  5. </ul>
  6. </div>
  7. <script>
  8. const app = Vue.createApp({
  9. data() {
  10. return {
  11. citys: ["合肥", "北京", "哈尔滨"],
  12. };
  13. },
  14. }).mount(".app");
  15. </script>

diff算法:保证key的唯一性:key必须添加

  1. <div class="app">
  2. <ul>
  3. <li v-for="(city,index) of citys" :key="index">{{index}}=>{{city}}</li>
  4. </ul>
  5. </div>
  6. <script>
  7. const app = Vue.createApp({
  8. data() {
  9. return {
  10. username: "Hello world",
  11. citys: ["合肥", "北京", "哈尔滨"],
  12. };
  13. },
  14. }).mount(".app");
  15. </script>
批改老师:PHPzPHPz

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学