Vue.js兼容性

Vue.js.js 不支持 IE8 及其以下版本，因?yàn)?nbsp;Vue.js.js 使用了 IE8 不能模擬的 ECMAScript 5 特性。 Vue.js.js 支持所有兼容 ECMAScript 5 的瀏覽器。

為奎屯等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及奎屯網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、奎屯網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

Vue.js安裝

安裝方式有兩種：

1、直接下載用script標(biāo)簽引入（推薦引入開發(fā)版本，壓縮版本會失去錯誤提示和警告）

2、使用cdn方法引入

3、npm安裝

   npm安裝的前提需要安裝了nodejs，這里推薦nvm安裝nodejs

   附上一小段nvm使用的命令：

$ nvm install v6.10.2
   $ nvm list 
    * 6.10.2 (Currently using 64-bit executable)
   $ nvm use 6.10.2
   Now using node v6.10.2 (64-bit)
   $ node -v
   v6.10.2
   $ npm -v   3.10.10
  
   $ npm install Vue.js
   或者：
   $ cnpm install bower
   $ bower install Vue.js

   注意：可以使用淘寶定制的 cnpm (gzip 壓縮支持) 命令行工具代替默認(rèn)的 npm:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

這樣就可以使用 cnpm 命令來安裝Vue.js等模塊了：

$ cnpm install vue

Vue.js腳手架安裝

  port可以改成我們指定的端口，這里不僅可以改變端口，還可以根據(jù)需要改變其他配置信息。

# 全局安裝 Vue.js-cli
$ npm install --global Vue.js-cli
# 創(chuàng)建一個基于 webpack 模板的新項(xiàng)目
$ Vue.js init webpack my-project
# 切換到項(xiàng)目目錄，安裝依賴
# 下面出現(xiàn)的所有提示 直接回車則選擇默認(rèn)選項(xiàng)或者yes
$ cd my-project
$ npm install# 運(yùn)行該項(xiàng)目
$ npm run dev
DONE  Compiled successfully in 4388ms> Listening at http://localhost:8080* 這里默認(rèn)8080端口，如果想要更改指定端口，找到根目錄下config文件夾---index.js
dev: {  
  env: require('./dev.env'),  
  port: 8080,  
  autoOpenBrowser: true,  
  assetsSubDirectory: 'static',  
  assetsPublicPath: '/',  
  proxyTable: {},  
  cssSourceMap: false  }

建好Vue.js項(xiàng)目之后，想要再次localhost:8080下運(yùn)行起來，在cmd命令框，進(jìn)入項(xiàng)目根目錄文件夾路徑下，然后

npm run dev,則他會運(yùn)行dev-sever.js文件，之后運(yùn)行成功，頁面自動打開。

Vue.js起步

var app1=new Vue.js({
            el:"#app1",
            data:{
                message:"hahahha"+new Date()
            }
        });

Vue.js 實(shí)例化代碼可以直接寫new Vue.js，也可以賦個值，當(dāng)實(shí)例化的Vue.js賦值給一個變量之后，在控制臺可以直接通過改app1.message等代碼，在瀏覽器可以直接看到頁面效果。

<div id="app3">
        <ol>
            <li v-for="todo in todos">`todo`.`text`</li>
        </ol>
</div>

var app3 = new Vue.js({
           el:"#app3",
           data:{
                todos:[
                    {text:"aaa"},
                    {text:"bbb"},
                    {text:"ccc"},
                    {text:"ddd"}
                ]
           }
        });

 

  **這里注意：循環(huán)的列表項(xiàng)是加載列表標(biāo)簽li標(biāo)簽上的，不是列表盒子上，在控制臺輸入

  app3.todos.push({text:"eee"});  //5

  app3.todos.push({text:"fff"}); //6

  頁面中會直接顯示push進(jìn)來的列表項(xiàng)，控制臺打印出數(shù)組的長度

