前端框架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` 数组循环渲染到模板上。
剩余20页未读,继续阅读
- 粉丝: 0
- 资源: 2
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助