VUE介绍
一套用于构建用户界面的渐进式框架
什么是渐进式
https://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&mid=2247485737&idx=1&sn=14fe8a5c72aaa98c11bf6fc57ae1b6c0&source=41#wechat_redirect
- 声明式渲染
- 组件系统
- 客户端路由(单页应用 single page application SPA)
- 状态管理
- 构建工具
声明式渲染和命令式渲染
声明式:只需要声明在那里,程序会帮我们处理底层逻辑(数组的map方法)
命令式:需要用具体的代码表达在那里,要做什么,怎么实现(for 循环数组)
vue声明式渲染:只要初始化vue实例,数据就可以绑定到DOM模板上。
VUE框架的特点
构建用户界面,只关注View层
简单易学,简洁,轻量、快速
渐进式框架
认识MVC开发模式
M----Model----模型----数据(建模:把人的信息抽选出来)
V----View-----视图----表现层(HTML/CSS 用户的入口)
C----Controller—控制器----业务逻辑
MVC开发模式的缺点
1、M和V的耦合度高
2、C特别臃肿
变种的开发模式MVP
P:presenter(主持人)
优点:如果M或V发生了变化,只要修改P就可以了。M和V没有耦合了
缺点:P会变得特别特别的臃肿
变种的开发模式MVVM
VM:viewmodel 视图层+模型层,两个融合
优点: M和V没有耦合了,部分的业务逻辑分给了V,不会特别臃肿
VUE的两个核心点
- 响应式的数据绑定
当数据发生变化,视图会自动更新
忘记操作DOM这回事,专注于数据的操作 - 可组合的视图组件
把视图按照功能划分成若干个组件,组件可以一级一级的组合成应用,形成倒置
的组件树。
使用组件的优点:便于维护、重用性好、便于测试
vue起步
引包
启动 new Vue(options);
配置options(选项)对象:{el:发生行为的目的地, template:装载数据的模板}
静态数据的装载
new Vue({
el:"#app",
template:'<div><h1>hello world</h1></div>'
})
动态数据的装载
new Vue({
el:"#app",
template:'<div><h1>hello world{{text}}</h1></div>',
data:function(){
return {
text:"大家好"
}
}
})
插值表达式{{ 表达式 }}“Mustache”语法(胡子语法)
{{ a?b:c }} {{ {name:’web’,sex:’man’} }}
vue中的指令
概念:为了更方便的控制页面中的模板和数据,vue提供的一些操作叫指令。
所有指令都是以v-xxx开头的属性,就像是在html中添加自定义属性一样。
指令其实是vue封装好操作DOM行为而设置的一些暗号。
常用指令
v-text 就是innerText
v-html 就是innerHTML
v-if 值为true 元素插入 值false 元素移除
v-else-if
v-else
v-show 值为true 元素显示 值false 元素 display: none;
new Vue({
el:"#app",
template:`
<!--必须只能放一个根节点-->
<div>
<span v-text="text"></span>
<span v-html="html"></span>
<button v-if="isExit">测试v-if</button>
<!--以下的3个指令必须是相邻的元素-->
<button v-if=" num==1 ">测试v-if</button>
<button v-else-if=" num==2 ">测试v-if-else</button>
<button v-else>测试v-else</button>
<hr>
<button v-show="isShow">测试v-show</button>
</div>
`,
data:function(){
return {
text:"大家好",
html:"<strong>大家好</strong>",
isExit:true,
num:1,
isShow:false
}
}
})
给元素属性绑定值v-bind
两种写法
1、 v-bind:属性=”变量”
2、 :属性=”变量”
new Vue({
el:"#app",
template:`
<!--必须只能放一个根节点-->
<div>
<input type="text" v-bind:value="myValue" :file=" 'XXX' ">
</div>
`,
data:function(){
return {
myValue:"hello"
}
}
})
给元素绑定事件v-on
两种写法
1、 v-on:事件属性=”表达式 || 函数名”
2、 @事件属性=”表达式 || 函数名”
new Vue({
el:"#app",
template:`
<div>
<input type="text" v-bind:value="myValue" :file=" 'XXX' ">
<button v-on:click="myValue='abc'">点击改变myValue的值</button>
<button @click=" myValue='123' ">点击改变myValue的值</button>
</div>
`,
data:function(){
return {
myValue:"hello"
}
}
})
这里是通过事件修改vue中的数据,再通过v-bind实现单向数据响应
v-model实现双向数据响应
<div id="app">
<input type="text" v-model="msg">
<p>{{msg}}</p>
</div>
<script>
var message="hello world";
var vm=new Vue({
el:"#app",
data:{//数据对象上的属性会成为 实例对象上的属性
msg:message
}
})
console.log(vm);
/*
在控制台中输入 vm.msg="abc" 也能修改
*/
</script>
特别提醒:v-model只能给具有value属性的元素添加
new Vue({
el:"#app",
template:`
<div>
<input type="text" v-model="myValue">
<span v-show=" myValue=='' ">用户名不能为空</span>
</div>
`,
data:function(){
return {
myValue:"请输入用户名"
}
}
})
v-for输出数组和对象数据到页面
语法形式:
v-for=”item in arr”
v-for=”(item,index) in arr”
v-for=”(value,key,index) in obj”
new Vue({
el:"#app",
template:`
<div>
<ul>
<li v-for="item in stus" :class="item.myclass">{{ item.name }}</li>
</ul>
<ul>
<li v-for="(value,key,index) in fruit" :class="index%2==0?'bga':'bgl'">{{ key+':'+value }}</li>
</ul>
</div>
`,
data:function(){
return {
stus:[{name:'张三',myclass:'bga'},{name:'李四',myclass:'bgl'},{name:'王五',myclass:'bga'},],
fruit:{'apple':'10kg','banana':'30kg','orange':'50kg'}
}
}
})
指令小结
操纵文本节点:v-text v-html
操纵属性节点:v-bind:属性 或 :属性
操纵事件属性:v-on:事件属性 或 @事件属性
操纵元素:v-if v-else-if v-else(插入移除元素) v-show(显示隐藏元素)
操纵数据:v-mode(双向数据流 元素要有value属性) v-for(多数据的循环展示)