var app4 = new Vue.js({
           el:"#app4",
           data:{
               message:"我要逆轉(zhuǎn)了"
           },
            methods:{
                reverseMsg:function () {
                    this.message=this.message.split("").reverse().join("");
                }
            }
        });

**這里注意：methods方法要加s，否則報錯：

  

父組件向子組件傳遞數(shù)據(jù)，使子組件接受一個屬性：

<div id="app6">
        <ol>
            <hello v-for="item in fruits" :todo="item"></hello>
        </ol>
</div>

//定義新組件

        Vue.js.component('hello,{
            props:['todo'],
            template:"<div>`todo`.`text`</div>"
        });
        var app6 = new Vue.js({
            el:"#app6",
            data:{
                fruits:[
                    {text:"apple"},
                    {text:"apple2"},
                    {text:"apple3"},
                    {text:"apple4"}
                ]
            }
        })

**關(guān)鍵點(diǎn)：使用 v-bind 指令將屬性傳到每一個重復(fù)的組件中，繽紛切讓它等于遍歷出來的元素。

Vue.js腳手架使用

webstorm eslint配置：推薦一篇文章：

src目錄是我們要開發(fā)的目錄：

assets: 放置一些圖片，如logo等。

components: 目錄里面放了一個組件文件，可以不用。

App.vue.js: 項(xiàng)目入口文件，我們也可以直接將組建寫這里，而不使用 components 目錄。

main.js: 項(xiàng)目的核心文件。

**使用要點(diǎn)：在App.Vue.js中導(dǎo)入components組件文件夾下寫好的組件，在模板里使用組件，導(dǎo)出默認(rèn)，導(dǎo)出的名字為模板最外層元素的id或者class名稱，components寫組件名稱；單獨(dú)的組件寫好后也要記得導(dǎo)出默認(rèn)，導(dǎo)出的名字為模板最外層元素的id或者class名稱。[這些都遵循了ES6語法格式]

<script>
// 導(dǎo)入組件
import Hello from './components/Hello'
 
export default {
  name: 'app',
  components: {
    Hello
  }
}
</script>

**在我第一次使用時eslint報錯：

 

錯誤1：導(dǎo)入的地址必須使用單引號

錯誤2：在從導(dǎo)出時components屬性冒號之后要加空格，再寫大括號

錯誤3：components屬性下寫組件名稱，應(yīng)該縮進(jìn)4個空格

錯誤4：在Apple.vue中多寫了個s[個人不細(xì)心，此類錯誤盡量避免]

當(dāng)這些錯誤都修改完成之后，頁面正常顯示出來了：[eslint檢查比較嚴(yán)格，如果想要關(guān)閉可以自行百度]

 

Vue.js具體使用

Vue.js 條件

v-if、v-else-if、v-else

條件語句的作用：通過判斷不同的條件，顯示不同的區(qū)塊，類似php條件語句的用法，同樣可以嵌套v-else-if（2.1.0新增）。

v-show

控制顯示隱藏，不支持<template>語法,也不支持 v-else。

Vue.js循環(huán)

用法類似for in循環(huán)，所以指令為v-for，(這里切記循環(huán)列表項(xiàng)寫在循環(huán)的單個項(xiàng)目元素上)，支持template模版使用。

用法三種：

item in items

(value, key) in object

(value, key, index) in object

這里有一個特殊的用法：

可以迭代整數(shù)：

<div id="app">
  <ul>
    <li v-for="n in 10">
     {{ n }}    
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app'
})
</script>

輸出：

如果需要非常頻繁地切換，則使用 v-show 較好；如果在運(yùn)行時條件不太可能改變，則使用 v-if 較好。當(dāng) v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優(yōu)先級。

Vue.js 計(jì)算屬性（對比angular和react的優(yōu)點(diǎn)之一）

computed vs methods

我們可以使用 methods 來替代 computed，效果上兩個都是一樣的，但是 computed 是基于它的依賴緩存，只有相關(guān)依賴發(fā)生改變時才會重新取值。而使用 methods ，在重新渲染的時候，函數(shù)總會重新調(diào)用執(zhí)行。

