vue1 x 基礎使用（一）

lkycan發表於2017-12-14
Vue

最近專案進度慢下來了，花點時間總結一下。文章會從vue1.x 到2.x的一些說明以及使用，也會文章中的程式碼共享出來。詳細請關注後續。

#####簡介：感慨是會用到一些第三方的模組下載工具，不過不要擔心，都是一步步來的，偏前端先是用到了 bower 把vue.js 下載下來，引用的方法也和以前一樣，直接引用 路徑。後面陸續會換到其他的一些工具，如gulp，wekpack等。也會介紹一些常用的工具。如 bable 下一代的javascript 語法編譯器，vue的路由，vue的互動。

#1.bower 前端包管理器 #####原因：現在前端也日新月異，一些第三方包，外掛，模組，包也在不斷更新，相互依賴的包也是很多，如專案需要用到bootstrap，而bootstrap又依賴jquery，以往方法是下載bootstrap後，又下載jquery才能用，而用bower 下載只需要下載bootstrap 它會把相關依賴的包也下載下來，到時候只需要做相關的引入就行了。

#####安裝 bower

bower 也是通過npm安裝

npm install -g bower
複製程式碼

檢視bower幫助

bower -h
複製程式碼

建立 bower json檔案

bower init
複製程式碼

安裝 第三方的包如 bootstrap

bower install bootstrap
複製程式碼

效果如下：

image.png

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

image.png

一般檔案都會在 dist 這個資料夾下

image.png

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

    <script src="../bower_components/jquery/dist/jquery.js"></script>
    <script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
複製程式碼

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

bower install bootstrap --save
複製程式碼

這樣 #2.vue 基礎使用 html部分：

<span>{{msg}}</span>

<!--引入vue.js-->
<script src="../bower_components/vue/dist/vue.js"></script>
複製程式碼

javascript 部分：

var vm = new Vue({
      el:'body',//
      data(){
          msg:'hello'
      }
})
複製程式碼

array 部分

 <span>{{arr}}</span>

data(){
  ...
 arr:['can','tom'],
  ...
}
複製程式碼

json 部分

{{ jsonObj | json }}

data(){
  ...
 jsonObj:{'name':'can','age':25},
  ...
}
複製程式碼

v-for 部分

        <span>for 迴圈使用</span>
        <ul>
            <li v-for="phome in phoneList ">{{phome}}</li>
        </ul>
        <span>or</span>
        <ul>
            <li v-for="value in phoneList ">{{value}}  下標為 {{$index}}</li>
        </ul>   


data(){
      phoneList:['iPhome 6','iPhome 7','iPhome 8'],
}
複製程式碼

###基礎部分的

<script>
    var vm = new Vue({
        el:'#box',
        data:{
            msg:'vue',
            msg1:1,
            msg2:false,
            arr:['can','tom'],
            jsonObj:{'name':'can','age':25},
            phoneList:['iPhome 6','iPhome 7','iPhome 8'],
            fruits:[
                {'name':'apple','price':3.5},
                {'name':'banana','price':1.9},
                {'name':'orange','price':2.5},
                {'name':'grape','price':3.2}
            ]
        }
    });

</script>   

複製程式碼

基礎程式碼連結

##3.事件

click 事件

html:

        <span>以前的事件</span>
        <button  onclick="btnclick()" >button</button>
        <hr>
        <span>vue的事件</span>
        <br>
        <p>  @寫法(簡寫，推薦使用)</p>
        <button @click="vclick()">v-button</button>
複製程式碼

javascript:

    // 以前的按鈕事件
    function btnclick(){
        alert('我是點選事件');
    }


// 用vue 的方式
    var vm = new Vue({
        el:'body',
        methods: {
            vclick(){
                alert('vue click');
            }
        }
    })

複製程式碼

一些常用的事件：

##4.基礎的綜合例子 效果如下：

image.png

檢視時候：

image.png

刪除時候：

image.png

詳細程式碼看 tabelshow.html

這篇大概寫了一下和很普通的例子，後續會繼續分享，請繼續關注。

相關文章