【自学条记】Vue根本知识点总览-连续更新

提示：文章写完后，目次可以主动天生，怎样天生可参考右边的资助文档
  

---

弁言

Vue.js是一个构建用户界面的渐进式框架，以其简便的API和易于上手的特点受到了广大开发者的喜好。本文旨在总结Vue的根本知识，并通过实际代码示例资助初学者快速把握Vue的核心概念。
Vue根本知识概览

1. Vue实例

Vue实例是每个Vue应用的出发点。通过创建一个新的Vue实例，我们可以将Vue绑定到DOM元素上，并开始管理该元素及其子元素。
示例代码：

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.     <meta charset="UTF-8">
5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
6.     <title>Vue实例示例</title>
7.     <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
8. </head>
9. <body>
10.     <div id="app">
11.         {{ message }}
12.     </div>
14.     <script>
15.         var app = new Vue({
16.             el: '#app',
17.             data: {
18.                 message: 'Hello Vue!'
19.             }
20.         });
21.     </script>
22. </body>
23. </html>

复制代码

在这个示例中，我们创建了一个Vue实例，并将其绑定到ID为app的DOM元素上。然后，我们在Vue实例的data对象中界说了一个名为message的数据属性。通过双大括号语法{{ message }}，我们可以在模板中绑定并表现这个数据属性。
2. 模板语法

Vue使用基于HTML的模板语法，答应你声明式地将DOM绑定到底层Vue实例的数据。全部的Vue模板都是正当的HTML，以是能被遵照规范的欣赏器和HTML剖析器剖析。
示例代码：

1. <div id="app">
2.     <p>{{ message }}</p>
3.     <p v-bind:title="message">悬停查看</p>
4.     <a v-bind:href="url">访问网站</a>
5.     <p v-if="seen">现在你看到我了</p>
6. </div>
8. <script>
9.     var app = new Vue({
10.         el: '#app',
11.         data: {
12.             message: '鼠标悬停查看标题',
13.             url: 'https://www.example.com',
14.             seen: true
15.         }
16.     });
17. </script>

复制代码

在这个示例中，我们展示了Vue的文本插值（{{ message }}）、属性绑定（v-bind:title）、条件渲染（v-if）等模板语法。
3. 盘算属性

盘算属性是基于它们的依靠举行缓存的相应式属性。只有当相干依靠发生改变时，它们才会重新求值。
示例代码：

1. <div id="example">
2.     <p>原始消息："{{ message }}"</p>
3.     <p>反转消息："{{ reversedMessage }}"</p>
4. </div>
6. <script>
7.     var vm = new Vue({
8.         el: '#example',
9.         data: {
10.             message: 'Hello'
11.         },
12.         computed: {
13.             // 计算属性的getter
14.             reversedMessage: function () {
15.                 // `this` 指向 vm 实例
16.                 return this.message.split('').reverse().join('');
17.             }
18.         }
19.     });
20. </script>

复制代码

在这个示例中，我们界说了一个名为reversedMessage的盘算属性，它返回message属性的反转字符串。当message属性发生厘革时，reversedMessage会主动更新。
4. 变乱处置处罚

Vue答应我们使用v-on指令（或简写情势@）来监听DOM变乱，并在触发时运行一些JavaScript代码。
示例代码：

1. <div id="app-5">
2.     <p>{{ message }}</p>
3.     <button v-on:click="reverseMessage">反转消息</button>
4. </div>
6. <script>
7.     var app5 = new Vue({
8.         el: '#app-5',
9.         data: {
10.             message: 'Hello Vue!'
11.         },
12.         methods: {
13.             reverseMessage: function () {
14.                 this.message = this.message.split('').reverse().join('');
15.             }
16.         }
17.     });
18. </script>

复制代码

在这个示例中，我们界说了一个名为reverseMessage的方法，并在按钮的点击变乱中调用它。当按钮被点击时，message属性会被反转。

---

总结

提示：这里对文章举行总结：
比方：以上就是本日要讲的内容，自学记录Vue根本知识点总览。