可以說使用 computed 性能會更好，但是如果你不希望緩存，你可以使用 methods 屬性。

computed 默認(rèn)有g(shù)etter方法，可以自己定義一個setter方法

Vue.js 樣式綁定

v-bind: 可以綁定如下幾種：

對象語法

數(shù)組語法

Vue.js class綁定：v-bind：class=”{ }”

Vue.js style(內(nèi)聯(lián)樣式): v-bind:style=”{ }”

示例：

<div id="app12">
        <div v-bind:class="[isActive?active:'',errorClass]">我綁定了不同的class</div>
        <div v-bind:class="{active:isActive,errorClass:hasError}">我綁定了不同的class</div>
        <div v-bind:class="classObject">我綁定了不同的class</div>
        <div v-bind:class="{active:isActive}">我綁定了不同的class</div>
</div>

var app12 = new Vue({
            el:"#app12",
            data:{
                active:"active",
                errorClass:"errorClass",
                isActive:true,
                classObject: {                    'active': true,                    'errorClass': true
                },
                hasError:true
            }
        });

**注意：

以上從上到下依次為：

u 數(shù)組綁定class,數(shù)組綁定的class，數(shù)組元素是對象的名稱，在vue data里要寫對象的值即真正的class名才可以

u 多個對象屬性綁定class,

u 直接綁定一個對象綁定class,在vue data里寫對象屬性名的時候，可加引號可不加，但是有中劃線的時候必須加。

u 單個對象屬性綁定class，根據(jù)vue中isActive的狀態(tài)改變

Vue.js表單控件綁定

v-model 會根據(jù)控件類型自動選取正確的方法來更新元素。

綁定 value

對于單選按鈕，勾選框及選擇列表選項(xiàng)， v-model 綁定的 value 通常是靜態(tài)字符串（對于勾選框是邏輯值）：

<!-- 當(dāng)選中時，`picked` 為字符串 "a" ，單選按鈕-->
<input type="radio" v-model="picked" value="a">
<!-- `toggle` 為 true 或 false ，多選框-->
<input type="checkbox" v-model="toggle">
<!-- 當(dāng)選中時，`selected` 為字符串 "abc"，select選擇框 -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

但是有時我們想綁定 value 到 Vue 實(shí)例的一個動態(tài)屬性上，這時可以用 v-bind 實(shí)現(xiàn)，并且這個屬性的值可以不是字符串。

復(fù)選框如果是一個則為邏輯值，如果是多個則綁定到同一個數(shù)組。

Vue.js組件

以下實(shí)例中將 v-bind 指令將 todo 傳到每一個重復(fù)的組件中：

Prop 實(shí)例

<div id="app">
    <ol>
    <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
      </ol>
</div>

<script>
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})
new Vue({
  el: '#app',
  data: {
    sites: [
      { text: 'Runoob' },
      { text: 'Google' },
      { text: 'Taobao' }
    ]
  }
})
</script>

注意: prop 是單向綁定的：當(dāng)父組件的屬性變化時，將傳導(dǎo)給子組件，但是不會反過來。

**這里綁定todo屬性是因?yàn)楦附M件不能直接把數(shù)據(jù)傳到自定義的子組件上，需要綁定一個屬性作為橋梁。

報錯信息

Vue.js2.0 不支持

$index

報錯：

Vue.js.js:569 [Vue.js warn]: Property or method "$index" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

(found in <Root>)

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當(dāng)前標(biāo)題：Vue.js2.0學(xué)習(xí)重點(diǎn)記錄-創(chuàng)新互聯(lián)
標(biāo)題鏈接：http://jinyejixie.com/article44/piiee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計(jì)公司、網(wǎng)站設(shè)計(jì)、動態(tài)網(wǎng)站、網(wǎng)站營銷、App開發(fā)、域名注冊

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)