第029篇：Vue

1、什么Vue

•   用js封装的框架,主要让数据渲染更加简单
•  Vue主要是通过一个Vue对象和网页内容进行关联，关联后修改Vue对象就可以直接修改网页内容
•  在工程要用Vue，需要先导入vue.js文件
  --

2、Vue对象 - js

 el属性 - 字符串，传选择器(一般写id选择器), 将当前创建的Vue对象和html中的标签进行关联
 data属性 - 对象, 对象的属性和对应的值程序员自己确定，没有要求; 通过对象的属性提供数据
 methods属性 - 对象, 对象的属性名随便命名，属性值必须函数; 通过对象属性提供方法
 computed属性 - 对象,对象的属性名随便命名, 属性值必须函数, 函数的返回值就是使用属性的值

3、Vue指令 - html

 1)标签内容 - {{Vue属性名}}
 2)标签属性 - v-bind:标签属性 = 'Vue属性名'
 3)if语句 - v-if='Vue属性名' (如果Vue属性值是true对应的标签就显示，否则就隐藏)
 4)循环结构 - v-for = '变量 in 类型是数组的Vue属性'
 5)双向绑定 - v-model='Vue属性名' (一般在表单标签中有效)

<!-----------1.绑定标签内容-------------->
<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">
    //创建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.标签属性-------------------->
<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">网吧: 请进</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循环----------------->
<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: ['香水有毒', '冲动的惩罚', '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中的函数绑定-->
    <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是当前Vue对象
                alert('按钮被点击')
            },
            addAction:function(){
                this.num ++ 
            },
            subAction: function(){
                this.num -- 
            },
            div1Action:function(evt){
                console.log(arguments)
                //methods中的函数中的this都是当前Vue对象
                console.log(this)
                alert('div1被点击')
                
                
            },
            div2Action:function(evt){
                alert('div2被点击')
                
                //捕获事件
                //evt.stopPropagation()
            }
            
        }
        
    })
    
    //注意: 创建Vue对象的时候，添加到data、methods、computed中所有的属性，本质都会绑定到Vue对象上
    console.log('num:', app1.num)
    app1.buttonAction()
    
</script>

计算属性

<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>总价:{{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>