<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="vue.js"></script> </head> <!-- 1.绑定事件函数: v-on:click="handleClick" 相当于 @click="handleClick" 2.绑定标签属性: v-bind:title="title" 相当于 :title="title" 3.双向绑定数据: v-model="content" 输入框的内容改变，对应的content数据也会改变 4.v-if="show"与 v-show="show": v-if="show": 直接显示或隐藏标签 v-show="show": 在标签上添加或删除属性 style="display: none;" 频繁显或隐藏，建议使用 v-show="show" 5.循环显示列表list的内容：v-for="(item,index) of list" :key="index" :key="index": 用于提高渲染性能，但index 不能相同 --> <body> <div id="test1"> <div :title="title" @click="handleClick">{{title}}</div> <input v-model="content"/> <div>{{content}}</div> 姓：<input v-model="FirstName"/> 名：<input v-model="LastName"/> <div>{{FullName}}</div> <div>计数:{{count}}</div> <div v-if="show">hellow word【点击隐藏显示】</div> <div v-show="show">hellow word【点击隐藏显示】</div> <button @click="showClick">toggle</button> <ul> <li v-for="(item,index) of list" :key="index">{{item}}</li> </ul> <input v-model="inputValue" /> <button @click="todoList">提交</button> <ul> <li v-for="(item, index) of todolist" :key="index">{{item}}</li> </ul> </div> <script> new Vue({ el: "#test1", data: { content: "嘿嘿", title: "This is hellow word", FirstName: "", LastName: "", count: 0, show: true, list: [1,2,3,4,5], inputValue: "", todolist: [], }, methods: { //函数定义属性 handleClick: function () { this.content = "哈哈" //点击改变content数据 }, showClick: function () { this.show = !this.show }, todoList: function () { this.todolist.push(this.inputValue), //将获取到的值加入列表 this.inputValue = "" } }, computed: { //计算属性 FullName: function () { return this.FirstName + ' ' + this.LastName } }, watch: { //侦听器 FullName: function () { this.count ++ } } }) </script> </body> </html>