Vue学习笔记（一）：基础知识
Vue介绍
简介：
Vue.js目前最火的的一个前端框架，三大主流前端框架之一。其余两个是Angular和React。Vue.js是一套构建用户界面的框架（一套完整的解决方案，对项目侵入性大，中途需要跟换框架则需要重构整个项目），只关注视图层，易上手，有配套的第三方类库。- 提高开发效率，帮助减少不必要的
dom操作；双向数据绑定，通过框架提供的指令，前端只需要关注业务逻辑，不再关心dom如何渲染。
MVVM模式介绍:
MVVM是一种软件架构设计模式，由微软WPF和Silverlight的架构师Ken Cooper和Ted Peters开发，是一种简化用户界面的事件驱动编程方式。MVVM源于经典的MVC（Model - View - Controller）模式，MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更加容易管理和使用。其作用如下：
- 向上与视图层进行双向数据绑定
- 向下与
Model层通过接口请求进行数据交互
为什么使用MVVM？
MVVM和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大好处：
- 低耦合，视图（
View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。 - 可复用，可以把一些试图逻辑放在一个
ViewModel里面，让很多View重用这段视图逻辑 - 独立开发，开发人员可以专注于业务逻辑和数据的开发，设计人员可以专注于页面设计
- 可测试，界面素来是比较难于测试的，而现在测试可以针对
ViewModel来写。
基础语法：
导入Vue模块（在线CDN版本）：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
{
{message}}
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
var vm = new Vue({
el:"#app",
data:{
message:"hello,vue!"
}
})
script>
body>
html>
v-if语句
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<h1 v-if="type==='A'">Ah1>
<h1 v-else-if="type==='B'" >Bh1>
<h1 v-else-if="type==='C'" >Ch1>
<h1 v-else>Noh1>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
var vm = new Vue({
el: "#app",
data: {
type:'A'
}
});
script>
body>
html>
v-for语句
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<li v-for="item in items">
{
{item.message}}
li>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
var vm = new Vue({
el: "#app",
data:{
items:[
{
message: "狂神说java"},
{
message: "狂神说前端"},
{
message: "狂神运维"}
]
}
});
script>
body>
html>
绑定事件
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<button v-on:click="sayHi">click mebutton>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
var vm = new Vue({
el: "#app",
data:{
message:"狂神说java"
},
methods:{
//方法必须定义在vue的method对象中
sayHi:function (event){
alert(this.message)
}
}
});
script>
body>
html>
表单双绑
什么是双向数据绑定？
Vue.js是一个MVVM框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化，这也算是Vue.js的精髓之处了。数据的双向绑定一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定。
为什么要实现数据的双向绑定？
在Vue.js中，如果使用Vuex，可以进行数据的单向绑定。对于我们处理表单，Vue.js的双向绑定用起来就特别舒服了。即两者并不互斥，在全局性数据流使用单项绑定，方便跟踪；局部性数据流使用双向，简单易操作。
在表单中使用双向数据绑定
你可以使用v-model指令在表单、