Vue.js快速进门
1、简介
什么是Vue.js
Vue 是一套用于构建用户界面的渐进式框架，渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等特性。
Vue 的核心库只关注视图层，易于上手，还便于与第三方库（如：vue-router：跳转，vue-resource：通信，vuex：管理）或既有项目整合。
为什么使用Vue.js
- 吸取了Angular（模块化）和React（虚拟Dom：就是把Dom操作放到内存中执行）的长处，并拥有自己独特的功能，如：计算属性
2、前端知识体系
前端三要素
- HTML（结构）
- CSS（表现）
- JavaScript（行为）
CSS预处理器
用一种专门的编程语言，进行Web页面样式设计，再通过编译器转化为正常的CSS文件，以供项目使用
LESS
- 基于Node.js，通过客户端处理，使用简单
3、MVVM模式
MVVM是一种软件架构模式，源自于经典的MVC模式，它的方式是以事件驱动编程。
它的核心就是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用。
ViewModel封装出来的数据模型包括视图的状态和行为两部分
视图的状态和行为都封装在了ViewModel里面，这样的封装使得ViewModel可以完整的去描述View层
Vue完全解耦了View层和Model层，这个解耦至关重要，它是前后端分离方案实施的重要一环。
Vue.js就是一个MVVM的实现者，它的核心就是实现了DOM监听与数据绑定
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.jsdelivr.net/npm/[email protected]">script>
<script>
var vm;
window.onload = function () {
vm = new Vue({
el: "#app",
//Model：数据
data: {
message: "qwe,vue!"
}
})
}
script>
head>
<body>
<div id="app">
{
{message}}
div>
这里可以在控制台直接输入vm.message来修改值，中间是可以省略data的，在这个操作中，并没有主动操作DOM，页面的内容就产生了变化，这就是借助了Vue的数据绑定功能实现的，MVVM模式要求ViewModel层使用观察者模式来实现数据的监听与绑定，以做到数据与视图的快速响应。
4、基本语法
v-bind
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind
v-bind简写:
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.jsdelivr.net/npm/[email protected]">script>
<script>
var vm;
window.onload = function () {
vm = new Vue({
el: "#app",
//Model：数据
data: {
message: "qwe,vue!",
}
})
}
script>
head>
<body>
<div id="app">
<span v-bind:title="message">测试title悬停事件span>
div>
body>
html>
v-bind被称为指令。指令带有前缀v-，以表示他们是Vue提供的特殊特性，这里的意思就是说，将这个元素节点的title特性和Vue实例的message属性保持一致
v-if、v-elsif、v-else
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.jsdelivr.net/npm/[email protected]">script>
<script>
var vm;
window.onload = function () {
vm = new Vue({
el: "#app",
//Model：数据
data: {
flag: true,
type: "A"
}
})
}
script>
head>
<body>
<div id="app">
<span v-if="flag">真span>
<span v-else>假span>
<span v-if="type==='A'">AAAspan>
<span v-else-if="type==='B'">BBBspan>
<span v-else>CCCspan>
div>
body>
html>
v-for
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.jsdelivr.net/npm/[email protected]">script>
<script>
var vm;
window.onload = function () {
vm = new Vue({
el: "#app",
//Model：数据
data: {
items:[
{
message:'bootstrap'},
{
message:'vue'},
]
}
})
}
script>
head>
<body>
<div id="app">
<li v-for="item in items">{
{item.message}}li>
<hr/>
<li v-for="(item, index) in items">{
{index}}-{
{item.message}}li>
div>
body>
html>
5、绑定事件
v-on简写@
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.jsdelivr.net/npm/[email protected]">script>
<script>
var vm;
window.onload = function () {
vm = new Vue({
el: "#app",
data: {
message:"methods test"
},
//方法必须定义在Vue的methods对象中
methods:{
show:function () {
alert(this.message)
}
}
})
}
script>
head>
<body>
<div id="app">
<button v-on:click="show">click mebutton>
div>
body>
html>
6、双向数据绑定
Vue.js是一个MVVM框架，既数据双向绑定，既当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化，这也算是Vue.js的精髓了。
可以用v-model指令在表单、