vue入门学习笔记，vue.js下载
目录：
- 挂载点、模板、实例之间的关系
- 数据、事件和方法
- 属性绑定和双向数据绑定
- 计算属性和侦听器
- v-if，v-show与v-for指令
- 案例to-do-list开发
-
挂载点、模板、实例之间的关系
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Vue Learning</title> <script src="./vue.js"></script </head> <body> <div id="app"> </div> <script> <!--实例--> new Vue({ el:"#app",<!--挂载点--> template:"<h1>xxx{{msg}}</h1>",<!--模板--> data:{ msg:"hello world" } }) </script> </body> </html>
-
数据、事件和方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Vue Learning</title> <script src="./vue.js"></script </head> <body> <div id="app"> <h1>hello {{msg}}</h1><!--插值表达式{{}}--> <h1 v-text="text_fasle"></h1><!-- v-text 不转义--> <div v-html="html_true"></div><!-- v-html 转义--> <div v-on:click="handleClick">{{content}}</div><!-- 点击事件 v-on:click--> <div @click="handleClick">{{content}}</div><!-- 点击事件 @click --> </div> <script> new Vue({ el:"#app", data:{<!--数据--> msg:"world", text_fasle:"<h1>False</h1>", html_true:"<h1>True</h1>", content:"hello" }, methods:{<!--方法定义--> handleClick:function(){ this.content="world" } } }) </script> </body> </html>
-
属性绑定和双向数据绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Vue Learning</title> <script src="./vue.js"></script </head> <body> <div id="app"> <div v-bind:title="title">hello world</div><!-- 属性绑定 v-bind:title --> <div :title="title">hello world</div><!-- 属性绑定 :title --> <input :value="content"/><!-- 单向数据绑定 即上面的属性绑定 --> <br> <input v-model="content"/><!-- 双向数据绑定 v-model --> <div>{{content}}</div> </div> <script> new Vue({ el:"#app", data:{ title:"this is hello world", content:"this is content" } }) </script> </body> </html>
-
计算属性和侦听器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Vue Learning</title> <script src="./vue.js"></script </head> <body> <div id="app"> 姓：<input v-model="firstName"/> 名：<input v-model="lastName"/> <div>{{fullName}}</div> <div>{{count}}</div> </div> <script> new Vue({ el:"#app", data:{ firstName:"", lastName:"", count:0 }, computed:{<!-- 计算属性 --> fullName:function(){ return this.firstName+this.lastName } }, watch:{<!-- 侦听器 --> fullName:function(){ this.count++ } } }) </script> </body> </html>
-
v-if，v-show与v-for指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Vue Learning</title> <script src="./vue.js"></script </head> <body> <div id="app"> <div v-if="showd">hello world</div><!-- v-if 判断 值为false直接将元素从dom中删除 --> <div v-show="showd">hello world</div><!-- v-show 判断 值为false将元素从dom中隐藏 --> <button @click="handleClick">toggle</button> <ul> <li v-for="(item,index) of items" :key="index">{{item,index}}</li> <!-- v-for 循环显示数据 其中:key提高渲染效率，唯一 --> </ul> </div> <script> new Vue({ el:"#app", data:{ showd:true, items:[1,2,3] }, methods:{ handleClick:function(){ this.showd=!this.showd } } }) </script> </body> </html>
-
案例：to-do-list开发
输入的内容可以在下面实时显示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Vue Learning</title> <script src="./vue.js"></script </head> <body> <div id="app"> <div> <input v-model="inputValue"/> <button @click="handleClick">提交</button> </div> <ul> <li v-for="(item,index) of itemValues" :key="index">{{item}}</li> </ul> </div> <script> new Vue({ el:"#app", data:{ inputValue:"", itemValues:[] }, methods:{ handleClick:function(){ this.itemValues.push(this.inputValue) this.inputValue="" } } }) </script> </body> </html>