Vue學習筆記2

聲明式渲染

vue的引入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

初步使用vue

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

錯誤筆記：1.new Vue中的V忘記大寫，2.el的#app忘了加引號以及忘了在末尾加逗號

v-bind指令

<div id="app">
    <span v-bind:title="message">
      鼠標懸停幾秒鐘查看此處動態綁定的提示信息！
    </span>
  </div>
  
  <script>
    var app2=new Vue({
    el: '#app',
    data:{
      message: 'v-bind特性被稱爲指令。指令帶有前綴 v-，以表示它們是 Vue 提供的特殊特性。'
    }
    })
  </script>

v-bind 特性被稱爲指令。指令帶有前綴 v-，以表示它們是 Vue 提供的特殊特性。在這裏，該指令的意思是：「將這個元素節點的 title 特性和 Vue 實例的 message 屬性保持一致」。

條件與循環

v-if

<div id="app">
   <p v-if="seen">seen爲false時就會消失</p>
  </div>
  
  <script>
    var app2=new Vue({
    el: '#app',
    data:{
      seen: true
    }
    })
  </script>

v-for

<div id="app">
   <p v-for="todo in todos">{{todo.text}}</p>
  </div>
  
  <script>
    var app2=new Vue({
     el: '#app',
     data:{
      todos:[
        {text:'學習JavaScript'},
        {text:'學習Vue'},
        {text:'整個牛項目'}
      ]
     }
    })
  </script>

"{{}}"中就是想要顯示Vue實例中屬性提供的內容

處理用戶輸入

爲了讓用戶和你的應用進行交互，咱們能夠用 v-on 指令添加一個事件監聽器，經過它調用在 Vue 實例中定義的方法：
v-on

<div id="app">
   <p>{{message}}</p>
    <button v-on:click="reverseMessage">反轉字符串</button>
  </div>
  
  <script>
    var app2=new Vue({
     el: '#app',
     data:{
      message:'hello v-on'
     },
     methods:{
      reverseMessage:function(){
        this.message=this.message.split('').reverse().join('')
       }
     }
    })
  </script>

Vue 還提供了 v-model 指令，它能輕鬆實現表單輸入和應用狀態之間的雙向綁定。
v-model

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

當修改input中的內容時，標籤p中的message在頁面上顯示的文字也跟着改變。