vue安裝以及指令的基礎使用

阿新 • • 發佈：2020-11-27

Vue初識

1.vue特點：易用，靈活，高效

2.漸進式：根據需求的不同載入不同模組

3.庫和框架的區別：

庫：jq ....js 功能單一

框架:vue react angular

4.vue核心：

資料驅動

元件化

5.vue安裝

a.cdn方式需要引入的開發版本

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

b.npm install vue

<script src="./node_modules/vue/dist/vue.js"></script>

c.直接下載vue.js

<script src="./vue.js"></script>

6.建立關聯

1)不能繫結到 html,body上

2)要繫結到頁面的唯一元素上，也就是繫結id

3)如果非要繫結到類名上，那麼只顯示第一個內容

Vue常見的指令

v-text/v-html v-html識別標籤，v-text不識別標籤

 <!-- 插值表示式 鬍子語法 -->
 {{name}}
 <!-- {{a}} 這是沒有宣告錯誤的 -->
 <!-- 解決雙括號閃爍問題 通過指令-->
 <div v-html='name'></div> 

 <div v-text='name'></div>

v-if,v-show v-if:直接移除元素 v-show:通過display：none設定元素應用場景：如果頻繁切換元素需要用v-show

 <div v-if='false'>我是要顯示的元素111</div>
 <div v-if='isShow'>我是要顯示的元素2222</div>

v-if/v-show v-else-if v-else 注意：v-if v-else 中間不允許有內容

 <div v-if='flag'>我是測試顯示的</ 
div>
 <div>我是中間內容</div>
 <div v-else>我是測試隱藏的</div>

v-bind 繫結屬性

  <!-- v-bind簡寫: -->
  <div :abc='abc'>我是div</div>

v-on 繫結方法

<!-- v-on：的簡寫方式:@ -->
<button @click='fn'>點選彈出內容</button>

v-model:資料的雙向繫結只能應用於表單元素

 <div >{{content}}</div>
 <input type="text" v-model='content'>

繫結樣式

:class 方式繫結:

 <div class="box div3">我是div</div>
 <!-- 通過繫結屬性的方式 -->
 <div :class='box'>我是div2</div>
 <!-- 通過三元方式新增樣式 -->
 <div :class='[1==2?box:div3]'>我是div3</div>
 <!-- 複合樣式-->
 <div :class='box+" div3"'>我是div4</div>

:style 方式繫結:

<div style='width: 100px;height: 100px;'>我是div</div>
<!-- style的行內樣式 -->
<div :style='obj'>我是div2222</div>
<div :style='[obj,obj1]'>我是div33333</div>

知識點: :key的作用; 繫結一個唯一值，避免勾選不正確的問題與v-for的固定搭配


key使用例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div v-for='(item,index) in list' :key='item.id'>
            <input type="checkbox">
           {{index+1}}---- {{item.name}}---{{item.age}}
          
        </div>
        <div>
            姓名: <input type="text" v-model='user.name'>
        </div>
        <div>
            年齡: <input type="text" v-model='user.age'>
        </div>
        <div>
            <button @click = 'add'>新增</button>
            <button @click = 'reset'>重置</button>
        </div>
    </div>

</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app', 
        data: {
            user:{
                name:'張三',
                age:20
            },
            list:[
                {id:1,name:'李四',age:15},
                {id:2,name:'王五',age:25},
                {id:3,name:'趙六',age:35},
            ]
        },
        methods: {
            // 重置資料  this 指的就是vue的例項
            reset(){
               this.user={
                   name:'',
                   age:''
               } 
            },
            // 增加
            add(){
                // this.list.push({id:4,name:'王麻子',age:18})
                let obj = {id:4,name:'王麻子',age:18}
                this.list.splice(2,0,obj)
            }
        },
    })
</script>

</html>