Vue基础语法
输出hello world
首先在一个标准html中创建一个vue.js，然后引入，最终代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue学习</title>
<script src="./vue.js"></script>
</head>
<div id="root">{{ content }}</div>
<script>
new Vue({
el: "#root",
data: {
content: "hello world"
}
})
</script>
</html>
-
挂载点：这里的
<div id="root">{{ content }}</div>指的就是vue实例挂载点，因为el中的#id元素是和上面的id是对应的，vue实例只会处理挂载点里面的内容，如果把{{ content }}放在挂载点外，则是无效的。 - 模版：在挂载点内部的内容叫做模版，也可以把模版也在实例中：
<div id="root"></div>
<script>
new Vue({
el: "#root",
template: "<h1>{{ content }}</h1>",
data: {
content: "hello world"
}
})
</script>
-
实例:用
new Vue可以创建一个实例，而vue就会根据你的挂载点el和template来最终最终的内容，然后把内容放在挂载点上
另外，data中的content是随便定义的，你也可以叫number、msg，都是可以的，然后用{{对应的结果值}}就可以输出了，这种表达式叫插值表达式
vue指令
数据展示
接下来说下vue中的指令，上面的hello world我们可以用指令输出：
<div id="root">
<div v-text="content"></div>
</div>
<script>
new Vue({
el: "#root",
data: {
content: "hello world"
}
})
</script>
</html>
v-text是<h1>中的内容由content这个变量和指定，他告诉div你显示这个content这个变量，也可以用v-html来写，那他们俩有何区别呢？
<div id="root">
<div v-text="content"></div>
</div>
<script>
new Vue({
el: "#root",
data: {
content: "<h1>hello world</h1>"
}
})
</script>
这个例子中你可以将v-text替换成v-html测试下，会发现v-text会直接输出content中的内容<h1>hello world</h1>,进行了转译，而v-html不会将其转译，也就有了<h1>标签的效果
绑定指令
如果我想在页面上点击hello，然后让hello变成world，应该如何做呢？这就要用的vue中的v-on指令，代码如下:
<div id="root">
<div v-on:click="handleClick">{{ content }}</div>
</div>
<script>
new Vue({
el: "#root",
data: {
content: "hello"
},
methods: {
handleClick: function () {
this.content = "world"
}
}
})
</script>
- 首先是在<div>标签上绑定了click事件，当这个事件被触发的时候，就会调用你定义的handleClick事件，这个方法定义在vue实例中的
methods这个对象里，只要把handleClick写在methods，就会自动执行这个方法 - 因为改变vue中的数据跟我们之前的直接操作Dom不同，这里是直接改变数据的：
this.content = "world"，因为vue会自动帮你去更新Dom -
this.content是你在data下定义的content -
v-on:click可以简写为@click
属性和双向数据绑定
属性绑定
<div>上可以增加title属性，这样就可以在触碰hello world的时候，就会有一个title提示，提示语如何可变呢，我们可以在data中定义一个title，然后用v-bind来和data的数据项(title)进行绑定：
<div id="root" v-bind:title="title">hello world</div>
<script>
new Vue({
el: "#root",
data: {
title: "i am a title"
}
})
</script>
-
v-bind可以简写成:
双向数据绑定
<div id="root">
<div :title="title">hello world</div>
<input />
<div>{{ content }}</div>
</div>
<script>
new Vue({
el: "#root",
data: {
title: "i am a title",
content: "this is a content"
}
})
</script>
这里先说下单项绑定，单项绑定的意思，也就是这里的content里的数据是由data 下定义的数据(content)来决定的，但是div这里的内容并不可以改变，也就是数据决定页面的显示，但是页面无法决定你数据里的内容，这里想通过<input>的值来去改变data下content的值，这就需要用到双向绑定的语法:v-model了
<div id="root">
<div :title="title">hello world</div>
<input v-model="content" />
<div>{{ content }}</div>
</div>
<script>
new Vue({
el: "#root",
data: {
title: "i am a title",
content: "this is a content"
}
})
</script>
vue中的计算属性和侦听器
计算属性
如果我想实现通过在两个文本框中分别输入姓 和 名，然后在下面的div中显示完整的姓名，因为我学过双向绑定了，我可能会用v-model来去解决这个问题，代码如下：
<div id="root">
姓：<input v-model="firstName" />
名：<input v-model="lastName" />
<div>{{ firstName }}{{ lastName }}</div>
</div>
<script>
new Vue({
el: "#root",
data: {
firstName: '',
lastName: ''
}
})
</script>
但是这样写，太复杂了，因为我会用两个插值表达式：{{ firstName }}和{{ lastName }}，那有没有好的方法吗？代码如下：
<div id="root">
姓：<input v-model="firstName" />
名：<input v-model="lastName" />
<div>{{ fullName }}</div>
</div>
<script>
new Vue({
el: "#root",
data: {
firstName: '',
lastName: ''
},
computed: {
fullName: function() {
return this.firstName + ' ' + this.lastName
}
}
})
</script>
这里用到了vue中的computed计算属性，会把两个值(firstName和lastName)来计算一个新值(fullName)，computed有一个好处，就是当你(firstName和lastName)的值如果没发生变化，不会重新计算，那会取上一次计算的缓存值，只有当firstName和lastName其中一个值发生改变的时候，才会重新计算，所以说computed的性能还是很高的
侦听器
如果我有一个需求，当你firstName或者lastName发生改变的时候，在页面下方的一个count值会加1，这要如何做呢，这要用到vue中的侦听器watch，代码如下：
<div id="root">
姓：<input v-model="firstName" />
名：<input v-model="lastName" />
<div>{{ fullName }}</div>
<div>{{ count }}</div>
</div>
<script>
new Vue({
el: "#root",
data: {
firstName: '',
lastName: '',
count: 0
},
computed: {
fullName: function() {
return this.firstName + ' ' + this.lastName
}
},
watch: {
firstName: function() {
this.count ++
},
lastName: function() {
this.count ++
}
}
})
</script>
侦听器是我去针对某一个数据的变化，一旦这个数据发生改变，我就可以去watch中去加上我的业务逻辑，但是这样写还是有点复杂，可以这样优化，代码如下：
<div id="root">
姓：<input v-model="firstName" />
名：<input v-model="lastName" />
<div>{{ fullName }}</div>
<div>{{ count }}</div>
</div>
<script>
new Vue({
el: "#root",
data: {
firstName: '',
lastName: '',
count: 0
},
computed: {
fullName: function() {
return this.firstName + ' ' + this.lastName
}
},
watch: {
fullName: function() {
this.count ++
}
}
})
</script>
我去监听一个计算属性的变化
其他一些重要的指令
需求：我有一个div，div中内容是hello world，下方有一个button，button名字叫toggle，我可以通过这个button来控制hello world的显示和隐藏，也就是当有hello world的时候，我点击toggle隐藏，再次点击，就会隐藏
v-if
<div id="root">
<div v-if="show">hello world</div>
<button @click="handleCLick">toggle</button>
</div>
<script>
new Vue({
el: "#root",
data: {
show: true
},
methods: {
handleCLick: function() {
this.show = !this.show
}
}
})
</script>
这里会根据show属性为true或者false来进行显示和隐藏，在页面查看元素也就是当为true就删除dom，为false就新增dom
v-show
<div id="root">
<div v-show="show">hello world</div>
<button @click="handleCLick">toggle</button>
</div>
<script>
new Vue({
el: "#root",
data: {
show: true
},
methods: {
handleCLick: function() {
this.show = !this.show
}
}
})
</script>
在页面查看元素会发现，v-show是控制了hello world的这个div的显示和隐藏(display属性会变成none)，如果频繁点击，推荐用v-show，因为不会频繁操作dom
v-for
而v-for是当我有一个数据进行循环展示的时候用到的，比如一个数组[1, 2, 3]：
<div id="root">
<div v-show="show">hello world</div>
<button @click="handleCLick">toggle</button>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el: "#root",
data: {
show: true,
list: [1, 2, 3]
},
methods: {
handleCLick: function() {
this.show = !this.show
}
}
})
</script>
- 这里的
v-for="item in list"换成v-for="item of list"是一样的效果，都是可以的
更多文档
网友评论