为了账号安全,请及时绑定邮箱和手机立即绑定

【Vue 极速指南】基础篇

标签:
Vue.js

在这篇文章,你将快速学习到:

  • 如何安装 Vue.js

  • 基础

    • Hello World

    • Vue 实例

    • 模版语法 & 数据绑定

    • 计算属性 & 监听器

    • 事件处理

    • 表单

如何安装 Vue.js

  • 标准安装

  • npm install vue

  • CLI

    • npm install --global vue-cli

    • vue init webpack my-project

    • cd my-project

    • npm install

    • npm run dev

基础

Hello World

  • 导入 vue.js

  • 创建 index.html

  • 创建 Vue 实例

<!DOCTYPE html><html><head>
   <meta charset="utf8">
   <meta name="viewport" content="minimal-ui,width=device-width,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
   <title>Hello Vue</title>
   <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vue.js"></script></head><body>
   <div id="app">
       {{ message }}   </div>
   <script>
       var app = new Vue({
           el: '#app',
           data: {
               message: 'Hello Vue!'
           }
       });   </script></body></html>

Vue 实例

  • 构造函数

  • 属性和方法

  • 实例生命周期

    • created

    • beforeMounted

    • mounted

    • updated

    • destroyed

<!DOCTYPE html><html><head>
    <meta charset="utf8">
    <meta name="viewport" content="minimal-ui,width=device-width,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <title>Vue Instance</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vue.js"></script></head><body>
    <div id="app">
        Vue Instance        <ul>
            <li>constructor</li>
            <li>properties & methods</li>
            <li>instance lifecycle hooks</li>
        </ul>
    </div>
    <script>
        var data = { a: 1 };        var vm = new Vue({            el: '#app',            data: data,            created: function(){                console.log('created');
            },            mounted: function(){                console.log('mounted');
            },            updated: function(){                console.log('updated');
            },            destroyed: function(){                console.log('destroyed');
            }
        });        console.log(vm.a === data.a);        console.log(vm.$data === data);
        vm.$watch('a', function(newVal, oldVal){

        });    </script></body></html>

模版语法 & 数据绑定

  • 文本: <span>{{ msg }}</span>

  • 原始 HTML: <span v-html="rawHtml"></span>

  • 属性: <span v-bind:title="title"></span> shorthand <span :id="title"></span>

  • 表达式: {{ number + 1 }} only contain one single expression

  • 过滤器: {{ message | capitalize }}

  • 指令: <span v-if="seen">Now you see me</span>

  • 指令修饰符: <a v-on:click.stop="doThis">stop modifiers</a>

  • Class 绑定: <span v-bind:class="{active:isActive}">class</span>

  • Style 绑定:

  • 条件渲染: v-if, v-else, v-show

  • 列表渲染: v-for

<!DOCTYPE html><html><head>
    <meta charset="utf8">
    <meta name="viewport" content="minimal-ui,width=device-width,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <title>Template Syntax</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vue.js"></script></head><body>
    <div id="app">
        Text: {{ text }}<br />
        Raw Html: <span v-html="rawHtml"></span><br />
        Attributes: <span v-bind:title="attributeTitle">{{ attributeTitle }}</span><br />
        Expressions: <span>{{ exp + 1}}</span><br />
        Filters: <span>{{ 'toUpperFilter' | toUpperFilter}}</span><br />
        Directives: <span v-if="seen">v-if directive</span><br />
        Modifiers: <a v-on:click.stop="doThis">stop modifiers</a><br />
        Conditional: <span v-if="seen">v-if directive</span><br />
        List: <span v-for="n in 10">{{ n }}</span>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                text: 'bind text',
                rawHtml: '<span>bind html</span>',
                attributeTitle: 'bind title',
                exp: 2,
                seen: true
            },
            filters: {
                toUpperFilter: function(val) {                    return val.toUpperCase();
                }
            }
        });    </script></body></html>

计算属性 & 监听器

TODO

事件处理

  • 事件监听

  • 事件处理方法

  • 事件修饰符

    • .stop

    • .prevent

    • .capture

    • .self

  • 关键修饰符

    • <input v-on:keyup.enter="submit">

    • .enter

    • .tab

    • .delete

    • .esc

    • .space

    • .up

    • .down

    • .left

    • .right

    • Vue.config.keyCodes.f1 = 112

<!DOCTYPE html><html><head>
    <meta charset="utf8">
    <meta name="viewport" content="minimal-ui,width=device-width,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <title>Event</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vue.js"></script></head><body>
    <div id="app">
        listening: <button @click="counter++">Add {{ counter }}</button><br />
        method event handlers: <button @click="greet('Hello', $event)">Greet</button><br />
        event modifiers: <a href="http://m.baichanghui.com" @click.prevent="greet('Hello', $event)">.prevent</a><br />
        key modifiers: <input @keyup.enter="greet('Hello', $event)" type="text" />
    </div>
    <script>
        var app = new Vue({            el: '#app',            data: {                counter: 0,
            },            methods: {                greet: function(msg, e) {
                    alert(msg);                    console.log(e);
                }
            }
        });    </script></body></html>

表单

  • text

  • checkbox

  • radio

  • select

  • value 绑定

  • 修饰符

<!DOCTYPE html><html><head>
    <meta charset="utf8">
    <meta name="viewport" content="minimal-ui,width=device-width,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <title>Forms</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vue.js"></script></head><body>
    <div id="app">
        Text:        <input v-model="message" />
        <span>Message is {{ message }}</span><br />
        Checkbox: 
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{ checked }}</label><br />
        Radio:        <input type="radio" id="radio" value="One" v-model="picked">
        <input type="radio" id="radio" value="Two" v-model="picked">
        <span>Picked: {{ picked }}</span><br />
        Select: 
        <select v-model="selected">
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select><span>Selectd: {{ selected }}</span><br />
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!',
                checked: false,
                picked: 'One',
                selected: 'A'
            }
        });    </script></body></html>

接下来我们会介绍 Vue 的高级使用

  • 组件

  • 自定义指令

  • 过滤器

  • 混入

  • 路由

  • 插件

〖坚强的一俢〗




点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
12
获赞与收藏
135

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消