创建一个 vue 实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue入门</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">{{msg}}</div>
<script>
new Vue({
el: "#root",
data: {
msg: "Hello, vue.js world!"
}
})
</script>
</body>
</html>
挂载点，模板与实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue入门</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
{{msg}}
<!--<h1>Hi, {{msg}}</h1>-->
</div>
<script>
new Vue({
el: "#root",
template: "<h1>Hi, {{msg}}</h1>",
data: {
msg: "Hello, vue.js world!"
}
})
</script>
</body>
</html>
- 实例：使用
new关键字，生成一个实例 - 挂载点：实例中
el后面的 dom 元素就是挂载点。 - 模板：实例中
template后面指定的 html 内容就是模板。也可以直接在挂载点的内部
实例中数据，事件与方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue入门</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<!-- v-on:click 绑定一个 click 事件，处理函数是 handleClick, 它被定义在实例的 methods 中-->
<div v-on:click="handleClick">
{{content}}
<!--<div v-text="content"></div>-->
</div>
</div>
<script>
new Vue({
el: "#root",
data: {
content: "Hello"
},
methods: {
handleClick: function() {
this.content = "world"
}
}
})
</script>
</body>
</html>
数据展示
像这样通过 {{DATA}} 来传递的方式称为差值表达式。除了使用差值表达式之外，还可以使用以下方式来绑定：
-
v-text：转义内容，以文本方式显示(如<h1>Hello</h1>显示<h1>Hello</h1>) -
v-html：不转义内容，以 html 方式显示(如<h1>Hello</h1>显示粗体的Hello)
绑定事件
v-on:ACTION="FUNC"：点击后执行某操作，FUNC 函数定义在实例的 methods 中。其中 v-on: 可以简写成 @ 符号，即可以等价为 @ACTION="FUNC"，如：@click="handleClick"
方法定义
方法写在 vue 实例的 methods 后面，要操作原 dom 的值使用 this 关键字。
原来我们操作 html 内容时，是面向 dom 元素去编程，现在在 vue 中我们是面向 data 数据编程。当 data 发生改变，页面自动就会发生变化
属性绑定和双向数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性绑定和双向数据绑定</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<!--模板内容-->
<div v-bind:title="title">hello world</div>
<input v-model="content"/>
<div>{{content}}</div>
</div>
<script>
new Vue({
el: "#root",
data: {
title: "this is hello world",
content: "this is content"
}
})
</script>
</body>
</html>
title 是 html 的一个属性，功能是当鼠标放到内容上，显示 title 后面的值，起到提示的作用。
属性绑定
v-bind:ATTR="xxx" 模板指令用于绑定 html 属性。模板指令等号(=)后面跟的是一个 js 表达式，在里面可以写 js。其中 v-bind: 可以简写成 :。
双向数据绑定
-
单向绑定：数据决定页面显示，但页面无法影响数据内容。 -
双向绑定：页面内容发生改变时，数据也会被改变。data 发生改变了，页面显示内容也发生改变。
想要实现双向绑定，就要使用：v-model 模板指令，它包含了属性绑定的功能。
计算属性和侦听器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性和侦听器</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<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 ++
//}
fullName: function() {
this.count ++
}
}
})
</script>
</body>
</html>
计算属性
在实例中使用 computed 计算属性是指一个属性是通过其他属性计算而来。在以上实例中我们使用 computed 来计算生成 fullName。computed 会使用上一次的缓存，只有当一个或多个属性值发生变化是它才会重新计算。
侦听器
场景：当我们修改 firstName 或 lastName 后，count 就增加 1，如何来实现呢？
我们使用 watch 侦听器，它是指去侦听某一个数据的变化，一量数据发生变化，就可以在侦听器里做相关业务逻辑操作。
v-if, v-show 与 v-for 指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-if, v-show 与 v-for 指令</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<!--模板内容-->
<div v-show="show">hello world</div>
<button @click="handleClick">toggle</button>
<ul>
<li v-for="(index, item) of list" :key="index">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el: "#root",
data: {
show: true,
list: [1, 2, 3]
}
methods: {
handleClick: function() {
this.show = !this.show
}
}
})
</script>
</body>
</html>
点击 toggle 按钮来显示/隐藏 hello world。
v-if 和 v-show
-
v-if：是否存在，添加/删除 dom 元素。 -
v-show：是否显示，显示/隐藏 dom 元素，display:none。
v-for
将数据循环展示到页面中，添加 key 值会提高渲染性能。key 值的要求是必须在每次循环中唯一。