VUE知識day2

時間 2019-11-19

標籤 vue 知識 day2 day 简体版

原文原文鏈接

VUE用途

VUE：是用來作單頁面的css

掘金網單擊時會建立對象與銷燬，減小與服務器的交互html

1模塊使用-------------------
    1導出------------
    export default ooo
    2導入--------------：
    import xxx from ooo
　　3掛載
　　4 使用

2webpack:前端工具打包機-----------------
    做用它能降HTML、css/js。png、font 圖片進行打包
插件（好比輪播圖）:一個功能。js文件
組件：boostrap組件的下拉列表



混淆：把function裏的變量進行縮寫成一個字母

grunt
gulp

指令系統

1條件渲染

　　1.1:v-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>
<body>
    <div id="block">
        <h3>{{title}}</h3>
　　　　
　　　　　　------------------------------------------------------------------
        <div v-if='show'>錢到碗裏來</div>#1：data裏show的值爲真的話顯示‘錢到碗裏來’

　　　　　　----------------------------------------------------------------
        <div v-else>爲假顯示</div>:2：show爲假的話顯示‘爲假顯示’
　　　　　　
 ----------------------------------------------------------------

        <div v-if="type==='a'">
            老大
        </div>
        
        <div v-else-if="type==='b'">老二</div>
        <div v-else="type==='c'">老幺</div>
        
    
    <script src="vue.js"></script>
    <script>
        // 1.建立vue實例化對象
        // 參數

        var block = new Vue({
            el:"#block",
            // 全部的數據都放在數據屬性中
            data:{
               title:'好運來',
//             show:false,
//             type:'c'

               
            }
        })

    </script>
</body>
</html>

v-if

　　1.2：v-show

<body>
<div id="app">
    <h1 v-show="ok">Hello!</h1>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    ok: true
  }
})
</script>
</body>

v-show

3:v-if vs v-show：

一種操做用v-if,菜單切換屢次用v-show前端

　　v-if 是「真正」的條件渲染，由於它會確保在切換過程當中條件塊內的事件監聽器和子組件適當地被銷燬和重建。vue

　　v-if 也是惰性的：若是在初始渲染時條件爲假，則什麼也不作——直到條件第一次變爲真時，纔會開始渲染條件塊。webpack

　　相比之下，v-show 就簡單得多——無論初始條件是什麼，元素老是會被渲染，而且只是簡單地基於 CSS 進行切換。web

　　通常來講，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。所以，若是須要很是頻繁地切換，則使用 v-show 較好；若是在運行時條件不多改變，則使用 v-if 較好。v-show:是使用display：none來定義是否顯示gulp

4:v-if與v-for一塊兒使用

v-for指令，後面立刻介紹到。服務器

當v-if與v-for一塊兒使用時，v-for具備比v-if更高的優先級。app

class與style綁定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>
<body>
    <div id="block">
        <h3>{{title}}</h3>
        
        <!--鼠標懸浮到綁定屬性操做時會顯示’好運來‘-->
        <h1 v-show="isShow" v-bind:title="title">綁定屬性操做</h1>
      
    <script src="vue.js"></script>
    <script>
        // 1.建立vue實例化對象
        // 參數

        var block = new Vue({
            el:"#block",
            // 全部的數據都放在數據屬性中
            data:{
               title:'好運來',
                'isShow':true

               
            }
        })

    </script>
</body>
</html>

v-bind(綁定class屬性 )

　該腳本實現了執行方法的功能ide

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    
    <style type="text/css">
        .box1{
            width: 100px;
            height: 100px;
            background: red;
        }
        
        .box2{
            width: 100px;
            height: 100px;
            background: green;
        }
        
        
    </style>
</head>
<body>
    <div id="block">
        <!--<h3>{{title}}</h3>-->
        
        <!--鼠標懸浮到綁定屬性操做時會顯示’好運來‘-->
        <h1 v-show="isShow" v-bind:title="title">綁定屬性操做</h1>
        <!--給盒子綁定紅色背景-->
      <div v-bind:class='{box1:isRed}'></div>
      
      <div class='a' v-bind:class='{box1:isRed,box2:isGreen}'></div>
    
    <!------點擊按鈕執行methods裏的方法----------------------------------->
     <button v-on:click ='clickHandler'>切換</button>
        <!--methods:{
    clickHandler(){
        this.isGreen = !this.isGreen;-->
    <script src="vue.js"></script>
    <script>
        var block = new Vue({
            el:"#block",
            // 全部的數據都放在數據屬性中
            data:{
               title:'好運來',
                'isShow':true,
                'isRed':true ,
                'isGreen':false

               
            },
            methods:{
    clickHandler(){
        
        this.isGreen = !this.isGreen;
    }
}
        })

    </script>
</body>
</html>