vue是构架用户界面的渐进式框架,采用自底向上逐层应用开发。他的核心理念是数据驱动视图,组件化开发。
库和框架的区别
首先了解一下库和框架的区别,框架例如vue.,是一套完整的解决方案,对项目侵入性比较大,项目如果需要更换框架,需要重新架构整个项目。而库只是提供一个小功能,例如jQuery,对项目侵入性比较小,如果这个库满足不了使用,可以很容易的切换到其他库。
MVC和MVVM的区别
这个一点很重要,MAC是一种后端分层开发概念,MVVM是前端视图层的概念。
在MAC中,v代表view视图层,作用发送数据,展示数据
c代表controller调度层,作用响应数据,返回数据,
m代表model模型层,作用处理数据,与数据库交互
在MVVM中,v代表view视图层,作用展示数据,
vm代表view-model视图模型层,作用连接视图层和模型层,承上启下,
m代表model模型层,作用逻辑处理
vue的基础语法
//创建vue实例
let vm=new Vue({
el:'#app', //控制区域,类似于选择器的写法
data:{
msg:"这是一个变量"
}, //存放数据使用,就是变量
motheds:{
fn(){
console.log('测试')
}
} //存放方法
})
元素绑定 v-bind 和v-on
v-bind是和元素属性绑定的,绑定后,这个属性就可以使用data里的变量了。v-on是绑定事件的
<div id="app">
<!-- 元素属性绑定 v-bind -->
<img v-bind:src="src" alt="">
<!-- 简写 v-bind:简写成一个冒号-->
<img :src="" alt="">
<!-- 事件绑定v-on:事件类型-->
<button v-on:click="fn">按钮</button>
<!-- 简写 v-on: 简写成@ -->
<button @click="fn">按钮</button>
</div>
数据双向绑定 v-model
在不适用数据双向绑定的情况下,数据只能展示,并不能拿到在页面上更改后的值,例如input框的值,只能通过变量设置,但不能获取input框上新的值,新的值不能传回data区的变量,双向绑定后,就可以互相影响了
它的原理:数据劫持结合发布者—订阅者模式的方式来实现的,通过
Object。defineProperty()来劫持各个属性的setter,getter,在数据发生变动时,告诉订阅者是否要更新,执行对应的更新函数,而更新视图。
<input type="text " v-model:value="msg">
<input type="text " v-modele="value"> //可以简写成这样
事件修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue-2.4.0.js"></script>
</head>
<style>
.one{
width: 500px;
height: 500px;
background-color: aliceblue;
}
.two{
width: 400px;
height: 400px;
background-color: red;
}
.three{
width: 300px;
height: 300px;
background-color: yellow;
}
.four{
width: 200px;
height: 200px;
background-color: orange;
}
</style>
<body>
<div id="app">
<!-- .stop 阻止冒泡,阻止事件继续向外传播 -->
<!-- <div class="one" @click.stop="two"></div> -->
<!-- .capture 添加事件捕获 -->
<!-- .self 只有当事件在元素本身触发时调用 -->
<!-- .once 事件只会触发一次 -->
<!-- .prevent 阻止默认事件 -->
<div class="one" @click="one">
<div class="two" @click="two">
<div class="three" @click.capture="three">
<div class="four" @click="four">
</div>
</div>
</div>
</div>
</div>
</body>
<script>
// 创建vue实例
let vm=new Vue({
//控制区域
el:'#app',
//存放数据
data:{
msg:"111111",
age:33
},
//存放方法
methods:{
one(){
console.log('one');
},
two(){
console.log('two');
},
three(){
console.log('three');
},
four(){
console.log('four');
},
}
})
</script>
</html>