专栏首页熊二哥Vue快速入门

Vue快速入门

终于进入国内当前最火的前端框架Vue.js的学习了,最近周边的哥们也开始用该框架做线上项目,闲暇之余,做个快速的了解,重在基础部分。

基础概念

目前在国内使用vue框架比较出名的团队包括饿了么、滴滴等,总的来说,vue框架目前有一个比较不错的发展,其主要聚焦在视图层,非常轻量、支持数据绑定、指令。安装使用非常简单,即可以使用<script>标签应用js下载地址,也可以使用npm i vue安装。常见的参考资料包括Vue官网基础demo博文等。

  • 数据绑定:包括{{}}{{ true? 1 : 0}},{{example | toUpperCase}}过滤器,<div v-if="show">VUE</div>指令。
  • 指令:常见指令包括v-if, v-show, v-else, , v-text等同于{{}}, v-htmlv-ref, v-el, v-pre, v-cloak。此外还可以添加自定义指令,例如Vue.directive('custom-direct', {bind:function(){}, update:function(){}})v-model创建双向数据绑定,可以添加number, lazy, debounce属性。 v-for循环,支持filterBy、orderBy。 v-bind用于响应的html特性,将一个或多个attribute动态绑定到表达式,比如给标价添加id, data-xxx。 v-on绑定事件监听器,之后可以添加参数,也可以填加修饰符,比如<button v-on:click='doThis'>或<button @client='doThis'>
  • 计算属性:计算属性会在其依赖属性变化时,自动计算更新,与之相关的DOM部分也会更新。需要注意的是,计算属性默认是缓存的,详情参加之后基础示例一节。
  • 过滤器:其本质就是函数,可以在指令中用类似管道的方法处理数据,例如字母操作capitalize&uppercase&lowercase; json过滤器;限制过滤器,用在v-for中, limitBy, filterBy, orderBy; currency过滤器;debounce过滤器;自定义过滤器Vue.filter('test', function(){}),支持双向过滤,如{read:function(){}, write:xxx}
  • Class与Style的绑定<div id='xxx', class='testA' v-bind:class="{'cus-blue':isOk}">
  • 动画<div v-if="show" transaction="expand">,之后在CSS文件中添加.expand-transaction{xxx}, .expend-enter, .expand-leave{xxx}即可。
  • Method:可以通过methods: {methodA:function(){}}的方式将所有相关方法放在一个ViewModel中,此外可以通过添加$event对象来访问原生事件对象,其常见修饰符包括.prevent, .stop, .capture, .self,键盘的事件如@keyup.enter
  • Vue实例属性与方法:实例属性包括组件树访问,$parent, $root, $children, $refs;DOM访问包括$el, $els;数据访问$data, $options。实例方法包括DOM方法,$appendTo(), $before(), $after(), $remove, $nextTick;Event方法包括$on(), $once(), $emit(), $dispatch(), $broadcase(), $off()等。

基础示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>vue demo</title>
</head>
<body>
    <div id="didi-navigator">
        <ul>
            <li v-for="tab in tabs">
                {{tab.text}}
            </li>
        </ul>
        <p>{{message}}</p>
        <input type="text" v-model="message" />
    </div>
    <script src="vue.min.js"></script>
    <script type="text/javascript">
    new Vue({
        el: '#didi-navigator',
        data: {
            tabs: [{
                text: '火车'
            }, {
                text: '飞机'
            }, {
                text: '汽车'
            }],
            student: {
                name: 'xionger',
                desc: '多帅哟',
                age:28,
                workage:7
            },
            message:''
        },
        computed:{
            cache:false,
            totalAge:function(){return this.age+this.workage}
        }
    });
    </script>
</body>
</html>

