首页手记【Vue 极速指南】基础篇

【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>

模版语法 & 数据绑定

文本: {{ msg }}
原始 HTML:
属性: shorthand
表达式: {{ number + 1 }} only contain one single expression
过滤器: {{ message | capitalize }}
指令: Now you see me
指令修饰符: <a v-on:click.stop="doThis">stop modifiers</a>
Class 绑定: class
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

关注作者，订阅最新文章

相关文章推荐

【Vue 极速指南】高级篇

【Nuxt.js 极速指南】进阶篇

【Nuxt.js 极速指南】基础篇

【React Native 极速指南】基础篇

【Vue 极速指南】Vuex 篇

阅读免费教程

后端通用面试教程

41个小节 30273 342

网络编程入门教程

20个小节 12461 235

Pandas 入门教程

25个小节 18362 330

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空