Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。它还拥有类似 Angular 的双向数据绑定,以及类似 React 的虚拟DOM。
Vue的特点:(1) 简洁 (2) 轻量 (3)快速 (4) 数据驱动 (5) 模块友好 (6) 组件化 (7)json格式数据
使用Vue的理由:(1)vue的代码编写风格简洁,并且通俗易懂。(2)Vue虽然是一个比较轻量级的框架,简单轻量的同时还非常的人性化,其提供的API也是非常的容易理解,同时也提供了一些很便捷的指令和属性。(3)Vue的成产版本(即min版)源码仅为72.9kb,官网称gzip压缩后只有25.11kb,相比Angular的144kb缩小了一半。(4)构建大型应用:模块化组件化(5)处理一些复杂的交互行为,省去了用js实现的大量脚本。
与angular.js和react.js的对比:Vue.js 更加灵活,(比起 Angular)更少专制,它能然你按照自己想要的方式构建应用,而非凡事非得 Angular 如此如此。它只不过是一层界面而已,因此你可以拿它作为页面中一个轻量的功能来使用,而不是一个完整的 SPA。(与react类似) 使用了一个虚拟 DOM,提供了响应式的,并且可组合式的视图组件。保持对核心库的专注, 而像路由和全局状态管理这样的关注点则交给附带的库来处理。
属性与方法
- el: 数据的根节点,模板的挂载点
- data:数据支持,一般 当前组件渲染所需数据都在data中实现,data必须是一个对象,另一个是
computed
- methods:处理数据交互的方法
- computed:计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。`计算属性的结果。
- props: 可以是数组或对象,用于接收来自父组件的数据。props 可以是简单的数组,或者使用对象作为替代,对象允许配置高级选项,如类型检测、自定义校验和设置默认值。
注意:props中的参数如果想用驼峰式写法,在父组件中以分割线分割
- watch: 一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性。123456789101112131415161718192021222324var vm = new Vue({el: '#id',data: { a : 1 },methods: {fun1: function(){},fun2: function(){},....},computed: {fun1: function(){return this.a*2},....},props: ['a','b','c'],watch:{a: {handler: function(val,oldVal){....},deep: true, //深度监控}}})
vue的指令
- v-text:更新元素的 textContent。如果要更新部分的 textContent ,需要使用
插值。
- v-html:更新元素的 innerHTML 。
注意:内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。如果试图使用 v-html 组合模板,可以重新考虑是否通过使用组件来替代。
- v-show:根据表达式之真假值,切换元素的 display CSS 属性。
- v-if:根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 ,将提出它的内容作为条件块。
v-else和v-else-if与v-if一致
v-for:基于源数据多次渲染元素或模板块。item是别名
123<div v-for="item in items">{{ item.text }}</div>v-on:绑定事件监听器。
- v-bind:被用于绑定 DOM 属性。
- v-model:双向绑定。
- v-pre:跳过这个元素和它的子元素的编译过程。
- v-cloak:这个指令保持在元素上直到关联实例结束编译。
vue的生命周期
- beforeCreate: 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。
- created: 实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
- beforeMount: 在挂载开始之前被调用:相关的 render 函数首次被调用。
- mounted: el 被新创建的
vm.$el
替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时vm.$el
也在文档内。 - beforeUpdate: 数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。
- uppdate:由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
- activated:keep-alive 组件激活时调用。
- deactived:keep-alive 组件停用时调用。
- beforeDestory:实例销毁之前调用。在这一步,实例仍然完全可用。
- destory:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
构建vue组件之前需要了解的技术
vue-cli:Vue的脚手架工具,用于自动生成Vue项目的目录及文件。
vue-router: Vue提供的前端路由工具,利用其我们实现页面的路由控制,局部刷新及按需加载,构建单页应用,实现前后端分离。
vuex:Vue提供的状态管理工具,用于同一管理我们项目中各种数据的交互和重用,存储我们需要用到数据对象。
es6:Javascript的新版本,ECMAScript6的简称。利用ES6我们可以简化我们的JS代码,同时利用其提供的强大功能来快速实现JS逻辑。
npm:node.js的包管理工具,用于同一管理我们前端项目中需要用到的包、插件、工具、命令等,便于开发和维护。
webpack:一款强大的文件打包工具,可以将我们的前端项目文件同一打包压缩至js中,并且可以通过vue-loader等加载器现语法转化与加载。
Babel:一款将ES6代码转化为浏览器兼容的ES5代码的插件。
构建vue组件(vue-cli构建)
安装
12345678# 全局安装 vue-cli$ npm install -g vue-cli# 创建一个基于 webpack 模板的新项目$ vue init webpack my-project# 安装依赖$ cd my-project$ npm install$ npm run dev创建组件(以下为父子组件通信实例)
以自动构建的文件路径为例:在components
文件夹下新建组件ch-list
,在文件夹中新建一个index.js(组件调用的入口)和list.vue(布局文件),其中porps选项为从父组件获取的数据。注*:在刚刚构建好的vue项目中,我们会发现一个App.vue和Hello.vue的文件,像这样的以.vue后缀结尾的文件是vue的单文件组件。单文件组件包含了一个功能或模块的html、js及css。在.vue文件中,可以在template标签中写html,在script标签中写js,在style标签中写css。这样一个功能或模块就是一个.vue组件,对于组件公用和后期的维护也非常便捷。
1234567/*index.js*/import Vue from 'vue'import List from './components/ch-list'new Vue({el: '#app',components: { List }})
|
|
- 使用组件:直接在html页面中引用创建好的组件
<list>
,其中:inputdata
,list-item-name1
都是作为数据与子组件进行通信的,加:
的数据会解析为一个对象,否则会以字符串的形式传递给子组件。12345678910111213<html><head><meta charset="utf-8"><title>vue2-demo</title><link type="text/css" rel="stylesheet" href="https://t2.chei.com.cn/common/ch/iconfont.css" /></head><body><div id="app"><list :inputdata='[{"ksname":"美术学类","mfz":1304},{"ksname":"美术学","mfz":130401},{"ksname":"绘画","mfz":130402},{"ksname":"雕塑","mfz":130403},{"ksname":"摄影","mfz":130404}]' list-item-name1="名称" list-item-name2="分值"></list></div></body></html>