Vue.js起手式+Vue小作品实战

JavaScript025

Vue.js起手式+Vue小作品实战,第1张

Vue.js(读音 /vjuː/, 类似于 view ) 是一套构建用户界面的 渐进式框架 。与其他重量级框架不同的是Vue 的核心库只关注视图层。

Vue.js 的目标是通过尽可能简单的 API 实现 响应的数据绑定 组合的视图组件

Vue.js是一种MVVM框架,其中html是view层,js是model层,通过vue.js(使用v-model这个指令)完成中间的底层逻辑,实现绑定的效果。改变其中的任何一层,另外一层都会改变;

解读:

【demo】

【TIP】

Vue实例所代理data对象上的属性只有在实例创建的同时进行初始化才具有响应式更新,若在实例创建之后添加是不会触发视图更新的;

解读:

解读:

【demo】

【demo】

解读:

解读:

【demo】

解读:

【demo】

本章涉及Vue的基础的数据绑定操作,内容包括:

解读:

解读:

Vue实例的 computed 对象默认只有getter,如果你要设置数据,可以提供一个setter,即设置器;

解读:

【TIP】无论是哪种方式,前提都是css中的class要先设定

【demo】

解读:

【demo】

前面简单介绍了一下 v-if 、 v-for 和 v-on 指令,下面的部分将详细介绍以上3个指令;

解读:

【TIP】 v-if和v-show的区别

【demo】

解读:

【demo】

【demo】

解读:

解读:

【demo】

解读:

解读:

像这些包含固定样式的元素 <ul>, <ol>, <table>, <select>,

自定义组件中使用这些受限制的元素时会导致渲染失败;

通的方案是使用特殊的 is属性:

解读:

解读:

【demo】

解读:

内容分发 指的是混合父组件的内容与子组件自己的模板;

解读:

解读:

【TIP】关于组件的命名规范

【demo】

【TIP】

这个$http请求和jquery的ajax还是有点区别,这里的post的data默认不是以form data的形式,而是request payload。解决起来也很简单:在vue实例中添加headers字段:

【Hello Vue.js】

上面的Vue小作品是小羊仿照 SegmentFault 的一篇技博的练手之作,建议各位对照源码亲手练习一次,以便初步熟悉Vue的使用;

参考资料:

可以,但很少用。

Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的

渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。

Vue

的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue

完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API

实现响应的数据绑定和组合的视图组件。

Vue.js是一个MVVM模式的框架,如果读者有angular经验,一定能够很快入门Vue的

vue.js的特点:

易用: 已经会了HTML,CSS,JavaScript?即刻阅读指南即可开始构建应用。

灵活: 简单小巧的核心,渐进式技术栈,足以应付任何规模的应用。

高效: 16kb min+gzip 的运行大小,超快虚拟 DOM ,最省心的优化。

二、环境搭建

vue推荐开发环境:

Node.js: javascript运行环境(runtime),不同系统直接运行各种编程语言。

npm: Nodejs下的包管理器。

webpack: 它主要的用途是通过 CommonJS 的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。

vue-cli: 用户生成Vue工程模板。

vue-devtools 是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率。接下来我们就介绍一下vue-devtools的安装。

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供:

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性,无需 eject。

Vue Loader 是一个webpack的 loader,它允许你以一种名为 单文件组件 (SFCs) 的格式撰写 Vue 组件。

Vue Loader 还提供了很多酷炫的特性:

简而言之,webpack 和 Vue Loader 的结合为你提供了一个现代、灵活且极其强大的前端工作流,来帮助撰写 Vue.js 应用。