Vue基础语法：属性绑定、事件绑定、表单控件、计算属性

1、属性绑定

    <style>
        .color {
            color: red;
        }
        .ftred {
            color: red;
            font-size: 22px;
        }
    </style>

属性绑定指令  v-bind ，可以简写为 :   即v-bind:mydata === :mydata

     <p title="标签的描述信息" v-bind:mydata="msg" :aaa="msg"> 普通的标签 </p>

1. 将类名作为字符串存储在变量中 ，绑定一个类名

    绑定多个类名，以数组的方式添加类名

    <p :class="myCls" class="aaa"> 段落标签 </p>
    <p :class="myCls1" class="ccc"> 段落标签 </p>

 2. 以对象的方式添加类名，对象属性名为类名，属性值为布尔值，true时添加类名，false时移除类名

    <p :class="clsObj" class="bbb"> 段落标签2 </p>
    <p style="background:red; font-size:22px"> 段落标签3 </p>

3. 以对象的方式添加css样式

    <p :style="sty"> 段落标签3 </p>
    <p :style="{ background: 'red', fontSize: ft }"> 段落标签4 </p>

4. 以数组方式添加css样式

    <p :style="[{background:'red'}, {fontSize: '22px'}]" > 段落标签5 </p>

5. vue对象： 

<script>
    var vue = new Vue({
        el: '#demo',
        data: {
            msg:'普通字符串',
            myCls: 'ftred', 
            myCls1: ['ftred', 'aaa'],
            clsObj: {
                ftred: true
            },
            sty: {
                background: 'red',
                fontSize: '22px'
            },
            ft: '22px'
        }
    });
</script>

2、事件绑定

事件绑定的方法三种：

     常用： document.querySelector('button').onclick = function(){};

     方法2 ： document.querySelector('button').addEventListener('click', function(){}, boolean);

     方法3： <button οnclick="func()">

事件绑定指令  v-on，简写为@

     v-on:click === @click

注意：执行函数可以加()，可以忽略()

     不加()时，意味着不传递参数，默认的参数对象指代的就是event事件对象

     加()时，可以传递参数，$event指代的是事件对象

事件修饰符：

          .prevent    等价于ev.preventDefault() 阻止默认事件的执行

          .stop    等价于   ev.stopPropagation() 阻止事件的传播 默认是冒泡

          .capture    等价于 addEventListener('click', function, false)， 冒泡，true为捕获   改变事件执行的顺序，由冒泡变成捕获

          .once    一次性事件执行

          .self    当事件执行在自身对象上时才会执行

<div id="demo">
    <button id="btn" v-on:click.once="btnClick"> 点击 </button>
    <button id="btn1" @click="btnClick2(12, $event)"> 再次点击 </button>
    <a href="http://www.baidu.com" @click.prevent="show"> 百度一下 </a>

    <div @click.capture="btnClick2">
        <p @click="btnClick">点击</p>
    </div>

    <button > 增加类名 </button>
    <button> 移除类名 </button>
