其中必须在html页面引用Vue.js,同时加上要控制的位置，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue快速入门</title> </head> <body> <script src="JS/Vue.js"></script> <div id="app"> <input type="text" v-model="message"> <h1>{{message}}</h1> </div> </body> <script> new Vue({ el: "#app", data: { message: "hello Vue" } }) </script> </html>
以上代码就实现了在网页输出message信息helloVue.
1、v-bind指令可以传递url，从而时间点击链接跳转。
v-model提供了方法，使我们可以在文本框修改地址，然后点击链接跳转到新的url。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue v-bind和v-mode指令</title> <script src="JS/vue.js"></script> </head> <body> <div id="app"> <a v-bind:href="url">链接一</a> <a :href="url">链接二</a> <input type="text" v-model="url"> </div> </body> <script> new Vue({ el: "#app", data: { url: "https://www.4399.com" } }) </script> </html>
以上代码点击链接一和二的时候可以让我们跳转到4399.com.。同时又定义了新的文本框使我们可以从中修改信息，修改Vue中的url值。
2、v-on指令，可以帮助我们处理类似js事件监听的事件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue v-on指令</title> <script src="JS/vue.js"></script> </head> <body> <div id="app"> <!-- 绑定事件监听 v-on:event指的是事件如click和focus--> <input type="button" value="点击" v-on:click="handle()"> <!-- 简写 --> <input type="button" value="点击" @click="handle()"> </div> </body> <script> new Vue({ el: "#app", data: { }, methods: { handle: function () { alert("点击事件"); } } }) </script> </html>
如上代码，我们定义了一个handle函数，可以从浏览器中打印出“点击事件”，在html页面点击“点击”就可以出现打印消息。
3、v-if,v-else-if,v-else指令，帮助我们处理条件判断，从而判断出该显示的内容。v-show帮助我们处理显示的内容。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue V-if 和v-else指令</title> <script src="JS/vue.js"></script> </head> <body> <!-- 条件渲染 --> <div id="app"> <input type="text" v-model="age"> <span v-if="age <=35 ">年轻人（35及以下）</span> <span v-else-if="age >35&&age<60 ">中年人（35-60）</span> <span v-else="age >=30">老年人（65以上）</span> <input type="text" v-model="age"> <span v-show="age <=35 ">年轻人（35及以下）</span> <!-- 如果年龄为20，则显示：<span v-show="age ==20">20岁</span> 其他的也渲染，但style="display:none",从而不显示 --> <span v-show="age >35&&age<60 ">中年人（35-60）</span> <span v-show="age >=30">老年人（65以上）</span> </div> </body> <script> new Vue({ el: "#app", data: { age: 20 }, methods: { } }) </script> </html>
以上两个显示框的效果是一致的，两种指令都是添加判断条件，第一种如果不成立就不会渲染，然而第二种即使不成立也会渲染，但是会选择不显示，如下图浏览器中的控制台中所示。
上图的v-show指令将不满足条件的style改成了display:none，使得它们不显示出来。
4、v-for指令可以处理循环问题，我们还是听过代码来说明
<!DOCTYPE html> <lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue v-for指令</title> <script src="JS/vue.js"></script> </head> <body> <div id="app"> <div v-for="addr in locations">{{addr}}</div> <div v-for="(addr,index) in locations">{{index}}:{{addr}}</div> </div> </body> <script> new Vue({ el:"#app", data:{ locations:["河北石家庄","河北唐山","河北邢台","河北邯郸","河北保定","河北衡水","河北秦皇岛","河北沧州"] }, methods: { } }) </script> </html>
上图中标签中的两种for处理方法一个是直接获取元素，一个是获取元素和下标，通过
此表达式将循环的值打印出来。
打印结果：
