1. 程式人生 > >vueJs學習筆記1

vueJs學習筆記1

vueJS學習目錄:

教程: https://www.runoob.com/vue2/vue-class-style.html

 

table使用: https://c.runoob.com/codedemo/5440

 

 

vue-element-admin專案地址與執行步驟:https://github.com/PanJiaChen/vue-element-admin

 

  1. 構建後會出現:node_modules資料夾,在vue-element-admin目錄下
  2. Build以後會生成一個dist資料夾。
  3. 執行的話需要參見https://blog.csdn.net/u014054437/article/details/79981307

具體步驟如下:

1.安裝express-generator生成器

執行  $ npm install express-generator -g  進行安裝

2. 建立一個express專案

執行  $ express expressDemo (expressDemo是專案名)

3.進入expressDemo目錄,安裝專案依賴

$ cd expressDemo                                                                               

$ npm install

把dist目錄下的所有檔案複製到express專案的public資料夾下

執行 $ npm start 啟動expressDemo

開啟瀏覽器,輸入 http://localhost:3000

 

                  

  1. expressDemo:是執行的目錄

 

vueJS學習筆記來自菜鳥教程:

1.

<div id="vue_det">

    <h1>site : {{site}}</h1>

    <h1>url : {{url}}</h1>

    <h1>{{details()}}</h1>

</div>

<script type="text/javascript">

    var vm = new Vue({

        el: '#vue_det',

        data: {

            site: "菜鳥教程",

            url: "www.runoob.com",

            alexa: "10000"

        },

        methods: {

            details: function() {

                return  this.site + " - 學的不僅是技術,更是夢想!";

            }

        }

    })

</script>

 

//輸出物件和函式返回值

 

<div id = “vue_det”>

         <h1>site: {{ site }} </h1>

         <h1>url: {{url}}</h1>

         <h1>{{details()}}</h1>

</div>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

//雙向繫結:

 

<div id="vue_det">

    <h1>site : {{site}}</h1>

    <h1>url : {{url}}</h1>

    <h1>Alexa : {{alexa}}</h1>

</div>

<script type="text/javascript">

// 我們的資料物件

var data = { site: "菜鳥教程", url: "www.runoob.com", alexa: 10000}

var vm = new Vue({

    el: '#vue_det',

    data: data

})

// 它們引用相同的物件!

document.write(vm.site === data.site) // true

document.write("<br>")

// 設定屬性也會影響到原始資料

vm.site = "Runoob"

document.write(data.site + "<br>") // Runoob

 

// ……反之亦然

data.alexa = 1234

document.write(vm.alexa) // 1234

</script>

 

 

 

 

除了資料屬性,Vue 例項還提供了一些有用的例項屬性與方法。它們都有字首 $,以便與使用者定義的屬性區分開來。

<div id="vue_det">

    <h1>site : {{site}}</h1>

    <h1>url : {{url}}</h1>

    <h1>Alexa : {{alexa}}</h1>

</div>

<script type="text/javascript">

// 我們的資料物件

var data = { site: "菜鳥教程", url: "www.runoob.com", alexa: 10000}

var vm = new Vue({

    el: '#vue_det',

    data: data

})

 

document.write(vm.$data === data) // true

document.write("<br>") // true

document.write(vm.$el === document.getElementById('vue_det')) // true

</script>

 

 

JavaScript表示式

 

<div id="app">

    {{5+5}}<br>

    {{ ok ? 'YES' : 'NO' }}<br>

    {{ message.split('').reverse().join('') }}

    <div v-bind:id="'list-' + id">菜鳥教程</div>

</div>

   

<script>

new Vue({

  el: '#app',

  data: {

    ok: true,

    message: 'RUNOOB',

    id : 1

  }

})

</script>

 

 

<div v-bind:id="'list-' + id">菜鳥教程</div>

意思就是v-bind一個id,並且命名為’list-id’

 

<p v-if="seen">現在你看到我了</p>

 v-if 指令將根據表示式 seen 的值(true false )來決定是否插入 p 元素。

 

 

 

 

 

 

 

 

 

 

 

 

<div id="app">

    <pre><a v-bind:href="url">菜鳥教程</a></pre>

</div>

   

<script>

new Vue({

  el: '#app',

  data: {

    url: 'http://www.runoob.com'

  }

})

</script>

 

在這裡 href 是引數,告知 v-bind 指令將該元素的 href 屬性與表示式 url 的值繫結。

 

preventDefault() 方法阻止元素髮生預設的行為(例如,當點選提交按鈕時阻止對錶單的提交)。

 

input 輸入框中我們可以使用 v-model 指令來實現雙向資料繫結:

 

<div id="app">

    <p>{{ message }}</p>

    <input v-model="message">

</div>

   

<script>

new Vue({

  el: '#app',

  data: {

    message: 'Runoob!'

  }

})

</script>

 

v-model 指令用來在 inputselecttextcheckboxradio 等表單控制元件元素上建立雙向資料繫結,根據表單上的值,自動更新繫結的元素的值。

 

 

 

arrayObject.slice(start,end) 引數描述 start 必需。規定從何處開始選取

 

 

 

 

v-bind 縮寫

Vue.js 為兩個最為常用的指令提供了特別的縮寫:

<!-- 完整語法 -->

<a v-bind:href="url"></a>

<!-- 縮寫 -->

<a :href="url"></a>

v-on 縮寫

<!-- 完整語法 -->

<a v-on:click="doSomething"></a>

<!-- 縮寫 -->

<a @click="doSomething"></a>

 

 

我們也可以使用 v-show 指令來根據條件展示元素:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 測試例項 - 菜鳥教程(runoob.com)</title>

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

</head>

<body>

<div id="app">

    <h1 v-show="ok">Hello!</h1>

</div>

        

<script>

new Vue({

  el: '#app',

  data: {

    ok: true

  }

})

</script>

</body>

</html>

 

 

 

v-for 指令需要以 site in sites 形式的特殊語法, sites 是源資料陣列並且 site 是陣列元素迭代的別名。

v-for 可以繫結資料到陣列來渲染一個列表:

 

<div id="app">

  <ol>

    <li v-for="site in sites">

      {{ site.name }}

    </li>

  </ol>

</div>

 

<script>

new Vue({

  el: '#app',

  data: {

    sites: [

      { name: 'Runoob' },

      { name: 'Google' },

      { name: 'Taobao' }

    ]

  }

})

</script>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

computed setter

computed 屬性預設只有 getter ,不過在需要時你也可以提供一個 setter

 

<div id="app">

  <p>原始字串: {{ message }}</p>

  <p>計算後反轉字串: {{ reversedMessage }}</p>

</div>

 

<script>

var vm = new Vue({

  el: '#app',

  data: {

    message: 'Runoob!'

  },

  computed: {

    // 計算屬性的 getter

    reversedMessage: function () {

      // `this` 指向 vm 例項

      return this.message.split('').reverse().join('')

    }

  }

})

</script>

 

 

可以說使用 computed 效能會更好,但是如果你不希望快取,你可以使用 methods 屬性。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

.class的使用方法

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 測試例項 - 菜鳥教程(runoob.com)</title>

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<style>

.active {

         width: 100px;

         height: 100px;

         background: green;

}

.text-danger {

         background: red;

}

</style>

</head>

<body>

<div id="app">

  <div class="static"

     v-bind:class="{ active: isActive, 'text-danger': hasError }">

  </div>

</div>

 

<script>

new Vue({

  el: '#app',

  data: {

    isActive: true,

         hasError: true

  }

})

</script>

</body>

</html>