[vue学习笔记(小白版)]-2023.8.14

你不会哭的

已于 2023-08-16 19:33:00 修改

阅读量37

点赞数 1

文章标签： vue.js 学习笔记

于 2023-08-15 17:47:19 首次发布

本文链接：https://blog.csdn.net/qq_58325633/article/details/132277530

版权

vue提供带有v-前缀的指令

v-bind

v-bind指令主要用于响应式的更新html属性，v-bind：可以简写为：

使用示例如下

<div id="app">
    <span :title="message">
        尝试悬浮效果
    </span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:"hello,vue!"
        }
    });
</script>

v-if、v-else

根据条件渲染组件，示例如下：

<!--view层-->
<div id="app">
  <h2 v-if="ok">Yessssss!</h2>
  <h2 v-else>Nooooooo!</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
    el:"#app",
    // modle层
    data:{
      message:"hello,vue!",
      ok: false
    }
  });
</script>

需要注意的是一个 v-else 元素必须跟在一个 v-if 或者 v-else-if 元素后面，否则它将不会被识别。

v-show

也可以选择性的渲染组件，不同的是v-show仅仅修改了css的display属性，而v-if只有条件为真时才进行渲染。

总的来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。

v-for

示例如下：

<!--view层-->
<div id="app">
  <li v-for="item in items">
    {{item.message}}
  </li>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
    el:"#app",
    // modle层
    data: {
      items: [
        {message: '初学vue'},
        {message: '这是v-for示例'},
      ]
    }
  });
</script>

注意：当 v-if 和 v-for 同时存在于一个元素上的时候，v-if 会首先被执行。

v-on

绑定事件（函数），示例如下：

<div id="app">
 <button v-on:click="sayHi">click me!!!!</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
  var v  = new Vue({
    el:"#app",
    data: {
        message: "I love Vue！！！"
    },
    methods: {
      sayHi: function () {
          alert(this.message);
      }
    },
  })
</script>

v-model

双向绑定-通过改变视图层的值去改变model层

<div id="app">
    <textarea v-model="message"></textarea>
    {{message}}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      message: ""
    }
  })
</script>

Vue.component

即自定义标签，示例如下：

<div id="app">
  <self v-for="itme in items" v-bind:fself="itme"></self>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
  Vue.component("self",{
    props: ["fself"],
    template: "<li>hello,{{fself}}</li>"
  })
  var vm = new Vue({
    el: "#app",
    data: {
      message: "",
      items: ['前端','Vue','小白']
    }
  })
</script>

注意：内部不能有大写，或者“-”？使用“-”会导致不能正确显示内容。

Axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。特性如下：

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

示例如下：

<div id="app">
  <div>{{info.compilerOptions}}</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>

  var vm = new Vue({
    el: "#app",
    data(){
      return{
        info:{
          compilerOptions:null,
          exclude: null
        }
      }
    },
    mounted(){//钩子函数
      axios.get("../data.json").then(response=>(console.log(this.info=response.data)))
    }
  })
</script>

同时还了解到了钩子函数，Vue官方文档给出的所有生命周期钩子如下：