前端Vue基礎學習

時間 2019-12-08

標籤前端 vue 基礎學習简体版

原文原文鏈接

Vue基礎

對與vue的簡潔明瞭的乾貨分享，適合小白學習觀看，若是有筆誤或者想了解更多的，請給筆者留言，後續會繼續分享，從零開始的vue相關經驗css

一、建立vue實例

<div id="app"></div>
const vm = new Vue({
    el:'app',
    data:{
        
    }
})

二、插值語法

 <!-- 雙花括號將數據當成普通文本顯示
        其中能夠寫運算，或者判斷等表達式運算
    容易遭受xss攻擊 -->
    <div id="box">
        {{name}}
       <p> {{20>30?'小於':'大於'}}</p>
        <p>{{10+20}}</p>
     <!-- v-html 能夠將標籤解析 -->
    <p v-html="name"></p>
    <p v-if="isShow">我是動態建立和刪除</p>
    <p v-show="isShow">我是動態隱藏和顯示</p>
      <!-- 簡寫
        帶有v稱之爲指令
        v-bind ：class = :class//控制通常屬性
        v-on click = @click//綁定事件
        v-if  isShow 爲true,建立，false刪除
        v-show  ....顯示，...,隱藏
    -->
    <button v-on:click="handleClick">點擊</button>
    <p v-bind:class="isShow?'aa':'bb'"></p>
    </div>
    <script>
        var vm = new Vue({
            el:"#box",
            data:{
                name:"<b>xiaoming<b/>",
                isShow:true,
                
            },
            methods:{
                handleClick(){
                    console.log(11);
                    this.isShow=false;
                }
            }
         })
        </script>

三、條件渲染

<body>
    <div id="box">
        <p v-if="isCreated">渲染刪除</p>
        <p v-else>qqq</p>
        <!-- 渲染多個使用template  -->
        <template v-if="isCreated">
            <p>ddddd</p>
            <p>ddddd</p>
            <p>ddddd</p>
            <p>ddddd</p>
            <p>ddddd</p>
        </template>
        <!-- v-show不支持template -->
        <p v-show="isShow">顯示隱藏</p>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    const vm = new Vue({
        el:"#box",
        data:{
            isCreated:true
        }
    })
</script>

四、列表渲染

body>
    <div id="box">
        <!-- v-for 循環渲染，能夠用 in/of 能夠有2個參數（data遍歷的值，index下標） -->
        <!-- 每一項應該有一個惟一的key 通常爲id -->
        <!-- 列表渲染，能夠經過改變數組動態渲染當影響到數組自己時會刷新渲染-->
        <!-- 但經過索引改變沒法影響渲染 解決方法vue.set(vm.datalist,0,newvalue)-->
        <input type="text" v-model="mytext">
        <!-- 過濾 -->
        <ul>
            <!-- <li v-for="(data,index) in datalist" :key="index">
                {{data}} -- {{index}}
            </li> -->
            <li v-for="(data,index) in cmputeddatalist" :key="index">
                {{data}} -- {{index}}
            </li>
        </ul>
        
    </div>
</body>
    <script src="../vue.js"></script>
    <script>
        const vm = new Vue({
            el:"#box",
            data:{
                datalist:['aa','bb','ccc'],
                mytext:"",
            },
            cmputed:{
                cmputeddatalist:function(){
                    return this.datalist.filter(item=>item.indexof(this.mytext)>-1)
                }
            }
        })
    </script>

五、事件處理

 <div id="box">
<!-- 事件處理方法一：直接觸發函數代碼表達式 -->
<p>{{count}}</p>
        <button @click="count=count-1">-</button>
        <button @click="count=count+1">+</button>
        <!-- 二：綁定函數名,系統默認將事件對象傳過去 -->
        <p>{{name}}</p>
        <button @click="handleClick">click</button>
        <!-- 三：綁定函數須要傳參數使用要傳事件對象傳$event -->
        <button @click="handleClick1(1,2,$event)">click</button>
        <!-- vue中事件觸發遵循冒泡 阻止冒泡在click.stop-->
        <!-- 事件修飾符 .stop阻止冒泡  prevent阻止默認事件 once只會觸發一次 self只有事件源爲自己時才能觸發,修飾符能夠串聯使用.stop.prevent -->
        <ul @click="ulclick ">
            <li  @click="liclick">1111</li>
        </ul>
        <!-- 鍵值修飾符 enter回車鍵，space空格鍵 -->
        <input type="text" v-model="text" @keydown.enter="enter">{{newtext}}
    </div>
        <script src="../vue.js"></script>
        <script>
            var vm =new Vue({
                el:"#box",
                data:{
                    count:1,
                    name:"xiaoming",
                    text:"",
                    newtext:""
                },
                // methods中的方法，能夠在this的$options.methods中找到，能夠實現方法互用
                methods:{
                    enter(){
                        this.newtext=this.text
                    },
                    handleClick(ev){
                        console.log(ev.target);
                        this.name="aaaa"
                    },
                    handleClick1(a,b,event){
                        console.log(a,b,event.target)
                    },
                    ulclick(){
                        console.log('ul的點擊')
                    },
                    liclick(){
                        console.log('li的點擊')
                    }
                }
            })
        </script>

六、css與style的綁定

<style>
        .aa{
            background: red;
        }
        .bb{
            background: yellow;
        }
    </style>
</head>

<body>
   

    <!-- 不會覆蓋只是添加到class中  -->
    <!-- v-bind 可使用數組寫法，三目運算符，和對象寫法 -->
    <div id="app">
            <p class="red" :class="isshow?'aa':'bb'">css樣式</p>
            <p :style="obj">對象樣式</p>
            <p :style="[obj,obj2]">數組樣式</p>
    </div>
    <script src="../vue.js"></script>
    <script>    
        const vm = new Vue({
            el:"#app",
            data:{
                isshow:false,
                obj:{
                    background:"red",
                },
                obj2:{
                    fontSize:"30px"
                }
            }
        })
        // 在vue中向font-size:30px,要寫成fontSize:"30px";
    </script>

七、表單的輸入與綁定

<body>
    <!-- 表單中v-model 有value時綁定value,單選框中綁定checked屬性 -->
    <div id="box">
        <input type="text" v-model="value">{{value}}<br/>
        
        <input type="checkbox" v-model="isChcked">{{isChcked}}<br/>
           
<!-- 綁定多個的時候綁定數組，必須有value值，點擊會把選中的加入數組中 -->
        <input type="checkbox" v-model="checkgroup" value="react">react<br/>
        <input type="checkbox" v-model="checkgroup" value="vue">vue<br/>
        <input type="checkbox" v-model="checkgroup" value="jquery">jquery<br/>
        {{checkgroup}}
    <!-- 修飾符 lazy 失去焦點時纔會同步渲染,number將輸入值轉換爲number trim默認清除首尾空格-->

    <input type="text" v-model.lazy="name">{{name}}<br/>
    <input type="number" v-model.number="age">{{age}}<br/>
    <input type="text" v-model.trim="text">|{{text}}|<br/>


    </div>
</body>
<script src="../vue.js"></script>
<script>
    const vm = new Vue({
        el:"#box",
        data:{
            value:"",
            isChcked:false,
            checkgroup:[],
            name:"",
            age:"100",
            text:""
        }
    })
</script>