文章目录
双向绑定
model变了，view跟着改变
v-bind指令，绑定属性值
【v-】开头的属性都是指令属性，是vue提供的特殊特性（vue自定义的标签）。它们会渲染DOM上应用特殊的响应式行为。
【v-bind】指的是绑定属性，将标签属性【title】的值与View Model的值绑定起来，不用写【{ {message}}】这种模板了。因为有时候需要将model的信息放到标签的属性中，这样使用【v-bind】属性更好。
注意！【{ {message}}】只是输出显示model中的数据message，而【v-bind:title=“message”】则可以将model中的数据message作为属性的值进行绑定。
- 显示输出，使用【{ {message}}】
- 作为属性值，使用属性【v-bind:title=“message”】进行绑定
例如：
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<span v-bind:title="message">
停留在这里查看！
</span>
</div>
<script>
var vm1 = new Vue({
el: "#app",
data: {
message: "hello vue!"
}
})
</script>
</body>
</html>
前端除了绑定事件外，其余的逻辑就是判断与循环了，所以还有两个标签【v-if、v-else】【v-for】
注意！绑定标签中的下级标签仍具有作用域，所以需要一个外部div去绑定vm，在div内部进行相应的逻辑操作！
v-if、v-else-if、v-else指令判断值
有了这个vue标签属性就可以根据后台model的数据不同，显示不同的前台不同的信息。这一点更能体现出ViewModel是连接View与Model的桥梁！
值作为判断条件，是否显示标签
例如：
<html lang="en" xmlns:v-if="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-if="flag">{
{message}}</h1>
<h1 v-else>{
{fail}}</h1>
</div>
<script>
var vm1 = new Vue({
el: "#app",
data: {
flag: true,
message: "hello,vue again",
fail: "No!I don't want see you!"
}
})
</script>
</body>
</html>
在这里，使用一个【div】去绑定【vm】，然后其标签的内部就可以使用【vue的属性】也可以使用【model的数据】了！
表达式作为判断条件，是否显示标签
<!DOCTYPE html>
<html lang="en" xmlns:v-if="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-if="flag === false">{
{message}}</h1>
<h1 v-else>{
{fail}}</h1>
</div>
<script>
var vm1 = new Vue({
el: "#app",
data: {
flag: true,
message: "hello,vue again",
fail: "No!I don't want see you!"
}
})
</script>
</body>
</html>
如果【model中的属性flag】绝对等于 false，那么输出【model中的属性message】。但是在这里model中的属性【flag】是 true，所以以上代码会输出【model中的属性fail】的值。
v-for指令迭代数据
<!DOCTYPE html>
<html lang="en" xmlns:v-for="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- "(item, index) in items"这样可以获取值与下标 -->
<li v-for="item in items">
{
{item.message}}
</li>
</div>
<script>
var vm1 = new Vue({
el: "#app",
data: {
items: [
{
message: "student1"},
{
message: "student2"}
]
}
})
</script>
</body>
</html>
遍历循环【model中的属性items】将【items中的数据输出】
注意！for迭代是循环有指令的那个标签！
v-on指令绑定事件
如果你不是用vue进行事件绑定，那么你需要写一个点击事件的函数，函数中修改标签的值（操作DOM元素）。操作DOM元素是很卡的。
所以Vue推出了自己的事件绑定【v-on】
v-on是vm的一个操作，当用户点击按钮后直接修改model的数据，model的数据改变了跟着view的显示数据也会改变。这都是vm在中间做桥梁的效果！
v-on直接操作数据
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="num = num + 1">点我加一</button>
<h1>{
{num}}</h1>
</div>
<script>
var vm1 = new Vue({
el: "#app",
data: {
num: 0
}
})
</script>
</body>
</html>
v-on通过回调函数操作数据
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="addOne">点我加一</button>
<h1>{
{num}}</h1>
</div>
<script>
var vm1 = new Vue({
el: "#app",
data: {
num: 0
},
methods: {
addOne: function () {
// this表示vm1对象
this.num += 1
console.log(this.num)
}
}
})
</script>
</body>
</html>
view变了，model跟着改变
业务场景：
假如有一个【input】标签，它的【placeholder】是【model】的数据。现在点击向【input】中输入数据，【model】中的数据需要跟着改变，在请求时发送【model】才有效！
v-model指令修改model中的数据
可捕捉input、textarea、radio、select标签的值
input：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 显示model中的数据 -->
<h1>{
{message}}</h1>
<input type="text" v-model="message">
</div>
<script>
var vm1 = new Vue({
el: "#app",
data: {
message: ""
}
})
</script>
</body>
</html>
textarea：
<body>
<div id="app">
<textarea cols="10" rows="10" v-model="message"></textarea>
<p>
{
{message}}
</p>
</div>
<script>
var vm1 = new Vue({
el: "#app",
data: {
message: ""
}
})
</script>
</body>
redio:
<body>
<div id="app">
<input type="radio" name="sex" value="男" v-model="message">男
<input type="radio" name="sex" value="女" v-model="message">女
<p>
{
{message}}
</p>
</div>
<script>
var vm1 = new Vue({
el: "#app",
data: {
message: ""
}
})
</script>
</body>
select:
<body>
<div id="app">
<select name="sex" v-model="message">
<option value="男">男</option>
<option value="女">女</option>
<option value="人妖">人妖</option>
</select>
<p>
{
{message}}
</p>
</div>
<script>
var vm1 = new Vue({
el: "#app",
data: {
message: ""
}
})
</script>
</body>
Vue组件
组件其实就相当于一个dom节点（一个dom节点可以含有多个子节点，这样将这个dom节点作为一个模板可以减少代码量）给抽出来成了一个组件（模板）了。
可以使用组件自定义标签
定义一个组件
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<qiu></qiu>
<qiu></qiu>
</div>
<script>
Vue.component("qiu", {
template: '<li>Hello</li>'
})
var vm1 = new Vue({
el: "#app"
})
</script>
</body>
</html>
这就是【.vue】文件中的【template】的原理
组件中使用model的数据
再难一些：组件循环访问【data】中的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<qiu v-for="item in items" v-bind:q="item"></qiu>
</div>
<script>
Vue.component("qiu", {
props: ['q'],
template: '<li>{
{q}}</li>'
})
var vm1 = new Vue({
el: "#app",
data: {
items: ['1', '2', '3']
}
})
</script>
</body>
</html>
解释：组件是不能直接访问model中的数据的，它只能通过标签==【v-for】循环获取==，通过绑定【q】与【item】传入数据到【component】中的【props】（你可以理解为函数传值，item是实参，q是形参
就算data中不是列表只传入一个值，也需要props进行传值。这就是组件的一个使用方法！