vue重要知识点总结，快来瞅瞅！！

Vue.js是一个流行的JavaScript框架，用于构建交互式的Web界面。

1. Vue实例：
   - Vue实例是通过调用Vue构造函数来创建的一个对象，作为Vue.js应用程序的根实例。
   - 创建Vue实例时，可以传入一个选项对象，包含配置选项如data、methods、computed、          watch、生命周期钩子等。

   示例：

   var vm = new Vue({
     el: '#app', // 将Vue实例挂载到id为app的元素上
     data: {
       message: 'Hello Vue!'
     },
     methods: {
       showMessage: function() {
         alert(this.message);
       }
     }
   });

2. 模板语法：
   - Vue使用类似HTML的模板语法，结合指令和插值表达式，从而将数据动态地绑定到DOM中。
   - 双大括号插值语法：通过`{{ }}`可以在模板中插入Vue实例中的数据，实现数据的动态显示。
   - v-bind指令：用于动态地绑定元素的属性，并将Vue实例的数据绑定到属性的值上。
   - v-on指令：用于监听DOM事件，并在事件触发时执行Vue实例中的方法。   示例：

   <div id="app">
     <p>{{ message }}</p>
     <input v-bind:value="message">
     <button v-on:click="showMessage">Show Message</button>
   </div>

   <script>
   var vm = new Vue({
     el: '#app',
     data: {
       message: 'Hello Vue!'
     },
     methods: {
       showMessage: function() {
         alert(this.message);
       }
     }
   });
   </script>

3. 计算属性和侦听器：
   - 计算属性：根据已有的数据，动态计算出新的属性值，并且会缓存计算结果，只在相关的依赖发生改变时重新计算。
   - 侦听器：用于监听数据的变化，当数据发生改变时，执行相应的操作。   示例：

   <div id="app">
     <p>{{ fullName }}</p>
   </div>

   <script>
   var vm = new Vue({
     el: '#app',
     data: {
       firstName: 'John',
       lastName: 'Doe'
     },
     computed: {
       fullName: function() {
         return this.firstName + ' ' + this.lastName;
       }
     }
   });
   </script>

4. 条件渲染和列表渲染：
   - v-if / v-else / v-else-if：用于根据条件控制元素是否渲染。
   - v-show：根据条件控制元素的显示和隐藏，通过CSS的display属性实现。
   - v-for：用于遍历数组或对象，将其中的元素渲染到模板中。   示例：

   <div id="app">
     <p v-if="showMessage">This is a message.</p>
     <p v-else>Message is hidden.</p>

     <ul>
       <li v-for="item in items">{{ item }}</li>
     </ul>
   </div>

   <script>
   var vm = new Vue({
     el: '#app',
     data: {
       showMessage: true,
       items: ['Apple', 'Banana', 'Orange']
     }
   });
   </script>

5. 组件：
   - 组件是可复用的Vue实例，可以封装和组合视图和行为，提高代码的可维护性和复用性。
   - 全局组件：使用`Vue.component`方法可以全局注册一个组件，然后在应用程序的任何地方使用它。
   - 局部组件：在Vue实例的`components`选项中注册一个局部组件，只能在该实例内部使用。

   示例：

   <div id="app">
     <my-component></my-component>
   </div>
     </ul>
     <ul>
       <li v-for="(item, index) in items">{{ index }}: {{ item }}</li>
     </ul>
     <ul>
       <li v-for="(value, key) in object">{{ key }}: {{ value }}</li>
     </ul>
   </div>
   <script>
   var app = new Vue({
     el: '#app',
     data: {
       items: ['Apple', 'Banana', 'Orange'],
       object: { name: 'John', age: 25, gender: 'male' }
     }
   });
   </script>

9. 事件处理：
   - 在Vue中，可以通过v-on指令来监听DOM事件，并在事件触发时执行Vue实例中指定的方法。
   - 可以使用内联事件处理器，在模板中直接调用Vue实例中的方法。
   - 也可以使用事件修饰符来增强事件处理的功能，如阻止默认行为、停止事件传播、按键修饰等。

   示例：

<div id="app">
     <button v-on:click="showMessage">Show Message</button>
     <button v-on:mouseover="changeColor">Change Color</button>
     <input v-on:keyup.enter="submitForm" type="text">
   </div>
   <script>
   var app = new Vue({
     el: '#app',
     methods: {
       showMessage: function() {
         alert('Hello Vue!');
       },
       changeColor: function() {
         this.$el.style.backgroundColor = 'red';
       },
       submitForm: function() {
         console.log('Form submitted');
       }
     }
   });
   </script>

10. 过滤器：
    - 过滤器可以在输出前对数据进行格式化处理，用于将数据按照指定的规则进行转换。
    - Vue提供了内置的过滤器，也可以自定义过滤器来满足特定的需求。
    - 过滤器可以通过管道（|）符号链式调用，并传递参数。

    示例：

    <div id="app">
      <p>{{ message | capitalize }}</p>
      <p>{{ number | currency('USD') }}</p>
    </div>
    <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'hello vue',
        number: 12345.6789
      },
      filters: {
        capitalize: function(value) {
          if (!value) return '';
          value = value.toString();
          return value.charAt(0).toUpperCase() + value.slice(1);
        },
        currency: function(value, currency) {
          if (!value) return '';
          return value.toLocaleString('en-US', { style: 'currency', currency: currency });
        }
      }
    });
    </script>