Vue 基础总结
开发工程发展史
1.前后端不分离
2.前后端工程分离
3.前后端工程数据分离
什么是Vue
Vue是一套用于构建用户界面的渐进式框架,Vue只关注视图层,Vue通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
为什么要使用Vue
随着前端技术的不断发展,前端开发能够处理的业务越来越多,网页也变得越来越强大和动态化,这些进步都离不开JavaScript。在目前的开发中,已经把很多服务端的代码放到了浏览器中来执行,这就产生了成千上万行的JavaScript代码,他们连接着各式各样的HTML和CSS文件,但是缺乏正规的组织形式。这也是为什么越来越多的前端开发者使用JavaScript框架的原因,目前比较流行的前端框架有Angular、Reac、Vue等。
Vue是一款友好的、多用途且高性能的JavaScript框架,它能够帮助你创建可维护性和可测试性更强的代码库。Vue是渐进式的JavaScript框架,也就是说,如果你已经有了现成的服务端应用,你可以将Vue作为该应用的一部分嵌入其中,带来更加丰富的交互体验。或者如果你希望将更多业务逻辑放到前端来实现,那么Vue的核心库及其生态系统也可以满足你的各式需求。
和其他框架一样,Vue允许你将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML、CSS、JavaScript,以用来渲染网页中相应的地方。如果我们构建了一个大型的应用,可能需要将东西分割成为各自的组件和文件,使用Vue的命令行工具,使快速初始化一个真实的工程变得非常简单。
Vue基础语法
1.Vue实例对象
每个Vue应用都是通过用Vue函数创建一个新的Vue实例开始的
var v = new Vue({//选项})
<body>
<div id="div">
{{user_name}}
</div>
</body>
<script src="./vue.js"></script>
<script>
var app = new Vue({
el:'#div', // 设置要操作的元素
// 要替换的额数据
data:{
user_name:'你好'
}
})
// 打印Vue实例对象
console.log(app);
</script>
2.模板语法-插值
在前面代码中,使用{{}}的形式在html中获取实例对象中data的属性值,这种使用{{}}获取值的方式,叫做插值或者插值表达式。
3.模板语法-指令
指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM;参考 手册 、 API
<body>
<div id="div">
<p v-if="hello">你好</p>
</div>
</body>
<script>
var app = new Vue({
el:'#div'
data:{
hello:false
}
})
</script>
这里,v-if
指令将根据表达式 hello
的值的真假来插入/移除 <p>
元素。
3.0 v-if和v-show
相同点:v-if和v-show都可以动态控制dom元素显示和隐藏
不同点:1.v-if是将dom元素整个添加或删除,v-show是添加dom元素属性display控制dom元素的显示或隐藏,dom元素还在。
2.v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的时间监听和子组件,v-show只是简单的基于css切换。
3.v-if是惰性的,如果初始条件为假则什么也不做,只有在条件为真的时候才开始局部编译,v-show是在任何条件下都会被编译,然后被缓存而且dom元素保留。
4.v-if有更高的切换消耗,v-show有更高的初始渲染消耗。
5.v-if适用于运营条件不大可能改变,v-show适用于频繁切换。
3.1 v-text / v-html 文本
v-text:
v-text和差值表达式的区别
- v-text 标签的指令更新整个标签中的内容(替换整个标签包括标签自身)
- 差值表达式,可以更新标签中局部的内容
v-html:
- 可以渲染内容中的HTML标签
- 尽量避免使用,否则会带来危险(XSS攻击 跨站脚本攻击)
3.2 v-bind 属性绑定
可以绑定标签上的任何属性。
绑定图片为例
<img id=“app” v-bind:src="src" />
<script>
var vm = new Vue({
el: '#app',
data: {
src: '1.jpg'
}
});
</script>
3.3 v-model 双向数据绑定
单向数据绑定
我们通过 vue 对象修改数据可以直接影响到 DOM 元素,但是,如果直接修改 DOM 元素,却不会影响到 vue 对象的数据;我们把这种现象称为***单向数据绑定*** ;
双向数据绑定
通过 v-model 指令展示表单数据,此时就完成了 双向数据绑定 ;
不管 DOM 元素还是 vue 对象,数据的改变都会影响到另一个;
3.4 v-on 绑定事件监听
3.5 v-if / v-else / v-else-if 条件判断
3.6 v-for循环
3.7 v-cloak
3.8 v-once
MVVM设计思想
MVC设计思想:
M: model 数据模型层 提供数据
V: Views 视图层 渲染数据
C: controller 控制层 调用数据渲染视图
MVVM设计思想:
M: model 数据模型层 提供数据
V: Views 视图层 渲染数据
VM:ViewsModel 视图模型层 调用数据渲染视图
由数据来驱动视图(不需要过多考虑dom操作,把重心放在VM)