vue入門(一)

時間  2019-11-16
標籤 vue 入門 简体版
原文   原文鏈接

 想着要學vue.js , 開始在菜鳥上看文本教程。javascript

 

 

Vue.js的特色：css

 

  • 簡潔： HTML 模板 + JSON 數據，再建立一個 Vue 實例，就這麼簡單。
  • 數據驅動： 自動追蹤依賴的模板表達式和計算屬性。
     
  • 組件化： 用解耦、可複用的組件來構造界面。
     
  • 輕量： ~24kb min+gzip，無依賴。
     
  • 快速： 精確有效的異步批量 DOM 更新。
     
  • 模塊友好： 經過 NPM 或 Bower 安裝，無縫融入你的工做流。

 

以上幾個特色，數據交互的簡潔是有了解過，但事數據驅動還不知道是啥，模塊化組件化給開發者帶來很好的體驗感，簡潔明瞭的API，加上一些庫，就此開啓個人vue學習html

 

【此處省略安裝，命令行什麼的，其實不是很懂有啥用，後面學習是跟着菜鳥，就直接引用的link】vue

 

-起步java

寫了個最簡單的demo 感覺了一下，列出代碼，在註釋中寫出須要細心注意的地方
程序員

<!DOCTYPE html>
<html>
<head>
    <title>2018/9/19</title>
    <meta charset="utf-8">
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="test">
    <h1>introduce : {{introduce}}</h1>
    <h1>test : {{test}}</h1>
    <h1>{{details()}}</h1>   <!-- 由於這個details是個函數，因此別把括號給忘了 -->
</div>
<script type="text/javascript">
  var vm = new Vue({
      el: "#test",
      data:{
          introduce:"啦啦啦 這裏是xw",
          test:"第一個vue"
      },
      methods: {       <!-- methods的「s」不要忘記了 -->
        details: function() {
          return  this.test + " 學習學習..";
        }
      }
  })
</script>
</body>
</html>

 

Vue模板語法api

  • 數據綁定：{{   }}
  • 使用 v-html 指令用於輸出 html 代碼
<div v-html="message"></div>


data: {
    message: '<h1>菜鳥教程</h1>'
  }
  • HTML 屬性中的值應使用 v-bind 指令
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>Vue 測試實例 - 菜鳥教程(runoob.com)</title>
 6 </head>
 7 <style>
 8 .class1{
 9   background: #444;
10   color: #eee;
11 }
12 </style>
13 <body>
14 <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
15 
16 <div id="app">
17   <label for="r1">修改顏色</label><input type="checkbox" v-model="class2" id="r1">  <!-- 這裏的class2的值會根據是否選中而改變布爾值。選中後class2變成true -->
18   <br><br>
19   <div v-bind:class="{'class1': class2}">     <!-- 這個 選擇器 存在與否將取決於數據屬性 class2 是true 仍是false 。 -->
20     v-bind:class 指令
21   </div>
22 </div>
23     
24 <script>
25 new Vue({
26     el: '#app',
27   data:{
28       class2: false
29   }
30 });
31 </script>
32 </body>
33 </html>class1

 

V-model數組

此處v-model是個知識點瀏覽器

  1. v-model 用在 input 元素上時

    1 <input v-model="sth" />    <!-- 第一行的代碼其實只是第二行的語法糖  而後這個sth就已經能夠在別的標籤裏作數據綁定了  -->
2 <input v-bind:value="sth" v-on:input="sth = $event.target.value" />
    1 <input :value="sth" @input="sth = $event.target.value" />

    這兩種代碼表達 的意思是同樣的app

    第一行就是間接的用v-model像是直接動態獲取了輸入框輸入的value 而後做爲sth

    第二行就是實時傳遞value值  balabala不知道是什麼鬼

     

    ( 語法糖指計算機語言中添加的某種語法，這種語法對語言的功能並無影響，可是更方便程序員使用。一般來講使用語法糖可以增長程序的可讀性，從而減小程序代碼出錯的機會。 )

     

  2. v-model 用在組件上時

 

  • 指令是帶有 v- 前綴的特殊屬性。 指令用於在表達式的值改變時，將某些行爲應用到 DOM 上   eg: v-if
1 <p v-if="seen">如今你看到我了</p>

 

  • 參數在指令後以冒號指明。例如， v-bind 指令被用來響應地更新 HTML 屬性： 
    1 <pre><a v-bind:href="url">菜鳥教程</a></pre>

     

           在這裏 href 是參數，告知 v-bind 指令將該元素的 href 屬性與表達式 url 的值綁定。(還有一些別的  此處省略)

 

  • 修飾符

修飾符是以半角句號 . 指明的特殊後綴，用於指出一個指令應該以特殊方式綁定。例如，.prevent 修飾符告訴 v-on 指令對於觸發的事件調用event.preventDefault()：

 插一小個關於js函數的， 寫一個翻轉文字部分，而後函數是將文字翻轉

