前端框架Vue基础语法笔记

Vue基础语法笔记 本笔记主要涵盖了Vue基础语法的知识点，包括创建Vue实例、数据绑定、事件绑定、循环和数据双向绑定、组件化等方面的内容。 一、创建Vue实例 在Vue中，创建一个实例需要使用Vue.createApp()方法，并将模板template和数据data()传递给它。例如： ```html <script> // 创建Vue实例 Vue.createApp({ template: '<div>Hello World!</div>' }).mount("#app") </script> ``` 这里，我们创建了一个Vue实例，并将模板 `<div>Hello World!</div>` 传递给它。然后，我们使用 `mount()` 方法将实例挂载到 `#app` 元素上。 二、数据绑定 在Vue中，我们可以使用 `data()` 方法来定义数据，然后使用模板语法来绑定数据。例如： ```html <script> // 创建Vue实例 Vue.createApp({ data() { return { text: "Hello World!" } }, template: '<div>{{text}}</div>' }).mount("#app") </script> ``` 这里，我们定义了一个 `text` 数据，然后使用模板语法 `{{text}}` 将其绑定到模板上。 三、事件绑定 在Vue中，我们可以使用 `v-on` 指令来绑定事件。例如： ```html <script> // 创建Vue实例 Vue.createApp({ data() { return { content: "", setHideText: "隐藏文本", isShowText: false } }, methods: { buttonOneClick() { this.content = "按下按钮一" }, showHideClick() { this.isShowText = !this.isShowText } }, template: ` <div> <div>{{content}}</div> <button v-on:click="buttonOneClick">按钮一</button> <div> <div v-if="isShowText">{{setHideText}}</div> <button v-on:click="showHideClick">显示/隐藏</button> </div> </div> ` }).mount("#app") </script> ``` 这里，我们定义了两个事件 `buttonOneClick` 和 `showHideClick`，然后使用 `v-on` 指令将它们绑定到按钮上。 四、循环和数据双向绑定 在Vue中，我们可以使用 `v-model` 指令来实现数据双向绑定。例如： ```html <script> // 创建Vue实例 Vue.createApp({ data() { return { inputValue: '', list: [] } }, template: ` <div> <input v-model="inputValue" /> <ul> <li v-for="(item, index) in list">{{item}}</li> </ul> </div> ` }).mount("#app") </script> ``` 这里，我们使用 `v-model` 指令将 `inputValue` 数据双向绑定到输入框上，然后使用 `v-for` 指令将 `list` 数组循环渲染到模板上。 五、组件化 在Vue中，我们可以使用组件化来复用代码。例如： ```html <script> // 创建Vue实例 Vue.createApp({ data() { return { list: [] } }, template: ` <div> <component v-bind:item="item" v-for="(item, index) in list">{{item}}</component> </div> ` }).mount("#app") </script> ``` 这里，我们使用 `v-bind` 指令将 `item` 数据绑定到组件的 `item` 属性上，然后使用 `v-for` 指令将 `list` 数组循环渲染到模板上。