1、什么Vue

• ? 用js封裝的框架,主要讓數(shù)據(jù)渲染更加簡單
• ?Vue主要是通過一個(gè)Vue對象和網(wǎng)頁內(nèi)容進(jìn)行關(guān)聯(lián)，關(guān)聯(lián)后修改Vue對象就可以直接修改網(wǎng)頁內(nèi)容
• ?在工程要用Vue，需要先導(dǎo)入vue.js文件
  --

2、Vue對象 - js

?el屬性 - 字符串，傳選擇器(一般寫id選擇器), 將當(dāng)前創(chuàng)建的Vue對象和html中的標(biāo)簽進(jìn)行關(guān)聯(lián)
?data屬性 - 對象, 對象的屬性和對應(yīng)的值程序員自己確定，沒有要求; 通過對象的屬性提供數(shù)據(jù)
?methods屬性 - 對象, 對象的屬性名隨便命名，屬性值必須函數(shù); 通過對象屬性提供方法
?computed屬性 - 對象,對象的屬性名隨便命名, 屬性值必須函數(shù), 函數(shù)的返回值就是使用屬性的值

3、Vue指令 - html

?1)標(biāo)簽內(nèi)容 - {{Vue屬性名}}
?2)標(biāo)簽屬性 - v-bind:標(biāo)簽屬性 = 'Vue屬性名'
?3)if語句 - v-if='Vue屬性名' (如果Vue屬性值是true對應(yīng)的標(biāo)簽就顯示，否則就隱藏)
?4)循環(huán)結(jié)構(gòu) - v-for = '變量 in 類型是數(shù)組的Vue屬性'
?5)雙向綁定 - v-model='Vue屬性名' (一般在表單標(biāo)簽中有效)

<!-----------1.綁定標(biāo)簽內(nèi)容-------------->
<p id="app1">{{pContent}}</p>

<div id="app2">
    <p>哈哈哈:{{pc}}=====</p>
    <font>{{fontc}}</font>
    <a href="">{{ac}}</a>
    <p>{{num*10}}</p>
</div>
<script type="text/javascript">
    //創(chuàng)建Vue對象
    var app1 = new Vue({
        el:'#app1',
        data:{
            message: '我是段落1',
            message1: '我不是段落1',
            pContent: '我是段落，我是段落',
        }
    })
    
    var app2 = new Vue({
        el:'#app2',
        data:{
            pc:'我是段落2',
            fontc: '我是font1',
            ac: '我是超鏈接1',
            num: 100
        }
    })
    
</script>

<!---------------2.標(biāo)簽屬性-------------------->
<hr />
<div id="app3">
    <img v-bind:src="imageUrl" v-bind:title="imgaeTitle"/>
    <input v-bind:value="userName" />
    <p v-bind:style="pStyle">{{pc}}</p>
</div>
<script type="text/javascript">
    var a = '你好'
    var app3 = new Vue({
        el:'#app3',
        data: {
            imageUrl: 'img/a1.jpg',
            imgaeTitle: '圖片1',
            userName: '張三',
            pc: a,
            pStyle: 'color:red;'
        }
    })
    
    app3.imageUrl = 'img/anchor.png'
    
</script>

<!----------------3.if語句-------------------->
<hr />
<div id="app4">
    <p v-if="age>=18">網(wǎng)吧: 請進(jìn)</p>
    <p v-if="isShow">我是段落4</p>
</div>
<script type="text/javascript">
    
    var app4 = new Vue({
        el:'#app4',
        data:{
            age:80,
            isShow: true
        }
    })
</script>

<!----------------4.for循環(huán)----------------->
<hr />
<div id="app5">
    <p v-for="name in names">{{name}}</p>
    
    <div v-for="goods in goodsList">
        <p class="goodsname">{{goods.name}}</p>
        <p class="goodsprice">￥{{goods.price}}.00</p>
        <hr />
    </div>
</div>
<script type="text/javascript">
    var app5 = new Vue({
        el: '#app5',
        data:{
            names: ['香水有毒', '沖動(dòng)的懲罰', '2002年的第一場雪', '那一夜', '情人'],
            goodsList: [
                {name:'辣條', price:1},
                {name:'泡面', price:3.5},
                {name:'二鍋頭', price:8},
                {name:'火腿腸', price:2}
            ]
        }
    })
</script>

<!----------------5.雙向綁定---------------->
<hr />
<div id="app6">
    <p>{{userName}}</p>
    <input v-model="userName" />
    
    <select v-model="city">
        <option value="重慶">重慶</option>
        <option value="成都">成都</option>
        <option value="北京">北京</option>
    </select>
    
    <p>{{city}}</p>
    
</div>
<script type="text/javascript">
    var app6 = new Vue({
        el: '#app6',
        data:{
            userName: '張三',
            city: '重慶'
        }
    })
</script>

Vue事件綁定

<!---------------1.綁定事件------------------>
<div id="app1">
    <!--直接和methods中的函數(shù)綁定-->
    <button v-on:click="buttonAction">按鈕</button>
    
    <br />
    <button v-on:click="num++">+</button>
    <font>{{num}}</font>
    <button v-on:click="num--">-</button>
    
    <div v-on:click="div1Action" style="width: 200px; height: 200px; background-color: aquamarine;">
        <!--綁定click事件并且捕獲-->
        <div v-on:click.stop="div2Action" style="width: 100px; height: 100px; background-color: red;">
            
        </div>
    </div>
    
</div>
<script type="text/javascript">
    var app1 = new Vue({
        el: '#app1',
        data:{
            num: 100
        },
        methods:{
            buttonAction: function(){
                //this是當(dāng)前Vue對象
                alert('按鈕被點(diǎn)擊')
            },
            addAction:function(){
                this.num ++ 
            },
            subAction: function(){
                this.num -- 
            },
            div1Action:function(evt){
                console.log(arguments)
                //methods中的函數(shù)中的this都是當(dāng)前Vue對象
                console.log(this)
                alert('div1被點(diǎn)擊')
                
                
            },
            div2Action:function(evt){
                alert('div2被點(diǎn)擊')
                
                //捕獲事件
                //evt.stopPropagation()
            }
            
        }
        
    })
    
    //注意: 創(chuàng)建Vue對象的時(shí)候，添加到data、methods、computed中所有的屬性，本質(zhì)都會(huì)綁定到Vue對象上
    console.log('num:', app1.num)
    app1.buttonAction()
    
</script>

計(jì)算屬性

<div id="app1">
    <div class="goods" v-for="goods in goodsList" v-bind:style="background">
        <p class="name">{{goods.name}}</p>
        <p class="price">￥{{goods.price}}</p>
        <hr />
    </div>
    
    <p>總價(jià):{{totalPrice}}</p>
    <p>{{num1+num2}}</p>
    
    <input type="color" v-model="color" />
</div>
<script type="text/javascript">
    var app1 = new Vue({
        el: '#app1',
        data:{
            color:'#ff0000',
            goodsList: [
                {name:'辣條', price:1},
                {name:'泡面', price:3.5},
                {name:'二鍋頭', price:8},
                {name:'火腿腸', price:2},
                {name:'鹵蛋', price:1}
            ],
            num1: 100,
            num2: 200
        },
        computed:{
            background: function(){
                return 'background-color:'+this.color+';'
            },
            totalPrice:function(){
                var sum1 = 0
                for(var goods of this.goodsList){
                    sum1 += goods.price
                }
                
                return sum1
            }
        }
    })
    
</script>