1 reverseMessage: function () {
2       this.message = this.message.split('').reverse().join('')
3     }

split() 方法用於把一個字符串分割成字符串數組。

reverse() 方法用於顛倒數組中元素的順序。

join() 方法用於把數組中的全部元素放入一個字符串。

過程就是 先把這個字符串分割成字符組成的數組 而後顛倒數組元素，再把數組組合成字符串

  • 過濾器

Vue.js 容許你自定義過濾器，被用做一些常見的文本格式化。由"管道符"指示, 格式以下：

 1 <div id="app">
 2   {{ message | capitalize }}
 3 </div>
 4 
 5 
 6 <script>
 7 new Vue({
 8   el: '#app',
 9   data: {
10     message: 'runoob'
11   },
12   filters: {
13     capitalize: function (value) {
14       if (!value) return ''
15       value = value.toString()
16       return value.charAt(0).toUpperCase() + value.slice(1)
17     }
18   }
19 })
20 </script>

 

指令

 

1. v-text
v-text主要用來更新textContent，能夠等同於JS的text屬性。

<span v-text="msg"></span>

這二者等價：

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

2. v-html
雙大括號的方式會將數據解釋爲純文本，而非HTML。爲了輸出真正的HTML，能夠用v-html指令。它等同於JS的innerHtml屬性。

<div v-html="rawHtml"></div>

這個div的內容將會替換成屬性值rawHtml，直接做爲HTML進行渲染。

3. v-pre
v-pre主要用來跳過這個元素和它的子元素編譯過程。能夠用來顯示原始的Mustache標籤。跳過大量沒有指令的節點加快編譯。

<div id="app"> <span v-pre>{{message}}</span> //這條語句不進行編譯 <span>{{message}}</span> </div>

最終僅顯示第二個span的內容

4. v-cloak
這個指令是用來保持在元素上直到關聯實例結束時進行編譯。

<div id="app" v-cloak> <div> {{message}} </div> </div> <script type="text/javascript"> new Vue({ el:'#app', data:{ message:'hello world' } }) </script>

在頁面加載時會閃爍，先顯示:

<div> {{message}} </div>

而後纔會編譯爲：

<div>
    hello world!
</div>

5. v-once
v-once關聯的實例，只會渲染一次。以後的從新渲染，實例極其全部的子節點將被視爲靜態內容跳過，這能夠用於優化更新性能。

<span v-once>This will never change:{{msg}}</span> //單個元素 <div v-once>//有子元素 <h1>comment</h1> <p>{{msg}}</p> </div> <my-component v-once:comment="msg"></my-component> //組件 <ul> <li v-for="i in list">{{i}}</li> </ul>

上面的例子中，msg,list即便產生改變，也不會從新渲染。

6. v-if
v-if能夠實現條件渲染，Vue會根據表達式的值的真假條件來渲染元素。

<a v-if="ok">yes</a>

若是屬性值ok爲true，則顯示。不然，不會渲染這個元素。

7. v-else
v-else是搭配v-if使用的，它必須緊跟在v-if或者v-else-if後面，不然不起做用。

<a v-if="ok">yes</a> <a v-else>No</a>

8. v-else-if
v-else-if充當v-if的else-if塊，能夠鏈式的使用屢次。能夠更加方便的實現switch語句。

<div v-if="type==='A'"> A </div> <div v-if="type==='B'"> B </div> <div v-if="type==='C'"> C </div> <div v-else> Not A,B,C </div>

9. v-show

<h1 v-show="ok">hello world</h1>

也是用於根據條件展現元素。和v-if不一樣的是，若是v-if的值是false，則這個元素被銷燬，不在dom中。可是v-show的元素會始終被渲染並保存在dom中，它只是簡單的切換css的dispaly屬性。

注意：v-if有更高的切換開銷
v-show有更高的初始渲染開銷。
所以，若是要很是頻繁的切換，則使用v-show較好；若是在運行時條件不太可能改變，則v-if較好

10. v-for
用v-for指令根據遍歷數組來進行渲染
有下面兩種遍歷形式

<div v-for="(item,index) in items"></div> //使用in，index是一個可選參數，表示當前項的索引 <div v-for="item of items"></div> //使用of

下面是一個例子，而且在v-for中，擁有對父做用域屬性的徹底訪問權限。

<ul id="app"> <li v-for="item in items"> {{parent}}-{{item.text}} </li> </ul> <script type="text/javascript"> var example = new Vue({ el:'#app', data:{ parent:'父做用域' items:[ {text:'文本1'}, {text:'文本2'} ] } }) </script>

會被渲染爲：

<ul id="app"> <li>父做用域-文本1</li> <li>父做用域-文本2</li> </ul>

