webgis开发之vue（1）

最新推荐文章于 2024-07-31 13:50:57 发布

Coding小亿~

最新推荐文章于 2024-07-31 13:50:57 发布

阅读量542

点赞数 9

分类专栏： webgis开发 vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_67679364/article/details/136440617

版权

webgis开发同时被 2 个专栏收录

17 篇文章 4 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js的基本概念，包括其数据驱动视图的特点、v-model双向绑定、模板语法、生命周期钩子以及常用的事件处理。通过实例展示了如何在项目中运用这些核心特性来构建单页面应用。

摘要由CSDN通过智能技术生成

VUE

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

01、vue介绍

<!-- App.vue 是根组件 -->
<!-- 结构层 -->
<!-- template下面只能由一个子节点 -->
<template>
    <div id="app">
      <!-- 使用数据的方法 {{ }} -->  
      <!-- 点击事件使用@click   -->
      <!-- 如果传参(1) 不传参就不加() -->
      <h1 @click="toAdd">{{count}}</h1>
    </div>
  </template>
  
  <!-- 逻辑层 -->
  <script>
  export default{
    // data是vue2用来数据管理的地方
    // 一旦变量放进data里面 vue就能对data进行监听 msg怎么变vue都能知道
    data(){
      return{
        count:0 // 2、是响应式数据（数据驱动视图），数据变了视图也会变
      };
    },
    // 方法放这里面
    methods:{
      // 1、没有dom元素操作
      toAdd(){
        this.count++  //在方法中使用data中数据需要加一个this
      }
    }
  }
  </script>
  
  <!-- 样式层 -->
  <style scoped></style>

02、vue事件

<template>
    <div>
      <p v-if="isShow">hello</p>
      <p v-else>vue</p>
      <button @click="toChange">切换</button>
  
      <!-- 0  显示 零分 -->
      <!-- 1  显示 半分 -->
      <!-- 2  显示 满分 -->
      <p v-if="value == 0">零分</p>
      <p v-else-if="value == 1">半分</p>
      <p v-else>满分</p>
      <!-- <button @click="toChange">切换</button></div> -->
    </div>
  </template>
  <script>
  export default {
    data() {
      return {
        isShow: true,
        value: 0
      };
    },
    methods: {
      toChange() {
        this.isShow = !this.isShow
      }
    }
  }
  </script>
  <style></style>

03、v-if、v-show

<template>
    <div>
      <p v-if="isShow">hello</p>
      <p v-else>vue</p>
      <button @click="toChange">切换</button>
  
      <!-- 0  显示 零分 -->
      <!-- 1  显示 半分 -->
      <!-- 2  显示 满分 -->
      <p v-if="value == 0">零分</p>
      <p v-else-if="value == 1">半分</p>
      <p v-else>满分</p>
      <!-- <button @click="toChange">切换</button></div> -->
  
      <!-- v-if v-show的区别 v-if之间删除了dom元素 v-show只是让元素的display: none; -->
      <!-- v-show 适合元素切换频繁的场景 -->
      <p v-show="isShow">hello</p>
    </div>
  </template>
  <script>
  export default {
    data() {
      return {
        isShow: true,
        value: 0
      };
    },
    methods: {
      toChange() {
        this.isShow = !this.isShow
      }
    }
  }
  </script>
  <style></style>

04、v-for动态属性

<!-- 结构层 -->
<template>
    <div>
      <!-- 给标签属性一个变量的话 前面加一个: -->
      <!-- <span v-for="(item, index) in list" :key="index">
        <a :href=item.url>{{ item.title }}</a><br>
      </span> -->
  
      <div v-for="(item, index) in arr" :key="index">
        {{ item.title }}
        <img :src=item.url alt="">
      </div>
    </div>
  </template>
  <!-- 逻辑层 -->
  <script>
  export default {
    data() {
      return {
        arr:
          [
            {
              title: "vue",
              url: "https://p1.music.126.net/S607Z3GzyOrtGELZh377Mw==/109951166575494657.jpg?imageView&quality=89",
            },
            {
              title: "react",
              url: "https://p1.music.126.net/wrs0csPtv86AXooTem3aPw==/109951166575508031.jpg?imageView&quality=89",
            },
            {
              title: "angular",
              url: "https://p1.music.126.net/Lp7cNHJo8urAGw-aZ_TqFA==/109951166575499997.jpg?imageView&quality=89",
            },
          ]
      };
    },
    methods: {
      toChange() {
        this.isShow = !this.isShow
      }
    }
  }
  </script>
  <!-- 样式层 -->
  <style></style>

