推荐慕课网Vue.js视频教学,简单、易学、时间短,小白的入手必备
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue入门</title> <script src="Vue.js"></script> </head> <body> <!--1、挂载点(相当于绑定关于可以相当于类选择或者id选择)、模板可以写在Vue中的tempate中也可以写在挂载点中、实例之间的关系--> <!--2、Vue实例中的数据 data函数、事件 methods和方法 this.content--> <!--Vue中的属性绑定和双向数据绑定--> <!--todolist功能开发--> <div id="root"> <div @click="handleClick" :title="title"> <!-- @等于v-on: --> <!-- :等于v-bind: --> <!-- v-model:双向绑定--> <!--{{content}}--> hello world </div> <input v-model="content"/> <div :value="content">{{content}}</div> 姓:<input v-model="firstName"/> 名:<input v-model="lastName"/> <div>{{fullName}}</div> <div>{{count}}</div> <div v-if="show">hello world</div> <button @click="handleClick">toggle</button> <ul> <li v-for="(item,index) of list" :key="index">{{item}}</li> </ul> <div> <input v-model="inputValue"/> <button @click="handleSubmit">提交</button> <ul> <li v-for="(item,index) of list" :key="index">{{item}}</li> </ul> </div> </div> <!--v-text与v-html的区别 v-text会进行转义,v-html不会进行转义,同样的内容例如<h1>Hello</h1> v-text会显示<h1>Hello</h1> v-html会显示Hello --> <!-- v-show 与 v-if 区别 使用v-show属性只是给控件添加了一个style="display:none" css属性值 使用v-if 是移除标签 v-show性能比较好点,如果使用频率大的话使用v-show,不大使用v-if --> <script> new Vue({ el:"#root",//接管那个元素,将id为root的元素绑定 data:{ content:"this is content", title:"this is hello world", firstName:'', lastName:'', count:0, show:true, list:[], inputValue:"", }, //Vue中的计算属性复合运算 computed:{ fullName:function () { return this.firstName + '' + this.lastName } }, //侦听器 内容发生变化时使用 watch:{ fullName:function () { this.count++ }, }, methods:{ // handleClick:function () { // this.content = "world" // }, handleClick:function () { this.show = !this.show }, handleSubmit:function () { this.list.push(this.inputValue) this.inputValue='' } } }) </script> </body> </html>
此篇文章是本人学习时的文章,仅供参考