博主信息
佐罗
博文
42
粉丝
0
评论
0
访问量
9853
积分:0
P豆:88

TP vue绑定事件与组件、通信、路由(四)

2022年05月14日 15:23:36阅读数:337博客 / 佐罗/ php学习-19期

1、绑定事件练习

  1. <template>
  2. <div>
  3. <!-- <div v-once>HelloWorld{{zolo}}</div>
  4. <div>{{ test() }}</div>
  5. <input type="text" v-model="zolo">
  6. <div v-text="zolo"></div>
  7. <div v-html="html"></div>
  8. <div>{{html}}</div>
  9. <div v-pre>{{html}}</div>
  10. <a v-bind:href="url">v-bind-url1</a>
  11. <a href="https://www.baidu.com">原生url2</a>
  12. <hr>
  13. <a :href="url" :title="title">v-bind</a>
  14. <a :href="url" :style="style">v-bind</a> -->
  15. <!-- v-bind:简写: 动态地绑定 属性,常用的绑定style和class属性 -->
  16. <!-- v-on: 简写@ 绑定事件监听器,事件类型由参数指定,只能监听原生
  17. 例如: 点击、键盘、回车等-->
  18. <!-- <button v-on:click="fun()">我是按钮</button>
  19. <br>
  20. <button @click="fun()">点击我试一下</button>
  21. <button @click="fun()">点击我试一下</button> -->
  22. <!-- <div @click="one()">
  23. a
  24. <div @click="two()">
  25. b
  26. <div @click.stop="three">
  27. c
  28. </div>
  29. </div>
  30. </div> -->
  31. <!-- <div>
  32. <p v-if="flag == 1">我是内容if</p>
  33. <p v-else-if="flag == 2 ">我是内容else-if</p>
  34. <p v-else>我是else</p>
  35. <button @click="change()">点我</button>
  36. <div v-for="(item,key) in arr" :key="key">
  37. <span>{{item}}</span>
  38. <span>{{key}}</span>
  39. </div> -->
  40. <!-- </div> -->
  41. </template>
  42. <script>
  43. import ALogVue from './components/ALog.vue';
  44. import BLogVue from './components/BLog.vue';
  45. import DailyLog from './components/DailyLog'
  46. // import ELog from './components/ELog'
  47. export default{
  48. components:{
  49. DLog:DailyLog,
  50. ALog:ALogVue,
  51. BLog:BLogVue,
  52. // ELog:ELog
  53. },
  54. data(){
  55. return{
  56. e:'',
  57. flag:1,
  58. zolo:'佐罗',
  59. html:"<h2>佐罗</h2>",
  60. url:"https://www.baidu.com",
  61. title:'我是zolo-title',
  62. style:'color:green',
  63. arr:['西瓜','荔枝','苹果','橘子']
  64. }
  65. },
  66. methods:{
  67. useconfunc(){
  68. this.$refs.testfunc.fun();
  69. },
  70. app_edit(e){
  71. this.e = e;
  72. console.log('打印传过来的值:'+e);
  73. },
  74. test(){
  75. return '123';
  76. },
  77. fun(){
  78. console.log('fun');
  79. },
  80. one(){
  81. console.log('1');
  82. },
  83. two(){
  84. console.log('2');
  85. },
  86. three(){
  87. console.log('3');
  88. },
  89. change(){
  90. if(this.flag==2){
  91. this.flag=-1
  92. }
  93. this.flag++;
  94. console.log(this.flag);
  95. }
  96. }
  97. }
  98. </script>
  99. //scoped样式范围
  100. <style scoped>
  101. .test{
  102. color: aqua;
  103. }
  104. </style>

2、组件练习

  1. <div>
  2. <!-- 普通传值,key和value 组件接收props-->
  3. <!-- <DLog title="我是传过去的"></DLog> -->
  4. <!-- 绑定变量传值 -->
  5. <!-- <DLog :title="title"></DLog> -->
  6. <DLog @app_edit = 'app_edit' :title="title"></DLog>
  7. <p>{{e}}</p>
  8. <!-- <ELog></ELog> -->
  9. <a-log ref="testfunc" @click="useconfunc"></a-log>
  10. <b-log>
  11. <button>我是插槽数据</button>
  12. <!-- <template v-slot:one> -->
  13. <template #one>
  14. <button>我是one插槽数据</button>
  15. </template>
  16. </b-log>
  17. </div>
  18. </div>

3、路由练习

  1. import TestContent from '../views/TestContent.vue'
  2. {
  3. path: '/test',
  4. name: 'testcontent',
  5. component: TestContent
  6. }
  7. <nav>
  8. <router-link to="/">Home</router-link> |
  9. <router-link to="/about">About</router-link> |
  10. <router-link to="/test">TestContent</router-link>
  11. </nav>
  12. <router-view/>
批改状态:未批改

老师批语:

版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论