今天学了Vue指令
其中必须在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处理方法一个是直接获取元素，一个是获取元素和下标，通过
此表达式将循环的值打印出来。
打印结果：
标签：el,Vue,35,点击,指令,new,10.16 From： https://www.cnblogs.com/zzqq1314/p/17763098.html