05、双向绑定

<!-- 结构层 -->
<template>
    <div>
      <!-- v-model 双向绑定 数据与视图的绑定是双向的 -->
      <!-- 数据影响输入框视图的同时，输入框视图也能影响数据   输入框视图即输入框中的数据-->
      <input type="text" v-model="msg" @keyup.enter="handler">
      <button @click="toLog">查看</button>
      <div v-for="(item,index) in arr" :key="index">
        {{ item }}
        <button @click="toDel(index)">删除</button>
      </div>
    </div>
  </template>
  <!-- 逻辑层 -->
  <script>
  export default {
    data() {
      return {
        msg:'',  //响应式数据（数据驱动视图），视图变了，响应不会变
        arr:[]
      };
    },
    methods: {
      toLog() {
        console.log(this.msg)
      },
      handler(){
        if(this.msg){
          this.arr.push(this.msg)
        }else{
          alert('不能为空！')
          return
        }
      },
      toDel(index){
        this.arr.splice(index,1)
        console.log(index)
      }
    }
  }
  </script>
  <!-- 样式层 -->
  <style></style>

06、v-model原理

<!-- 结构层 -->
<template>
    <div>
      <input type="text" :value="msg" @input="inputChange($event)">
      <h1 v-for="(item,index) in arr" :key="index" @click="handleItem(index,$event)">{{ item }}</h1>
  
      
    </div>
  </template>
  <!-- 逻辑层 -->
  <script>
  export default {
    data() {
      return {
        msg:'',
        arr:["eating","sleeping","playing"]
      };
    },
    methods: {
      // 双向绑定的原理   在输入框改变的同时   给msg赋值
      inputChange(event){
        this.msg = event.target.value
        console.log(this.msg)
      },
      handleItem(index,event){
        console.log(event)
      }
    }
  }
  </script>
  <!-- 样式层 -->
  <style></style>

07、生命周期

<!-- 结构层 -->
<template>
  <div>
    <!-- 组件挂载 -->
    <!-- <div v-for="(item,index) in programs" :key="index">
        <img :src=item.coverUrl alt="" 
        style="display: block;float: left;width: 50px;height: 50px;">
        <p style="display: block;float: left;">{{ item.name }}</p><br><br><br>
      </div> -->

    <!-- 组件更新 -->
    <h1 @click="count++">{{ count }}</h1>
  </div>
</template>
  <!-- 逻辑层 -->
  <script>
export default {
  data() {
    return {
      count: 0,
      programs: [],
    };
  },
  methods: {
    initData() {
      fetch("http://39.103.151.139:3000/program/recommend")
        .then((res) => res.json())
        .then((data) => {
          // 更新数据
          this.programs = data.programs;
          console.log(this.programs);
        })
        .catch((error) => {
          console.error("Error fetching data", error);
        });
    },
  },
  beforeCreate() {
    console.log("组件创建之前");
  },
  created() {
    console.log("组件创建完成");
  },
  beforeMount() {
    console.log("组件挂载之前");
  },
  // 一般在这个生命周期中完成页面数据的初始化
  // 在这个生命周期中想后端要初始化的数据
  mounted() {
    this.initData();
    console.log("组件挂载完成");
  },
  // 组件更新之前
  beforeUpdate() {
    console.log("组件更新之前");
  },
  // 组件更新之后
  updated() {
    console.log("组件更新之后");
  },
};
</script>
  <!-- 样式层 -->
  <style></style>