技術標籤：Vue學習筆記

Vue的基本操作

文章目錄

• Vue的基本操作
• 前言
• 二、Vue的基本操作
• • 1.Vue的元素繫結
  • 2. Vue的資料互動
  • 3. Vue的if / show 異同點
  • • 3.1 **"==="** 需要注意
    • 3.2 v-show
  • 4. Vue的屬性繫結
  • 5. Vue的CSS互動
  • 6. v-html, v-once, v-for 列表顯示cats資料
  • 7. 新增Cat資料,
  • • 1. push
    • 2. v-on:keyup.enter
• 總結

前言

提示：這裡可以新增本文要記錄的大概內容：
例如：隨著人工智慧的不斷髮展，機器學習這門技術也越來越重要，很多人都開啟了學習機器學習，本文就介紹了機器學習的基礎內容。

提示：以下是本篇文章正文內容，下面案例可供參考

二、Vue的基本操作

1.Vue的元素繫結

程式碼如下（示例）：

<div id="root">
 <hi>{{ greeting}}</hi>
</div>

new Vue({
 el:'#root',
 data:{
   greeting:'Hello, Vue',
 }
})

2. Vue的資料互動

程式碼如下（示例）：

<div id="root">
 <hi>{{ greeting}}</hi>
 <br
 
 />
 <input v-model='greeting'>
</div>

new Vue({
 el:'#root',
 data:{
   greeting:'Hello, Vue',
 }
})

3. Vue的if / show 異同點

3.1 “===” 需要注意

<div id="root">
 <hi>{{ greeting}}</hi>
 <br />
 <div v-if="count === 1">
    red
 </div>
 <
 
div v-else-if="count === 2">
    green
 </div>
 <div v-else="count === 3">
    orange
 <div>
 <input v-model='greeting'>
</div>

new Vue({
 el:'#root',
 data:{
   greeting:'Hello, Vue',
   count:1
 }
})

3.2 v-show

<div id="root">
 <hi>{{ greeting}}</hi>
 <br />
 <div v-show="count === 1">
    red
 </div>
 <input v-model='greeting'>
</div>

new Vue({
 el:'#root',
 data:{
   greeting:'Hello, Vue',
   count:1
 }
})

主要不同是show在客戶端顯示"display:none" if語句直接隱藏。

4. Vue的屬性繫結

<div id="root">
 <hi>{{ email}}</hi>
 <br />
 <button onclick="alert('signed up')" :disabled="email.length < 2">
  Submit
 </button>
</div>

new Vue({
 el:'#root',
 data:{
   email:'[email protected]',
   count:1
 }
})

5. Vue的CSS互動

**[]**是需要在做互動時重點注意部分

<div id="root">
 <hi>{{ email}}</hi>
 <br />
 <input v-model='email' :class="[email.length < 2 ? 'red':'green']">
</div>

.red{
  border:2px solid red;
}

.green{
  border:2px solid green;
}

new Vue({
 el:'#root',
 data:{
   email:'[email protected]',
   count:1
 }
})

6. v-html, v-once, v-for 列表顯示cats資料

<div id="root">
  <ul>
     <li v-for="cat in cats">{{cat}}</li>
      <br />
     <li v-for="cat in fishs">{{ cat.name}}</li>
  </ul>
</div>

opp = new Vue({
el:'#root',
data:{
 cats:[
   'kitkat',
   'fish',
   'henry',
   'bosco',
   'melanthios'
 ],
 fishs:[
 { name: 'kitkat'}, {name:'fish'}]
}
})

7. 新增Cat資料,

1. push

2. v-on:keyup.enter

<div id="root">
 <input v-model="newCat" v-on:keyup.enter="addKitty">
 <button v-on:click="addKitty">
  + Add
 </button>
 <ul>
  <li v-for="cat in cats"> {{ cat }}</li>
  <br />
  <li v-for="cat in fishs">{{ cat.name}}</li>
 </ul>
</div>

opp = new Vue({
el:'#root',
data:{
  cats:[
   'kitkat',
   'fish',
   'henry',
   'bosco',
   'melanthios'
  ],
  fishs:[
     { name: 'kitkat'}, 
     {name:'fish'}],
  newCat:''
},
methods:{
   addKitty:function(){
      return this.fishs.push({name:this.newCat})
   }
}
})

總結

提示：這裡對文章進行總結：
例如：以上就是今天要講的內容，本文僅僅簡單介紹了pandas的使用，而pandas提供了大量能使我們快速便捷地處理資料的函式和方法。