webgis开发之vue（2）

 VUE

Vue.js 是一种流行的 JavaScript 前端框架，用于构建交互式的单页面 Web 应用程序 (SPA)。它由尤雨溪创建，并由一个开源社区维护和支持。Vue.js 专注于实现数据驱动的视图层，它提供了一种简洁、灵活的方式来组织和管理前端应用程序的界面。

01、动态类型

<template>
    <div>
      <!-- 动态类名 -->
      <h1 :class="current?'active':''" @click="current=!current">hello vue</h1>
      <!-- 数组设置class -->
      <p :class="['bg','one']">hello</p>
      <!-- 对象设置class -->
      <p :class="{active:true}">hello</p>
  
      <div :class="pickNum == index?'active':''" v-for="(item, index) in arr" @click="toPick(index)" :key="index">{{ item }}</div>
    </div>
  </template>
  <script>
  export default {
    data() {
      return {
        current:true,
        arr:['吃饭','睡觉','打豆豆'],
        pickNum:-1
      }
    },
    methods:{
      toPick(index){
        this.pickNum=index
      }
    },
    mounted(){
    
    },
    computed:{
    
    },
  }
  </script>
  <style scoped>
  .active{
    background-color: red;
  }
  </style>

02、计算属性

<template>
    <div>
      <h1 @click="count++">{{ count }}</h1>
      <h1>{{ double }}</h1>
      <hr>
  
      <div v-for="(item, index) in arr" :key="index">{{ item }}</div>
      <div>总价：{{ sum }}</div>
      <hr>
  
      <div class="cover">
        <div class="columns" v-for="(item, index) in books" :key="index">
          <div class="name a">{{ item.name }} |</div>
          <div class="public a">{{ item.public }} |</div>
          <div class="price a">{{ item.price }} |</div>
          <div class="num a">
            <button @click="toChange(index, '-')">-</button>
            {{ item.num }}
            <button @click="toChange(index, '+')">+</button>
          </div>
          <hr>
        </div>
        <div class="sum">总价：{{ sum }}</div>
      </div>
      <hr>
  
      <input type="text" v-model="msg">
      <span>{{ msg }}</span>
    </div>
  </template>
  <script>
  export default {
    data() {
      return {
        count: 1,
        arr: [4, 5, 6],
        books: [
          {
            name: "算法导论",
            public: "2006-9",
            price: 85,
            num: 1,
          },
          {
            name: "Unix编程艺术",
            public: "2006-2",
            price: 59,
            num: 2,
          },
          {
            name: "编程珠玑",
            public: "2006-9",
            price: 65,
            num: 3,
          }],
        msg:''
      }
    },
    methods: {
      toChange(index, type) {
        if (type == '-') {
          if (this.books[index].num != 1) {
            this.books[index].num--
          }
        } else {
          console.log(this.books[index].num)
          this.books[index].num++
          console.log(this.books[index].num)
        }
        // console.log(index,type)
      }
    },
    mounted() {
  
    },
    computed: {
      double() {
        return this.count * 2
      },
      sum() {
        let res = 0
        this.books.forEach(item => {
          res = item.price * item.num + res
        })
        return res
      },
      value() {
        return this.msg.split('').reverse().join('')
      }
    },
  }
  </script>
  <style scoped>
  .a {
    float: left;
  }
  
  .columns {
    height: 30px;
    background-color: #aeaeae;
  }
  
  .name {
    width: 50%;
  }
  
  .public {
    width: 20%;
  }
  
  .price {
    width: 20%;
  }
  
  .num {
    width: 10%;
  }</style>    

03、watch 

<template>
    <div>
      <h1 @click="count++">{{ count }}</h1>
    </div>
  </template>
  <script>
  export default {
    data() {
      return {
        count:0
      }
    },
    methods:{
      
    },
    mounted(){
    
    },
    computed:{
    
    },
    watch:{
      count(){
        console.log('监听count的变化'+this.count)
      }
    }
  }
  </script>
  <style scoped>
  
  </style>  

04、父子组件

父

<template>
  <div>
    <h1>父组件</h1>
    <!-- 3、在模板中使用组件 -->
    <Son></Son>
  </div>
</template>
<script>
// 1、引入组件
import Son from './components/son.vue' //相对路径
export default {
  // 2、在components中注册组件
  components:{
    Son
  },
  data() {
    return {
  
    }
  },
  methods:{
      
  },
  mounted(){
  
  },
  computed:{
  
  },
}
</script>
<style scoped>
    
</style>

 子

<template>
  <div>
    <h1>子组件</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
    
    }
  },
  methods:{
            
  },
  mounted(){
    
  },
  computed:{
    
  },
}
</script>
<style scoped>
        
</style>

05、父传子

<template>
  <div>
    <!-- 1、给子组件定义属性值 -->
    <son :data="msg" :fun="fatherFun"></son>

    <!-- 用@传方法 子组件用emit调用 -->
    <!-- <son @fun="fatherFun"></son> -->
  </div>
</template>
<script>
import son from './components/son.vue'
export default {
  components: {
    son
  },
  data() {
    return {
      msg:'hello'
    }
  },
  methods: {
    fatherFun(){
      console.log('父组件的方法')
    }
  },
  mounted() {

  },
  computed: {

  },
}
</script>
<style scoped>
</style>

子

<template>
  <div>
    <h1 >子组件</h1>
    <h1>{{data}}</h1>
  </div>
</template>
<script>
export default {
  // 2、在子组件的props中接收父组件的值
  props:{
    // 需要指明类型
    data:{
      type:String
    }
  },
  data() {
    return {
    };
  },
  methods:{
    usrFather(){
      this.fun()
    }
            
  },
  mounted(){
  },
  computed:{
    
  },
}
</script>
<!-- scoped让样式只在组件中生效 -->
<style scoped>
        
</style>

 

06、路由

<template>
  <div>
    <!-- <button @click="handler('/tv')">电视剧</button>
    <button @click="handler('/chart')">排行榜</button> -->

    <router-link to="/tv">电视剧</router-link>
    <router-link to="/chart" style="margin-left:10px">排行榜</router-link>
    <hr>

    <!-- 路由组件在哪这个标签放在哪 -->
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  components: {

  },
  data() {
    return {
    }
  },
  methods: {
    handler(path){
      console.log(path)
      // 将页面跳转到相应的路由
      this.$router.push(path)
    }
  },
  mounted() {
  },
  computed: {

  },
}
</script>
<style scoped>
</style>

07、插槽

父

<template>
  <div>
    <SonVue>
      <!-- <div>父给子的html</div> -->

      <div slot="left">
        left
      </div>
      <div slot="right">
        right
      </div>
    </SonVue>
  </div>
</template>
<script>
import SonVue from './components/son.vue'
export default {
  components:{
    SonVue,
  },
  data() {
    return {
  
    }
  },
  methods:{
      
  },
  mounted(){
  
  },
  computed:{
  
  },
}
</script>
<style scoped>
    
</style>

 子

<template>
  <div>
    <div class="one">子组件</div>
    <!-- 匿名插槽 -->
    <!-- <slot></slot> -->

    <!-- 具名插槽 -->
    <div>
      <slot name="left"></slot>
      <slot name="right"></slot>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
  
    }
  },
  methods:{
      
  },
  mounted(){
  
  },
  computed:{
  
  },
}
</script>
<style scoped>
    .one{
      color: red;
    }
</style>