一蔓罚、模版指令
通過模版指令(寫在html中的)竿奏，即是html和vue對(duì)象的粘合劑训裆。
- 數(shù)據(jù)渲染 v-text眶根、v-html蜀铲、{{}}
<div id="app"> {{ message }} </div>var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })v-text更新元素的textContent，v-html更新元素的innerHTML属百，內(nèi)容按普通 HTML 插入记劝，不會(huì)作為 Vue 模板進(jìn)行編譯。如果想要title: 'TOMVC <sub>2.0</sub>'不以字符串形式顯示族扰，就可以使用v-html厌丑，<h2 v-html='title'></h2>
- 控制模塊顯示隱藏 v-if、v-show
<div id="view"> <p v-if='isShow'></p> <p v-show='isShow'></p> </div>new Vue({ el: '#view', data: { isShow: true } });v-if是直接不渲染該元素渔呵； v-show是通過display: none進(jìn)行隱藏;
- 渲染循環(huán)列表 v-for
模板引擎都會(huì)提供循環(huán)的支持怒竿。Vue也不例外，Vue是提供了一個(gè)v-for指令厘肮±⒖冢基本的用法類似于foreach的用法。<ul class="view"> // 遍歷數(shù)組类茂，取出每個(gè)元素 <li v-for='item in list'> {{item.text}} </li> </ul><script> var app = new Vue({ el: '.view', data: { list: [ // 數(shù)組 {text: '01耍属、HTML'}, {text: '02、CSS'}, {text: '03巩检、JavaScript'} ] } }); </script>
- 事件綁定 v-on
<div id="view4"> <input type="button" value="按鈕" v-on:click='doThis' /> // 簡寫 <input type="button" value="按鈕" @click='doThis' /> </div><script> new Vue({ el: '#view4', methods: { doThis: function(){ alert('hello'); } } }); </script>
-
屬性綁定 v-bind
Vue中不能直接使用{{ expression}}語法進(jìn)行綁定html的標(biāo)簽厚骗，而是用它特有的v-bind指令，語法<標(biāo)簽 v-bind:屬性名="要綁定的Vue對(duì)象的data里的屬性名"></標(biāo)簽>兢哭。
由于v-bind 使用非常頻繁领舰，所以Vue提供了簡單的寫法，可以去掉v-bind直接使用:即可迟螺。<div id="view"> <img :src='imgSrc'> <img :src='imgSrc'> <p :class='InfoClass'></p> </div><script> new Vue({ el: '#view', data: { imgSrc: 'm_3_100.png', InfoClass: 'infoRed' } }); </script> -
樣式綁定 v-bind
對(duì)于普通的屬性的綁定冲秽，只能用上面的講的綁定屬性的方式。而Vue專門加強(qiáng)了class和style的屬性的綁定矩父★鄙＃可以有復(fù)雜的對(duì)象綁定、數(shù)組綁定樣式和類窍株。
經(jīng)常我們需要對(duì)樣式進(jìn)行切換民轴，比如：div的顯示和隱藏，某些標(biāo)簽active等球订。Vue提供的對(duì)象綁定樣式的方式就很容做這些事情后裸。<style> .view{ width: 300px; height: 30px; border: 1px solid gray; line-height: 30px; text-align: center; } .active{ // 使能樣式 color: red; } </style>// 當(dāng)isActive為true時(shí)，這個(gè)div就會(huì)添加類名active冒滩；當(dāng)isActive為false時(shí)微驶，這個(gè)div就會(huì)移出類名active； <div class="view" :class='{active:isActive}'> {{message}} </div>var app = new Vue({ el: '.view', data: { message: 'hello Vue.', isActive: false } }); -
雙向數(shù)據(jù)綁定 v-model
上面的例子基本都是單向的js對(duì)象向 HTML數(shù)據(jù)進(jìn)行綁定开睡，那HTML怎樣向js進(jìn)行反饋數(shù)據(jù)呢因苹？
Vue提供了一個(gè)新的指令：v-model進(jìn)行雙向數(shù)據(jù)的綁定较店，注意不是v-bind。<div id="app"> <p>{{ message }}</p> // 雙向數(shù)據(jù)綁定 <input v-model="message"> </div>var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })
二容燕、Vue組件中重要選項(xiàng)
Vue的實(shí)例是Vue框架的入口，其實(shí)也就是前端的ViewModel婚度，它包含了頁面中的業(yè)務(wù)邏輯處理蘸秘、數(shù)據(jù)模型等，當(dāng)然它也有自己的一系列的生命周期的事件鉤子蝗茁，輔助我們進(jìn)行對(duì)整個(gè)Vue實(shí)例生成醋虏、編譯、掛載哮翘、銷毀等過程進(jìn)行js控制颈嚼。
- data數(shù)據(jù)選項(xiàng)，代表vue對(duì)象的數(shù)據(jù)
創(chuàng)建的Vue對(duì)象中的data屬性就是用來綁定數(shù)據(jù)到HTML的饭寺，Vue框架會(huì)自動(dòng)監(jiān)視data里面的數(shù)據(jù)變化阻课，自動(dòng)更新數(shù)據(jù)到HTML標(biāo)簽上去。本質(zhì)原理是：Vue會(huì)自動(dòng)將data里面的數(shù)據(jù)進(jìn)行遞歸抓換成getter和setter艰匙，然后就可以自動(dòng)更新HTML標(biāo)簽了限煞，當(dāng)然用getter和setter所以老的瀏覽器Vue支持的不夠好。<div id="app"> {{ message }} </div>var app = new Vue({ el: '#app', data: { // data數(shù)據(jù)選項(xiàng) message: 'Hello Vue!' } })
- methods方法選項(xiàng)员凝，代表vue對(duì)象的方法
方法中的 this 自動(dòng)綁定為 Vue 實(shí)例署驻。<div id="view"> <input type="button" value="按鈕" @click='doThis' /> </div><script> new Vue({ el: '#view', methods: { // methods方法選項(xiàng) doThis: function(){ alert('hello'); } } }); </script>
- computed計(jì)算屬性
在做數(shù)據(jù)的綁定的時(shí)候,數(shù)據(jù)要進(jìn)行處理之后才能展示到html頁面上，雖然vue提供了非常好的表達(dá)式綁定的方法健霹，但是只能應(yīng)對(duì)低強(qiáng)度的需求旺上，另外放入太多的邏輯會(huì)讓模板過重且難以維護(hù)。而計(jì)算屬性糖埋，即屬性可以是一個(gè)方法宣吱。
所有 getter 和 setter 的 this 上下文自動(dòng)地綁定為 Vue 實(shí)例。這就很強(qiáng)大了阶捆，在計(jì)算屬性中定義的函數(shù)里面可以直接使用指向了vue實(shí)例的this凌节。<div class="view"> // 計(jì)算屬性，好處在于會(huì)自動(dòng)根據(jù)totalPrice顯示不同內(nèi)容 {{showStr}} </div>var app = new Vue({ el: '.view', data: { totalPrice: 18 }, computed: { // Vue對(duì)象的computed屬性 // 計(jì)算屬性洒试，但該屬性是一個(gè)方法 showStr: function(){ // this指向vue實(shí)例 if(this.totalPrice < 20){ return '金額小于20倍奢，沒有優(yōu)惠喔!' } else { return '金額大于20，免配送費(fèi)!' } } } });
- watch監(jiān)聽選項(xiàng)垒棋，設(shè)置了對(duì)象的監(jiān)聽方法
一個(gè)對(duì)象卒煞，鍵是需要觀察的表達(dá)式，值是對(duì)應(yīng)回調(diào)函數(shù)叼架。值也可以是方法名畔裕，或者包含選項(xiàng)的對(duì)象衣撬。var view2 = new Vue({ el: '#view2', data: { a: 1 }, methods: { doSomething: function(){ this.a++; } }, watch: { a: function(newvalue, oldvalue){ console.log(newvalue, oldvalue); } } });
三、Vue組件
Vue組件*.vue由三部分組成分別是<template></template>HTML代碼扮饶、<script></script>javascript腳本具练、<style></style>css樣式。【官方推薦甜无，將三個(gè)部分都寫到一個(gè).vue文件中】
四扛点、vue的安裝
-
直接通過
script引入<script src="https://unpkg.com/vue/dist/vue.js"></script>直接下載并用 <script> 標(biāo)簽引入，Vue 會(huì)被注冊(cè)為一個(gè)全局變量岂丘。重要提示：在開發(fā)時(shí)請(qǐng)用開發(fā)版本陵究，遇到常見錯(cuò)誤它會(huì)給出友好的警告。
-
通過npm
# 最新穩(wěn)定版 $ npm install vue需要先安裝Node環(huán)境奥帘，npm其實(shí)是Node.js的包管理工具铜邮！
更換npm的鏡像: npm config set registry http://registry.npm.taobao.org/
-
通過Vue-cli腳手架 [備注: Vue-CLI 3.3.0版本]
Vue-cli是Vue的腳手架工具，是官方命令行工具 (CLI)寨蹋，腳手架即編寫好基礎(chǔ)的代碼松蒜，包括目錄結(jié)構(gòu)、本地調(diào)試已旧、代碼部署牍鞠、熱加載、單元測(cè)試评姨。
- $ npm install -g @vue/cli // 安裝操作 - $ vue -V // 查看版本难述，檢查是否安裝成功 - $ vue create <project-name> 例如 $ vue create hello-vue // 官方模版，也可以使用自定義等模版 // 基本項(xiàng)目設(shè)置 $ vue create hello-vue ?? Get started with the following commands: $ cd hello-vue $ npm run serve // 之后再按照上面提示執(zhí)行對(duì)應(yīng)命令即可 $ cd hello-vue $ npm run serve // 開啟服務(wù)器吐句，之后提示例如打開http://localhost:8080頁面胁后，如果可以打開說明配置完成