</div>

    <script>
        var vue = new Vue({
            el: '#demo',
            data: {
                msg: '普通字符串',
                num: 100
            },
            // methods属性中放置大量的函数，
            methods: {
                btnClick: function (ev) {
                    console.log(ev)
                    console.log('点击了');
                    console.log(this); // vue实例对象
                },
                btnClick2: function (num, ev) {
                    console.log(ev);
                    console.log('再次点击')
                },
                show: function (ev) {
                    console.log('阻止了')
                    // 阻止默认事件
                    // ev.preventDefault();
                }
            }
        })
        // data/methods中所设置的属性，会自动挂载在vue实例中
        //    console.log( vue );
        //    vue.btnClick();

        //    var btn = document.querySelector('#btn');
        //    btn.onclick = function() {
        //        console.log(123456789)
        //    }

        //    var btn = document.querySelector('button');

        // 函数创建时，函数内部的代码过程已经创建成功，this的指向也已经固定了，
        //    function show() {
        //        console.log(this);
        //    }

        // 事件触发的函数创建，页面刷新时，函数代码并没有创建，过程也不存在。
        //    btn.onclick = function(ev){
        //        console.log(this);  // button对象
        //    }
        /// <button onclick="show()">  // this指向的 window对象



        var obj = {
            name: 'lucy',
            run: function () {
                return function () {
                    console.log(this);
                }
            },
            props: {
                name: 'lily',
                sing: function () {
                    var that = this;
                    return function () {
                        console.log(that);
                    }
                }
            }
        }
        //    var mm = obj.run();
        //    mm();
        //    obj.run()();   // window对象
        //    obj.props.sing()() // props对象

        console.log('a' && 'b');  // b
        console.log('a' && 0);  // 0
        console.log(0 && undefined) // 0
        console.log(0 || undefined)  // undefined
        console.log('a' || 0);   // a

        var k
        for (var i = 0, j = 0; i < 10, j < 15; i++, j++) {
            k += i + j;
        }
        console.log(k); // undefined

        for (var i = 0; i < 15; i += 2) {
            if (i % 3 == 0) {
                console.log(i)
            }
        }
    </script>

3、表单控件

表单控件指令： v-model ，被称为双向数据绑定指令

通过改变input输入框中的数据，进而改变data中某个变量的值

三元运算符是if..else的语法糖，简写写法  条件?真：假

v-model 是 :value 和 @input的语法糖

修饰符：

.lazy  将Input事件转换成change事件

.number  将字符串类型转换成数字类型

.trim  去掉字符串前后的空格

    <div id="demo">
        <input type="text" v-model.lazy="msg" placeholder="提示信息" />
        <p> {{ msg }} </p>
        <button @click="msg='新数据'"> 改变 </button>
        <br>

        <input type="text" :value="message" @input="msgChange" placeholder="请输入内容" />
        <p> {{ message }} </p>

        <br>
        <input type="text" v-model.number="num" />

        <p> {{ num + num }} </p>
        <br>

        <button @click="isMale=!isMale"> 切换性别 </button>
        <input type="radio" name="isMale" v-model="isMale" value="true"> 男
        <input type="radio" name="isMale" v-model="isMale" value="false"> 女

        <br>

        <input type="checkbox" name="lesson" v-model="lesson" value="js"> js
        <input type="checkbox" name="lesson" v-model="lesson" value="css"> css
        <input type="checkbox" name="lesson" v-model="lesson" value="html"> html
        <p> {{ lesson }} </p>

        <select name="city" v-model="city">
            <option value=""> 请选择课程 </option>
            <option value="html"> html </option>
            <option value="css"> css </option>
            <option value="js"> js </option>
            <option value="java"> java </option>
        </select>
        <p> {{ city }} </p>

        <br>
    </div>

    <script>
        var vue = new Vue({
            el: '#demo',
            data: {
                msg: '普通字符串',
                message: '即将改变数据',
                num: '12',
                isMale: true,
                lesson: ['js'],
                city: 'css'
            },
            methods: {
                msgChange: function (ev) {
                    // console.log(ev);
                    var val = ev.target.value;
                    console.log(val)
                    this.message = val;
                }
            }
        })

    </script>

4、计算属性

<script>
    var vue = new Vue({
        el:'#demo',
        data: {
            num: 100
        },
        // methods放置方法， 调用一次，方法重新执行一次 ，函数执行过程需要重新走一遍
        // 封装的是省时的过程性代码，不注重最终结果
        methods: {
            calc: function() {
                // 省略多行代码
                console.log('耗时1小时')
            }
        },
        // 如果一个函数，比较耗时长，或者包含有大量的逻辑运算时，并需要得到最终的结果，该函数是放置在computed属性中
        // 特点： 当内部依赖的某个变量没有发生变化时，再次调用函数时，会直接复用上次的计算结果。
        // computed本质是个方法，不太一样的地方是，调用时，一定不要加()，加了会报错
        computed: {
            jieCheng: function() {
                var aa = this.num * this.num;
                // return '最终结果'
                return aa;
            }
        }
    })
</script>