注意：當v-for和v-if同處於一個節點時，v-for的優先級比v-if更高。這意味着v-if將運行在每一個v-for循環中

11. v-bind
v-bind用來動態的綁定一個或者多個特性。沒有參數時，能夠綁定到一個包含鍵值對的對象。經常使用於動態綁定class和style。以及href等。
簡寫爲一個冒號【 ：】

<1>對象語法：

//進行類切換的例子
<div id="app"> <!--當data裏面定義的isActive等於true時，is-active這個類纔會被添加起做用--> <!--當data裏面定義的hasError等於true時，text-danger這個類纔會被添加起做用--> <div :class="{'is-active':isActive, 'text-danger':hasError}"></div> </div> <script> var app = new Vue({ el: '#app', data: { isActive: true, hasError: false } }) </script>

渲染結果：

<!--由於hasError: false，因此text-danger不被渲染--> <div class = "is-active"></div>

<2>數組語法

<div id="app"> <!--數組語法：errorClass在data對應的類必定會添加--> <!--is-active是對象語法，根據activeClass對應的取值決定是否添加--> <p :class="[{'is-active':activeClass},errorClass]">12345</p> </div> <script> var app = new Vue({ el: '#app', data: { activeClass: false, errorClass: 'text-danger' } }) </script>

渲染結果：

<!--由於activeClass: false，因此is-active不被渲染--> <p class = "text-danger"></p>

<3>直接綁定數據對象

<div id="app"> <!--在vue實例的data中定義了classObject對象，這個對象裏面是全部類名及其真值--> <!--當裏面的類的值是true時會被渲染--> <div :class="classObject">12345</div> </div> <script> var app = new Vue({ el: '#app', data: { classObject:{ 'is-active': false, 'text-danger':true } } }) </script>

渲染結果：

<!--由於'is-active': false，因此is-active不被渲染--> <div class = "text-danger"></div>

12. v-model
這個指令用於在表單上建立雙向數據綁定。
v-model會忽略全部表單元素的value、checked、selected特性的初始值。由於它選擇Vue實例數據作爲具體的值。

<div id="app"> <input v-model="somebody"> <p>hello {{somebody}}</p> </div> <script> var app = new Vue({ el: '#app', data: { somebody:'小明' } }) </script>

這個例子中直接在瀏覽器input中輸入別的名字，下面的p的內容會直接跟着變。這就是雙向數據綁定。

v-model修飾符
<1> .lazy
默認狀況下，v-model同步輸入框的值和數據。能夠經過這個修飾符，轉變爲在change事件再同步。

<input v-model.lazy="msg">

<2> .number
自動將用戶的輸入值轉化爲數值類型

<input v-model.number="msg">

<3> .trim
自動過濾用戶輸入的首尾空格

<input v-model.trim="msg">

13. v-on
v-on主要用來監聽dom事件，以便執行一些代碼塊。表達式能夠是一個方法名。
簡寫爲：【 @ 】

<div id="app"> <button @click="consoleLog"></button> </div> <script> var app = new Vue({ el: '#app', methods:{ consoleLog:function (event) { console.log(1) } } }) </script>

事件修飾符

  • .stop 阻止事件繼續傳播
  • .prevent 事件再也不重載頁面
  • .capture 使用事件捕獲模式,即元素自身觸發的事件先在此到處理，而後才交由內部元素進行處理
  • .self 只當在 event.target 是當前元素自身時觸發處理函數
  • .once 事件將只會觸發一次
  • .passive 告訴瀏覽器你不想阻止事件的默認行爲
<!-- 阻止單擊事件繼續傳播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件再也不重載頁面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修飾符能夠串聯 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修飾符 --> <form v-on:submit.prevent></form> <!-- 添加事件監聽器時使用事件捕獲模式 --> <!-- 即元素自身觸發的事件先在此到處理，而後才交由內部元素進行處理 --> <div v-on:click.capture="doThis">...</div> <!-- 只當在 event.target 是當前元素自身時觸發處理函數 --> <!-- 即事件不是從內部元素觸發的 --> <div v-on:click.self="doThat">...</div> <!-- 點擊事件將只會觸發一次 --> <a v-on:click.once="doThis"></a> <!-- 滾動事件的默認行爲 (即滾動行爲) 將會當即觸發 --> <!-- 而不會等待 `onScroll` 完成 --> <!-- 這其中包含 `event.preventDefault()` 的狀況 --> <div v-on:scroll.passive="onScroll">...</div>

使用修飾符時，順序很重要；相應的代碼會以一樣的順序產生。所以，用v-on:click.prevent.self會阻止全部的點擊，而 v-on:click.self.prevent 只會阻止對元素自身的點擊。

指令這一塊的來源爲 ：https://i.cnblogs.com/EditPosts.aspx?postid=9664166&update=1 【簡書轉載收藏】
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程