进阶概念

  • 组件:Vue推荐把组件代码按照template, style, script的方式拆分,放置到对应.vue文件中。组件可以理解为预先定义好行为的ViewModel类,一个组件可以定义很多选项,但最核心的选项包括模板template声明了数据和最终展现给用户的DOM之间的映射关系;初始数据data接受的外部参数props,默认单项绑定,可以显示声明为双向绑定;方法methods操作数据,可以通过v-on将用户输入时间和组件方法进行绑定;生命周期钩子lifecycle hools,一个组件会触发多个生命周期钩子,比如create,attached,destroyed等,相对于传统的MVC,可以理解为Controller的逻辑被分散到这些钩子函数中。
  • 路由与视图:通过官方插件vue-router支持路由功能,支持开发大型单页应用程序,其支持嵌套路由、组件惰性加载、视图切换动画等功能,通过bower或npm安装,npm i vue-router -g。 <div id="app"> <p> <a v-link="{path:'/foo'}">Go to Foo</a> <a v-link="{path:'/bar'}">Go to Bar</a> </p> <router-view></router-view> </div> <script src="vue.min.js"></script> <script src="vue-router.min.js"></script> <script type="text/javascript"> var Vue = require('vue'); var VueRouter = require('vue-router'); //Vue.use(VueRouter) var Foo = Vue.extend({template:'<p>This is foo!</p>'}); var App = Vue.extend({}); var router = new VueRouter(); router.map({ '/foo': {component: Foo}, '/bar': {component: Bar} }); router.start(App, '#app'); </script>
  • 表单校验:可以通过vue-validator插件对表单进行校验,示例为<input type='text' v-validate:username-"['required']"/>,和jQuery等组件的验证组件逻辑一致。常见的验证规则包括required,pattern,minlength,min等,此外可以通过validator-errors错处信息输出组件进行输出(包括Component、Partial模板)。
  • 与服务端通讯:通过vue-resource插件,Vue.js可以构建一个完全不依赖后端服务的应用,也可以与服务端进行数据交互来通过更新界面,其基于AJAX、JSONP等技术与服务端通信,其实就是对ajax的简化封装了。
  • webpack:webpack是一个模块化加载器,同时支持AMD、CMD等加载规范,支持通过和异步两种依赖加载方式,安装非常简单npm i webpack -g,最简单的示例如下所示(需要注意安装npm安装的module的path环境变量)。 //1.cat.js var cats=['xionger', 'xiongda', 'guangtouqiang']; module.exports = cats; //2.app.js入口文件 cats = require('./cats.js'); console.log(cats); //3.打包 $ webpack ./app.js app.bundle.js //4.运行 $ node app.bundle.js //5.常见命令形式 $ webpack <enrty> <output> -p: 对打包后代码进行压缩 --watch:文件变化时,重新打包 --config:指定Webpack打包配置文件 --progress:在终端显示打包过程
  • 辅助功能 vue-cli脚手架工具可以快速的构建项目,提供了指定项目模板,比如vue init webpack my-project直接生成基于webpack构建的项目,非常的赞,之后使用命令npm installnpm run dev就直接可以在浏览器看到结果了。 测试开发与调试常见工具包括Sublime, WebStorm和VSCode,支持视图安装,chrome中还有一个Vue.js devtools可用于调试。 Scrat与vuejs的组合可以很好的解决前端工程化的问题(如下图所示),毕竟现在前端的应用场景越来越复杂,比如新闻聚合网站、电商平台、直播互动社区等。

Scrat是UC团队在百度FIS基础上二次开发的webapp模块化开发框架,github地址,有些过时了,但思路确实很棒。 vue-load是基于Webpack的loader,在Vue组件化中起到决定性作用;

Tip: Vue2.0新手填坑攻略 之后需要对ECMA6要有一个相应的了解。 JSONP:&callback=flightHandler 生命周期钩子:其实就是面向切面的一些暴露出来的filter点,可以织入自身所需的代码。

参考资料

  1. 张耀春. Vue.js权威指南[M]. 北京:电子工业出版社, 2016.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • SQL优化快速入门

    最近遇到一个专门进行SQL技术优化的项目,对很多既有的老存储过程进行调优(现在已经不再新增任何存储过程),因此系统的对SQL语句编写进行一次科学的学习变得很有必...

    用户1216676
  • MacBook快速入门

    入职新美大,全面进入Mac工作环境,果断“撸起袖子加油干”,“浪起来,逼格提起来”。顺道提一嘴,这边的兄弟们的干劲是真心足,作为一名老兵痞,必须要虚心向身边NX...

    用户1216676
  • Redis快速入门

    由于工作慢慢从原来的少量用户的企业内部应用慢慢转化为了大量用户的企业内部应用或者直接转为了线上高并发应用,因而也渐渐的开始使用memcached、Redis等缓...

    用户1216676
  • Vue 入门

    最后便会在本目录生成一个dist文件夹 里面就会有js/bundle.js,一个压缩好的可以调用的js。

    HcodeBlogger
  • 如何构建你的第一个 Vue.js 组件

    协作翻译 原文:How to build your first Vue.js component 链接:https://medium.freecodecamp....

    企鹅号小编
  • 【玩转腾讯云】windows nmap 中文不乱码的方案

    https://nmap.org/dist-old/nmap-5.35DC1-setup.exe

    shawyang
  • 有人说软件开发工程师是一个很高大上又高不可攀的职业,你认同吗?

    从事软件开发多年,如果不出什么意外还会继续玩下去,软件开发说白了就是一个混口饭吃的职业,说的高大上一点就是一种兴趣爱好,每天不敲几行代码心里总会感觉欠缺点什么东...

    程序员互动联盟
  • Domain Adaptation图像分类分割算法MCD_DA|CVPR2018Oral论文

    通过带标签的source domain的图片和标签训练得到一个网络模型,利用target image 进行domain adaptation 操作,使得sour...

    AI深度学习求索
  • 跟着实例学习ZooKeeper的用法: 缓存

    可以利用ZooKeeper在集群的各个节点之间缓存数据。 每个节点都可以得到最新的缓存的数据。 Curator提供了三种类型的缓存方式:Path Cache,N...

    用户1263954
  • Windows 10显示WLAN2、以太网2,修改提示“无法重命名”的解决方法

    这个问题的根源,和微软有关!在你重新安装网卡时,Microsoft 会偷偷的在系统中留下痕迹,使得你的网卡重装并不是真正意义上的 reinstall 。

    德顺

扫码关注云+社区

领取腾讯云代金券