Vue.js学习笔记

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  {{message}}
  <h2 v-text="message+'!'"></h2>
  <h2>{{school.mobile}}</h2>
  <h2>{{ names[0] }}</h2>
</div>

<script>
  var app = new Vue({
    el: "#app",
    data: {
      message: "hello vue!",
      school: {
        name: "www",
        mobile: "2-12302-1",
      },
      names: ["www", "hdsi", "dsk"],
    },
  });
</script>

<div id="app">
  {{message}}
  <h2 v-html="content"></h2>
</div>

<script>
  var app = new Vue({
    el: "#app",
    data: {
      content: "<a href='#''>v-html示例</a>",
    },
  });
</script>

<div id="app">
  <input type="button" value="v-on" v-on:click="study" />
  <input type="button" value="v-on简写" @click="study" />
</div>

<script>
  var app = new Vue({
    el: "#app",
    methods: {
      study: function () {
        alert("开始学习");
      },
    },
  });
</script>

<div id="app">
  <img src="./bili.png" v-show="isShow" />
  <button @click="changeState">切换显示状态</button>
</div>

<script>
  var app = new Vue({
    el: "#app",
    data: {
      isShow: false,
    },
    methods: {
      changeState: function () {
        this.isShow = !this.isShow;
      },
    },
  });
</script>

<div id="app">
  <p v-if="isShow">v-if</p>
</div>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      isShow: true,
    },
  });
</script>