vue基礎---介紹

（1）聲明式渲染

     Vue.js 的核心是採用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統：

    ①文本

<div id="app">
  {{ message }}
</div> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })

    如今已經成功建立了第一個 Vue 應用！看起來這跟渲染一個字符串模板很是相似，可是 Vue 在背後作了大量工做。如今數據和 DOM 已經被創建了關聯，全部東西都是響應式的。咱們要怎麼確認呢？打開瀏覽器的 JavaScript 控制檯 (就在這個頁面打開)，並修改 app.message 的值，你將看到上例相應地更新。

    

    ②屬性

    除了文本插值，還能夠像這樣來綁定元素特性：

    <div id="app" v-bind:title="message">
          {{info}}
    </div>
    <script type="text/javascript">
        var app = new Vue({ el: '#app', data: { info:"將鼠標懸停上來查看效果", message: '如今時間是'+new Date().toLocaleString() } }) </script>

    這裏的 v-bind 特性被稱爲指令。指令帶有前綴 v-，以表示它們是 Vue 提供的特殊特性。

    它們會在渲染的 DOM 上應用特殊的響應式行爲。在這裏，該指令的意思是：「將這個元素節點的 title 特性和 Vue 實例的 message 屬性保持一致」。

    若是再次打開瀏覽器的 JavaScript 控制檯，輸入 app2.message = '新消息'，就會再一次看到這個綁定了 title 特性的 HTML 已經進行了更新。

.

（2）條件與循環

    ①條件指令：控制切換元素是否插入/顯隱

    <div id="app" v-bind:title="message" v-if="seen">
          {{info}}
    </div>
    <script type="text/javascript">
        var app = new Vue({ el: '#app', data: { info:"將鼠標懸停上來查看效果", message: '如今時間是'+new Date().toLocaleString(), seen:true } }) </script>

    繼續在控制檯輸入 app3.seen = false，會發現以前顯示的消息消失了。

    這個例子演示了不只能夠把數據綁定到 DOM 文本或屬性，還能夠綁定到 DOM 結構。此外，Vue 也提供一個強大的過渡效果系統，能夠在 Vue 插入/更新/移除元素時自動應用過渡效果。

    ②循環指令：v-for 指令能夠綁定數組的數據來渲染一個項目列表

<ul id="list">
    <li v-for="book in books">
        {{book.name}}
    </li>
</ul>

var list = new Vue({
        el:"#list",
        data:{
            books:[
                  {name:"一年級語文"},
                  {name:"二年級語文"},
                  {name:"三年級語文"},
                  {name:"四年級語文"},
                  {name:"五年級語文"},
                  {name:"六年級語文"}
             ]
        }    
})

   

在控制檯裏，輸入 app4.todos.push({ text: '新項目' })，你會發現列表最後添加了一個新項目。

   

 

（3）處理用戶輸入

    ①事件監聽器：v-on 指令添加一個事件監聽器，經過它調用在 Vue 實例中定義的方法

<div id="app" v-bind:title="message" v-if="seen">
      {{info}}
     <button v-on:click="changeInfo">按鈕</button>
</div> var app = new Vue({ el: '#app', data: { info:"將鼠標懸停上來查看效果", message: '如今時間是'+new Date().toLocaleString(), seen:true 
 }, methods:{ changeInfo:function(){ this.info = "我是修改後的顯示信息info", this.message = "我是修改後的鼠標懸停提示信息" } } })

    注意在 changeInfo方法中，咱們更新了應用的狀態，但沒有觸碰 DOM——全部的 DOM 操做都由 Vue 來處理，編寫的代碼只須要關注邏輯層面便可。

    ②雙向綁定：v-model 指令，它能輕鬆實現表單輸入和應用狀態之間的雙向綁定

<div id="app" v-bind:title="message" v-if="seen">
      <input type="text" name="user_name" v-model:value="user_name">
      <p style="color: red;">
          {{user_name}}
      </p>
</div>

        var app = new Vue({
            el: '#app',
            data: {
                info:"將鼠標懸停上來查看效果",
                message: '如今時間是'+new Date().toLocaleString(),
                seen:true,
                user_name:""
              },
              methods:{
                  promptInfo:function(){
                      this.info = "我是修改後的顯示信息info",
                      this.message = "我是修改後的鼠標懸停提示信息"
                  }
              }
        })

 

 

（4）組件化應用構建

    在Vue中，一個組件就是擁有預約義選項的vue實例。註冊組件

// 註冊組件:定義名爲 todo-item 的新組件
Vue.component('todo-item',{ template:'<li>這是個待辦項</li>' });

    構建組件模板

<ol>
  <!-- 建立一個 todo-item 組件的實例 -->
  <todo-item></todo-item>
</ol>

    可是這樣會爲每一個待辦項渲染一樣的文本，這看起來並不炫酷。咱們應該能從父做用域將數據傳到子組件纔對。讓咱們來修改一下組件的定義，使之可以接受一個 prop：

Vue.component('todo-item', {
  // todo-item 組件如今接受一個"prop"，相似於一個自定義特性。 這個 prop 名爲 todo。
  props: ['todo'], template: '<li>{{ todo.text }}</li>' })

    接下來可使用 v-bind 指令將待辦項傳到循環輸出的每一個組件中：

<div id="app-7">
  <ol>
    <!--
      如今咱們爲每一個 todo-item 提供 todo 對象 todo 對象是變量，即其內容能夠是動態的。 咱們也須要爲每一個組件提供一個「key」，以後再 做詳細解釋。 --> <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id" ></todo-item> </ol> </div> Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) var app7 = new Vue({ el: '#app-7', data: { groceryList: [ { id: 0, text: '蔬菜' }, { id: 1, text: '奶酪' }, { id: 2, text: '隨便其它什麼人吃的東西' } ] } })

 

 

.