v-bind
主要用法是动态更新HTML元素上的属性，绑定属性。简写（ ：）
<input type = "text" v-model="name" placeholder="你的名字">
<h1>你好，{{name}}</h1>
<img v-bind:src="url">
<button v-on:click="lx">点击查看</button>
<button @click="lx2">点击改变图片</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data:{
name:'',
url:'https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00523-3355.jpg'
},
methods:{
lx(){
alert('hello world')
},
lx2(){
this.url = 'https://img0.baidu.com/it/u=1485455401,338814196&fm=26&fmt=auto'
}
}
})
</script>
代码运行结果
注：{{ }}是绑定文本，文本插值法。v-on是绑定事件（事件修饰符。简写（@））
v-html
双大括号语法无法渲染HTML标签，我们需要使用v-html。
<div v-html="vue"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
vue:'<h1>hello world</h1>',
}
})
</script>
代码运行结果
v-for
当需要将一个数组遍历或枚举一个对象循环显示时，就会用到列表渲染指令v-for。它表达式需要结合in来使用，类似item in items的形式来写。
<body>
<div id="app">
<ul>
<li v-for="book in books">{{book.name}}</li>
</ul>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
books:[
{name:'《西游记》'},
{name:'《水浒传》'},
{name:'《红楼梦》'},
{name:'《聊斋志异》'}
],
}
})
</script>
代码运行结果
v-if , v-else-if , v-else
与JS的条件语句if，else，else if类似，Vue.js的条件指令可以根据表达式在DOM中渲染或销毁元素/组件。
</head>
<body>
<div id="app">
<div v-html="status"></div>
<p v-if="status===1">当status为1时显示该行</p>
<p v-else-if="status===2">当status为2时显示该行</p>
<p v-else>否则执该行</p>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
status:4
}
})
</script>
代码运行结果
注：v-else-if要紧跟v-if ，v-else要紧跟v-else-if或v-if，表达式的值为真时，当前元素/组件及所有节点将被渲染，为假时被移除。
v-show
v-show的用法与v-if基本一致，只不过v-show是改变元素的CSS属性display。当v-show表达式的值为false时，元素会隐藏，查看DOM结构会看到元素上加载了内联样式display：none。
</head>
<body>
<div id="app">
<p v-show="status===1">当status为1时显示该行</p>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
status:1
}
})
</script>
代码运行结果
v-model
用于表单类元素上双向绑定数据，例如在输入框上使用时，输入内容会实时映射到绑定的数据上。
<div id="app">
<input type="text" v-model="centent" placeholder="输入...">
<p>输入内容是：{{centent}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
centent:''
}
})
</script>
代码运行结果
路由
跳转方法 <router-link>
<template>
<div>
<h1>首页</h1>
<router-link to="/">点击副页</router-link>
<router-link to="/Hello">副页</router-link>
</div>
</template>
<template>
<div>
<h1>副页</h1>
<button @click="$router.go(-1)">点击返回上一页</button>
</div>
</template>
运行结果.png
运行结果.png
