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

发布于：2022-05-15 14:06:36  栏目：技术文档

1、绑定事件练习

<template>
<div>
  <!-- <div v-once>HelloWorld{{zolo}}</div>
  <div>{{ test() }}</div>
  <input type="text" v-model="zolo">
  <div v-text="zolo"></div>
  <div v-html="html"></div>
  <div>{{html}}</div>
  <div v-pre>{{html}}</div>
  <a v-bind:href="url">v-bind-url1</a>
  <a href="https://www.baidu.com">原生url2</a>
  <hr>
   <a :href="url" :title="title">v-bind</a>
   <a :href="url" :style="style">v-bind</a> -->
   <!-- v-bind:简写： 动态地绑定 属性，常用的绑定style和class属性 -->
   <!-- v-on: 简写@  绑定事件监听器，事件类型由参数指定，只能监听原生
   例如： 点击、键盘、回车等-->
   <!-- <button v-on:click="fun()">我是按钮</button>
   <br>
   <button @click="fun()">点击我试一下</button>
   <button @click="fun()">点击我试一下</button> -->
   <!-- <div @click="one()">
     a
     <div @click="two()">
       b
       <div @click.stop="three">
         c
       </div>
     </div>
   </div> -->
   <!-- <div>
     <p v-if="flag == 1">我是内容if</p>
     <p v-else-if="flag == 2 ">我是内容else-if</p>
     <p v-else>我是else</p>
     <button @click="change()">点我</button>
     <div v-for="(item,key) in arr" :key="key">
       <span>{{item}}</span>
       <span>{{key}}</span>
     </div> -->
   <!-- </div> -->
</template>
<script>
import ALogVue from './components/ALog.vue';
import BLogVue from './components/BLog.vue';
import DailyLog from './components/DailyLog'
// import ELog from './components/ELog'
export default{
  components:{
    DLog:DailyLog,
    ALog:ALogVue,
    BLog:BLogVue,
    // ELog:ELog
  },
  data(){
    return{
      e:'',
      flag:1,
      zolo:'佐罗',
      html:"<h2>佐罗</h2>",
      url:"https://www.baidu.com",
      title:'我是zolo-title',
      style:'color:green',
      arr:['西瓜','荔枝','苹果','橘子']
    }
  },
  methods:{
    useconfunc(){
      this.$refs.testfunc.fun();
    },
    app_edit(e){
      this.e = e;
      console.log('打印传过来的值：'+e);
    },
    test(){
      return '123';
    },
    fun(){
      console.log('fun');
    },
    one(){
      console.log('1');
    },
    two(){
      console.log('2');
    },
    three(){
      console.log('3');
    },
    change(){
      if(this.flag==2){
        this.flag=-1
      }
      this.flag++;
      console.log(this.flag);
    }
  }
}
</script>
//scoped样式范围
<style scoped>
.test{
  color: aqua;
}
</style>

2、组件练习

<div>
    <!-- 普通传值，key和value 组件接收props-->
     <!-- <DLog title="我是传过去的"></DLog> -->
      <!-- 绑定变量传值 -->
     <!-- <DLog :title="title"></DLog> -->
     <DLog @app_edit = 'app_edit' :title="title"></DLog>
     <p>{{e}}</p>
     <!-- <ELog></ELog> -->
     <a-log ref="testfunc" @click="useconfunc"></a-log>
     <b-log>
       <button>我是插槽数据</button>
       <!-- <template v-slot:one> -->
       <template #one>
         <button>我是one插槽数据</button>
       </template>
     </b-log>
   </div>
</div>

3、路由练习

import TestContent from '../views/TestContent.vue'
  {
    path: '/test',
    name: 'testcontent',
    component: TestContent
  }
    <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> |
    <router-link to="/test">TestContent</router-link>
  </nav>
  <router-view/>

相关推荐