Vue2学习笔记

Vue 是一套用于构建用户界面的渐进式 JavaScript 框架。

快速入门

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Quick Vue Example</title>
  <!-- 引入 Vue 库 -->
  <script src="https://cdn.bootcss.com/vue/2.7.14/vue.js"></script>
</head>
<body>
  <!-- 定义 Vue 应用程序的挂载点 -->
  <div id="app">
    <h1>{{ message }}</h1>
  </div>

  <!-- 引入我们的 JavaScript 文件 -->
  <script src="main.js"></script>
</body>
</html>

// main.js
// 创建一个 Vue 实例
var app = new Vue({
    // 定义应用程序的挂载点
    el: '#app',
    // 定义数据属性
    data: {
      message: 'hello Vue!'
    }
  });

Vue2 学习资料

VUE2官方教程: https://v2.cn.vuejs.org/v2/guide

视频教程: 尚硅谷Vue2.0+Vue3.0全套教程

Todo新手教程: 追梦人物的博客

学习笔记

<!-- 插值语法 -->
<p>hello {{name}}</p>

<!-- 指令语法 -->
<a v-bind:href="url">Vue</a>

<!-- 单向绑定 -->
<input type="text" v-bind:value="name">
<input type="text" :value="name">

<!-- 双向绑定 -->
<input type="text" v-model:value="name">
<input type="text" v-model="name">

<!-- 事件绑定 -->
<button v-on:click="showInfo">点击</button>
<button @click="showInfo">点击</button>

<!-- 事件修饰符 -->
<a href="url" @click.prevent="showInfo">Vue</a>

<!-- 监听键盘事件 -->
<input type="text" @keyup.enter="showInfo">

new Vue({
    el: "#app",
    data: {
        name: "Vue",
    },
    // 方法
    methods: {
        showInfo() {
            return this.name
        }
    },
    // 计算属性
    computed: {
        computedName() {
            return this.name
        }
    },
    // 监视属性
    watch: {
        watchName(newValue, oldValue) {
            console.log(this.name)
        }
    }
})