国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue1.x 基礎(chǔ)使用（一）

pkhope / 454人閱讀

摘要：最近項(xiàng)目進(jìn)度慢下來了，花點(diǎn)時間總結(jié)一下。文章會從到的一些說明以及使用，也會文章中的代碼共享出來。詳細(xì)請關(guān)注后續(xù)。后面陸續(xù)會換到其他的一些工具，如，等。也會介紹一些常用的工具。如下一代的語法編譯器，的路由，的交互。

最近項(xiàng)目進(jìn)度慢下來了，花點(diǎn)時間總結(jié)一下。文章會從vue1.x 到2.x的一些說明以及使用，也會文章中的代碼共享出來。詳細(xì)請關(guān)注后續(xù)。

簡介：感慨是會用到一些第三方的模塊下載工具，不過不要擔(dān)心，都是一步步來的，偏前端先是用到了 bower 把vue.js 下載下來，引用的方法也和以前一樣，直接引用 路徑。后面陸續(xù)會換到其他的一些工具，如gulp，wekpack等。也會介紹一些常用的工具。如 bable 下一代的javascript 語法編譯器，vue的路由，vue的交互。
1.bower 前端包管理器
原因：現(xiàn)在前端也日新月異，一些第三方包，插件，模塊，包也在不斷更新，相互依賴的包也是很多，如項(xiàng)目需要用到bootstrap，而bootstrap又依賴jquery，以往方法是下載bootstrap后，又下載jquery才能用，而用bower 下載只需要下載bootstrap 它會把相關(guān)依賴的包也下載下來，到時候只需要做相關(guān)的引入就行了。
安裝 bower

bower 也是通過npm安裝

npm install -g bower

查看bower幫助

bower -h

建立 bower json文件

bower init

安裝 第三方的包如 bootstrap

bower install bootstrap

效果如下：

下載好的第三方包都是在 bower_components 這個文件夾下面

一般文件都會在 dist 這個文件夾下

簡單引用方式和以往一樣：

如果你想把配置寫在json里面，在下載第三方包時候加 --save
如：

bower install bootstrap --save

這樣

2.vue 基礎(chǔ)使用

html部分：

{{msg}}

javascript 部分：

var vm = new Vue({
      el:"body",//
      data(){
          msg:"hello"
      }
})
array 部分 
 {{arr}}

data(){
  ...
 arr:["can","tom"],
  ...
}
json 部分 
{{ jsonObj | json }}

data(){
  ...
 jsonObj:{"name":"can","age":25},
  ...
}
v-for 部分 
        for 循環(huán)使用
        
    
            
  • {{phome}}
    • 
        

        or
        
    
            
  • {{value}}  下標(biāo)為 {{$index}}
    • 
        
   


data(){
      phoneList:["iPhome 6","iPhome 7","iPhome 8"],
}
基礎(chǔ)部分的

基礎(chǔ)代碼鏈接

3.事件 click 事件

html:

        以前的事件
        
        

        vue的事件
        

        
  @寫法(簡寫，推薦使用)

javascript:

    // 以前的按鈕事件
    function btnclick(){
        alert("我是點(diǎn)擊事件");
    }


// 用vue 的方式
    var vm = new Vue({
        el:"body",
        methods: {
            vclick(){
                alert("vue click");
            }
        }
    })
4.基礎(chǔ)的綜合例子

效果如下：

查看時候：

刪除時候：

詳細(xì)代碼看 tabelshow.html

這篇大概寫了一下和很普通的例子，后續(xù)會繼續(xù)分享，請繼續(xù)關(guān)注。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/51129.html

相關(guān)文章

  • vue1.x 基礎(chǔ)使用（一）

    摘要：最近項(xiàng)目進(jìn)度慢下來了，花點(diǎn)時間總結(jié)一下。文章會從到的一些說明以及使用，也會文章中的代碼共享出來。詳細(xì)請關(guān)注后續(xù)。后面陸續(xù)會換到其他的一些工具，如，等。也會介紹一些常用的工具。如下一代的語法編譯器，的路由，的交互。 最近項(xiàng)目進(jìn)度慢下來了，花點(diǎn)時間總結(jié)一下。文章會從vue1.x 到2.x的一些說明以及使用，也會文章中的代碼共享出來。詳細(xì)請關(guān)注后續(xù)。 簡介：感慨是會用到一些第三方的模塊下載工...

    xuexiangjys 評論0 收藏0

  • vue1.x 事件對象（二）

    摘要：事件句柄的新特性之一是能夠使事件觸發(fā)瀏覽器中的行為，比如當(dāng)用戶點(diǎn)擊某個元素時啟動一段。下面是一個屬性列表，可將之插入標(biāo)簽以定義事件的行為。鍵盤事件的代碼鏈接其他基礎(chǔ)使用一 本文主要簡述了event 對象，順便復(fù)習(xí)了一下事件句柄　(Event Handlers)，鍵盤的一些屬性，以及最容易遇到的事件冒泡，同樣的阻止事件冒泡，在vue 下是怎樣解決的，vue 提供了那些方便去阻止事件冒泡。...

    Enlightenment 評論0 收藏0

  • vue1.x 事件對象（二）

    摘要：事件句柄的新特性之一是能夠使事件觸發(fā)瀏覽器中的行為，比如當(dāng)用戶點(diǎn)擊某個元素時啟動一段。下面是一個屬性列表，可將之插入標(biāo)簽以定義事件的行為。鍵盤事件的代碼鏈接其他基礎(chǔ)使用一 本文主要簡述了event 對象，順便復(fù)習(xí)了一下事件句柄　(Event Handlers)，鍵盤的一些屬性，以及最容易遇到的事件冒泡，同樣的阻止事件冒泡，在vue 下是怎樣解決的，vue 提供了那些方便去阻止事件冒泡。...

    JasinYip 評論0 收藏0

  • 用Vue2.x重寫github-explorer

    摘要：溫馨提示這個項(xiàng)目主要是用來學(xué)習(xí)的，所以我會不斷建分支重寫，下一個分支是。更加溫馨的提示已經(jīng)將運(yùn)用在了大型的項(xiàng)目中，反響一流，下一步是轉(zhuǎn)，希望喜歡的同學(xué)堅(jiān)定信念啊。 github-explorer Rebuild with Vue 2.0 源碼地址1.x版本Live DemoReact版 Demo 簡介 之前看到了一個很有意思的項(xiàng)目，是一位大牛寫的github-explorer。他用的是...

    keithyau 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<