3月
04

vue_library

vue图书馆管理实现视频学习笔记

vue图书馆管理学习笔记

vue基础

vue.js是什么？

vue（是法语），同view（英语）

Vue.js是一套构建用户界面（view）的MVVM框架。Vue.js的核心库只关注视图层，并且非常容易学习，非常容易与其他库或已有的项目结合。

vue.js的目的

Vue.js的产生核心是为了解决如下三个问题：

1.解决数据绑定的问题：

2.vue.js框架产生的主要目的是为了开发大型单页面应用（SPA：Sigla Page Application）

angular.js对PC端良好，移动端一般。而vue支持移动端，也支持PC端

3.支持组件化：也就是将页面封装成多个组件，采用积木式编程。页面的复用度达到最高

vue.js的特性

1、MVVM模式

M: model 业务模型，用处：处理数据，提供数据
V：view  用户界面、用户视图
 MV：业务模型model中的数据发生改变的时候，用户视图view也会改变。
 VM：用户视图view改变的时候，业务模型model中的数据发生改变（也可不改变）

2、组件化

3、指令系统

4、Vue2.0开始支持虚拟DOM（vue1.0操作真实的DOM）

虚拟DOM可以提升页面的刷新速度。

vue入门

引入vue文件的方式：内嵌、外部引用

使用步骤：

在页面中引入vue文件
Vue.js提供了一个Vue，使用Vue创建一个对象：
1
2
3
4
5
new Vue({
el:'',
data:{},//data核心作用是存放显示在页面中的数据，需要是一个对象
methods:{}
});
el:明Vue.js管理的边界
data:核心作用是存放显示在页面中的数据，需要是一个对象

第三步：在用户界面，通过“两个大括号”形式将data中的键值显示在页面；“两个大括号”代码中的data的key值，而在页面中显示的是data的value。

Vue.js对获取data与页面中“两个大括号”的产生一个映射关系。

我们要实现前后台交互，只要将后台得到的数据，放到data中即可。页面就会自动绑定，这样就实现model->view的映射。

vue指令

指令指的是以v-开头的自定义属性。每个不同的属性有不同的功能和意义。

v-text

<!-- <h1 id="demo">今年是{{year}}年{{month}}月{{date}}日</h1> -->
<h1 id="demo" v-text="'今年是'+year+'年'+month+'月'+date+'日'"></h1>
<script type="text/javascript">
	new Vue({
		el:'#demo',
		data:{
			year:new Date().getFullYear(),
			month:new Date().getMonth()+1,
			date:new Date().getDate()
		}
	});
</script>

v-html

作用：操作元素的HTML元素

v-bind 操作HTML的标签元素属性，如img标签的src、alt、title；a标签的href属性

语法：

<div id="aa">
  <a v-bind:href="hrefValue"></a>
</div>
<script>
	new Vue({
      el:'#aa',
      data:{
        hrefValue:'http://www.baidu.com'
      }
	});
</script>

vue控制css

style

vue控制js

在vue的模板中，可以使用简单的js

vue中写js控制显示和隐藏 v-show

通过判断是否显示，如果值为true，则显示，为false，则隐藏

v-show=”判断表达式”

语法：

shangrila-xiu