Vue.js 初心
目录
- 授人以渔
- 安装
Vue源码解析：https://ustbhuangyi.github.io/vue-analysis/
十本Vue英文书籍：https://booksawesome.com/the-best-books-to-learn-vue-js-for-beginner/
安装Vue.js
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
初试Vue.js
简单小巧的核心，渐进式技术栈，让WEB开发变得简单。
提供现代WEB开发中常见的高级功能，比如：
- 解耦视图与数据
- 可复用的组件
- 前端路由
- 状态管理
- 虚拟DOM(Virtual DOM)
MVVM模式
MVC模式：模型Model 视图View 控制器Controller
在MVC模式中，模型作为中间层，连接上层的控制器和下层的视图
比如说有一个用户信息展示页面，我们采用MVC模式开发
- 视图层，拿到一个User对象后渲染UI
- 逻辑层，收到请求后，可能需要判断用户是否已登录，是否具有查询权限，然后从数据库中取出用户数据，渲染模型，传给视图解析器
- 解析层，视图解析器选择路由，将模型传递给具体的视图层，返回视图层根据模型渲染的视图给用户
MVVM表示Model-View-View-Model，表示模型和视图的双向绑定，当视图变化时，应自动更新模型数据，反之亦然
接下来演示Vue.js的双向数据绑定
<!DOCTYPE html>
<html lang="zh">
<meta charset="utf-8">
<title>Hello, Vue.js</title>
<style>
body {
padding: 0px;
margin: 0px;
}
.title, .button {
background-color: green;
font-size: 20px;
padding: 20px 0px;
}
.input {
background-color: pink;
font-size: 20px;
padding: 20px 0px;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>
<div id="app">
<div class="title"><span>{{ title }}</span></div>
<div class="input"><input v-model="title"></div>
<div class="button"><button @click="test">Undo</button></div>
</div>
<script>
app = new Vue({
el: "#app",
data: {
// 这些字段会挂载到window.app上
title: "Hello, Vue.js"
},
methods: {
test: function () {
app.title = "Hello, Vue.js"
}
}
})
</script>
</body>
</html>
使用v-if v-for 以及v-on:click的语法糖@click
<!DOCTYPE html>
<html lang="zh">
<meta charset="utf-8">
<title>Hello, Vue.js</title>
<style>
body {
padding: 0px;
margin: 0px;
}
.title {
background-color: green;
font-size: 20px;
padding: 20px 0px;
}
a {
text-decoration: none;
color: pink;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>
<div id="app">
<div>请选择你喜欢的语言：</div>
<div class="title">
<li v-for="title in titles"><a @click="showClicked" href="javascript: ;;">{{ title }}</a></li>
</div>
<div v-if="selected">
<span>你最喜欢的语言是{{ best }}</span>
</div>
</div>
<script>
alert("Hello, Vue.js")
app = new Vue({
el: "#app",
data: {
titles: ["C", "Java", "Kotlin", "JavaScript", "Vue.js"],
selected: false,
best: null,
},
methods: {
showClicked: function (event) {
var best = event.path[0].innerText
alert(`你选择了${best}语言`)
app.selected = true
app.best = best
}
}
})
</script>
</body>
</html>
基础指令一览
v-if v-show: Display相关
v-for: 逻辑相关
v-model :,v-bind: 数据绑定相关
@,v-on: 事件相关
