【Vue 極速指南】基礎(chǔ)篇

標(biāo)簽：

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 >.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 的高级使用

组件
自定义指令
过滤器
混入
路由
插件

〖坚强的一俢〗

點擊查看更多內(nèi)容

為 TA 點贊

若覺得本文不錯，就分享一下吧！

評論

評論

共同學(xué)習(xí)，寫下你的評論

評論加載中...

展開查看更多評論

作者其他優(yōu)質(zhì)文章

正在加載中

一俢

Web前端工程師

手記
篇

粉絲

12

獲贊與收藏

135

關(guān)注作者，訂閱最新文章

閱讀免費教程

后端通用面試教程

41個小節(jié) 32486 366

網(wǎng)絡(luò)編程入門教程

20個小節(jié) 13447 254

Pandas 入門教程

25個小節(jié) 20073 381

推薦

評論

收藏

共同學(xué)習(xí)，寫下你的評論



感謝您的支持，我會繼續(xù)努力的～

掃碼打賞，你說多少就多少

贊賞金額會直接到老師賬戶

支付方式

打開微信掃一掃，即可進(jìn)行掃碼打賞哦

今天注冊有機(jī)會得

100積分直接送

付費專欄免費學(xué)

大額優(yōu)惠券免費領(lǐng)

立即參與放棄機(jī)會

點擊
抽獎

慕課手記新用戶專享福利

恭喜你，你的運氣太好了，居然抽中了 100個積分！

恭喜你，抽中了價值元的專欄！

太棒了，直接落到你賬戶里！

積分商城里的羅技鼠標(biāo)、機(jī)械鍵盤、
Kindle 閱讀器、小米平衡車
Apple iPad （10.2英寸）、大額優(yōu)惠券
在等著你去兌換了噢

作者：

免費贈送

兌換碼：1111222211 復(fù)制

優(yōu)惠券可用于購買實戰(zhàn)課、體系課
無門檻使用

先去看看，有什么好東西馬上兌換我愛學(xué)習(xí)，選課去


第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空