Vue基础
简介：本文旨在用最短的篇幅和例子，代入大家入门vue,也是本博主的一个学习记录，本文主要介绍的组件有，v-text,v-html,v-on,v-if。
入门案例
学习代码：
<!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入门</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <p> {{username}} <h1>{{msg}}</h1> </p> </div> </body> <script> const app = new Vue({ el:"#app", data:{ msg:"Vue欢迎你！", username:"Jerry" }, }); </script> </html>
运行结果：
v-text
功能：给标签中的文本添加内容
学习代码：
<!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>v-text</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <span>{{message}}</span> <span v-text="message"></span> </div> </body> <script> const app = new Vue({ el:"#app", data:{ message:"你好,Vue!" }, }); </script> </html>
运行结果：
v-html
功能：相比v-text，也是文本替换，只是对于v-html它可以把文本转换成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>v-html</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <span>{{message}}</span> <br> <span v-text="message"></span> <br> <span v-html="message">随便</span> </div> </body> <script> const app = new Vue({ el:"#app", data:{ message:"<a href=''>vue欢迎您</a>" }, methods:{ } }); </script> </html>
v-on(@click)
简介：绑定点击事件。
学习代码：
<!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>v-on</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <h2>{{message}}</h2> <h2>年龄：{{number}}</h2> <br> <input type="button" value="点我改变数字" v-on:click="changenumber"> </div> </body> <script> const app = new Vue({ el:"#app", data:{ message:"hello,vue!", number:8 }, methods:{ changenumber(){ this.number = 10; } } }); </script> </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>v-on(简化版)</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <span>{{count}}</span> <input type="button" value="改变count的值" @click="changenumber"> </div> </body> <script> const app = new Vue({ el:"#app", data:{ count:1 }, methods:{ changenumber(){ this.count ++; } } }); </script> </html>
运行结果：
v-if
简介：类比与Java里面的if，判断语句。
<!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>v-if</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <div v-if="current=='search'">显示搜索框</div> <div v-else-if="current=='keywords'">显示搜索关键字</div> <div v-else>显示搜索结果</div> <button @click="current='search'">显示搜索框</button> <button @click="current='keywords'">显示关键字</button> <button @click="current='results'">显示搜索结果</button> </div> </body> <script> const app = new Vue({ el:"#app", data:{ current:'search' }, methods:{ } }); </script> </html>
运行结果：
