Vue Day02

声明式编程：模板的结果和最后显示的效果基本一致

分支结构的使用 v-if v-show

//分支循环结构：判断条件，那个条件成立就显示那个；不成立会被删除掉；
//v-if v-else-if v-else
//v-show:就是display：none；性能hi更高
//v-if：渲染处理的内容控制DOM元素的添加和删除；
//原理：控制元素样式是否显示；频繁的让元素显示和隐藏；

 <div id="app">
        <div v-if='scrore >= 90'>优秀</div>
        <div v-else-if='scrore < 90 && scrore >= 80'>s </div>
        <div v-else-if='scrore < 80 && scrore >= 60'>x</div>
        <div v-else>比较差</div>
        <div v-show='flag'>测试</div>
        <button @click='headel'>按钮</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                scrore: 99,
                flag: false
            },
            methods: {
                headel: function() {
                    this.flag = !this.flag;
                }
            }
        })
    </script>

循环结构的使用遍历数组 V-for

  <div id="app">
        <div v-for='(item,index) in list' :key='index'>{{item}}</div>
        <div v-for='(item,index) in list' :key='index'>{{item}}----{{index}}</div>
        <div v-for='item in myFruits' :key='item.id'>
            <span>{{item.ename}}----{{item.cname}}</span>
        </div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        //v-for 循环结构
        //key 可以帮vue区分不同的元素，给每一兄弟节点添加标识符；在最终渲染DOM的时候提高性能
        //在遍历的时候加上key
        var vm = new Vue({
            el: "#app",
            data: {
                list: ['red', 'pink', 'blue'],
                myFruits: [{
                    id: 1,
                    ename: 'apple',
                    cname: '苹果'
                }, {
                    id: 2,
                    ename: 'orange',
                    cname: '橘子'
                }, {
                    id: 3,
                    ename: 'banana',
                    cname: '香蕉'
                }]
            }
        })
    </script>

循环结构–遍历对象 v-for

<div id="app">
        <div v-if='value==13' v-for='(value,key,index) in obj'>{{value}}---{{key}}---{{index}}</div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        //v-for遍历对象：
        //v-for和v-if可以结合使用；
        var vm = new Vue({
            el: "#app",
            data: {
                obj: {
                    uname: 'zhangsan',
                    age: 13,
                    gender: 'female'
                }
            }
        })
    </script>

vue常用特性：

表单操作；自定义指令；计算属性；过滤器；侦听器；生命周期；

表单特性

//vue常用特性：表单操作；自定义指令；计算属性；过滤器；侦听器；生命周期；
//1.表单特性：用作数据的交互；表单的输入域不到值操作表单，
//单行文本。多行文本。下拉框。多选按钮。单选框
//表单使用v-model绑定；
欧诺个户选择的内容，提供value属性，单一值，多选值提供数组

    <div id="app">
        <form action="http://itcast.cn">
            <div>
                <span>姓名：</span>
                <span>
          <input type="text" v-model='uname'>
        </span>
            </div>
            <div>
                <span>性别：</span>
                <span>
          <input type="radio" id="male" value="1" v-model='gender'>
          <label for="male">男</label>
          <input type="radio" id="female" value="2" v-model='gender'>
          <label for="female">女</label>
        </span>
            </div>
            <div>
                <span>爱好：</span>
                <input type="checkbox" id="ball" value="1" v-model='hobby'>
                <label for="ball">篮球</label>
                <input type="checkbox" id="sing" value="2" v-model='hobby'>
                <label for="sing">唱歌</label>
                <input type="checkbox" id="code" value="3" v-model='hobby'>
                <label for="code">写代码</label>
            </div>
            <div>
                <span>职业：</span>
                <select v-model='occupation' multiple>
          <option value="0">请选择职业...</option>
          <option value="1">教师</option>
          <option value="2">软件工程师</option>
          <option value="3">律师</option>
        </select>
            </div>
            <div>
                <span>个人简介：</span>
                <textarea v-model='desc'></textarea>
            </div>
            <div>
                <input type="submit" value="提交" @click.prevent='handle'>
            </div>
        </form>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                uname: 'lisi',
                gender: 2,
                hobby: ['1', '2'],
                occupation: ['2', '3'],
                desc: 'haha'
            },
            methods: {
                handle: function() {
                    console.log(this.uname); //文本框
                    console.log(this.gender); //性别
                    console.log(this.hobby.toString()); //多选框
                    console.log(this.occupation.toString()); //下拉框,单选，多选都可以,多选以数组填写
                    console.log(this.desc);
                }
            }
        });
    </script>

表单修饰符

// 表单域修饰符
//1.number:转化为数值；
//2.trim：去掉开始和结尾的空格；不可以去掉中间的空格
//3.lazy：将input事件切换为change事件；
//input输入的时候就会触发，change失去焦点时才会触发；

 <div id="app">
        <input type="text" v-model.number='age'>
        <input type="text" v-model.trim='info'>
        <input type="text" v-model.lazy='msg'>
        <div>{{msg}}</div>
        <button @click='handle'>点击</button>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                age: '',
                info: '',
                msg: ''
            },
            methods: {
                handle: function() {
                    console.log(this.age + 13); //12+12=26
                    console.log(this.info.length);
                }
            }
        });
    </script>

自定义指令的使用

 <div id="app">
        <input type="text" v-focus>
    </div>
    <script src="js/vue.js"></script>
    <script>
        //自定义指令：钩子函数
        //为何需要自定义指令：内置指令不满足需求
        //自定义获取焦点：
        Vue.directive('focus', {
            inserted: function(el) { //被绑定元素插入父节点调用
                //el表示指令所绑定的事件
                el.focus();
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {}
        })
    </script>

带参数的自定义指令

 <div id="app">
        <input type="text" v-color='msg'>
    </div>
    <script src="js/vue.js"></script>
    <script>
        //自定义指令：钩子函数 自定义指令传参
        //使用自定义指令，改变背景
        Vue.directive('color', {
            bind: function(el, binding) { //被绑定元素插入父节点调用
                //el表示指令所绑定的事件
                //binding：对象包含属性；
                // console.log(el);
                // console.log(binding.value.color);//获取值
                el.style.backgroundColor = binding.value.color
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {
                msg: {
                    color: 'pink'
                }
            },
            methods: {}
        })
    </script>

局部指令

 <div id="app">
        <input type="text" v-color='msg'>
        <input type="text" v-focus>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
          自定义指令-局部指令：应用范围：只能在本组件使用
             //组件：vue实例对象就是一个组件
        var vm = new Vue({
            el: '#app',
            data: {
                msg: {
                    color: 'red'
                }
            },
            directives: { //局部指令
                color: {
                    bind: function(el, binding) {
                        el.style.backgroundColor = binding.value.color;
                    }
                },
                focus: {
                    inserted: function(el) {
                        el.focus();
                    }
                }
            }
        });
    </script>

计算属性

// 计算属性与方法的区别:计算属性是基于依赖进行缓存的，依赖就是data里面的数据
//方法是没有缓存的 ，每次执行就会重新调用这个方法
计算属性是必须要返回一个值

<div id="app">
        <div>{{msg}}</div>
        <div>{{reverseString}}</div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: 'hello'
            },
            computed: {
                reverseString: function() {
                    return this.msg.split("").reverse().join(''); //翻转字符串；
                }
            }
        })
    </script>

侦听器的使用 watch

// 侦听器:数据一旦发生变化就通知侦听器做绑定的方法；
// 应用场景：数据变化是执行异步或开销较大的操作
//用于实现数据的监听；属性的名称和方法的名称必须要一致；

 <div id="app">
        <div>
            <span>名：</span>
            <span>
                    <input type="text" v-model='firstName'>
                  </span>
        </div>
        <div>
            <span>姓：</span>
            <span>
                    <input type="text" v-model='lastName'>
                  </span>
        </div>
        <div>{{fullName}}</div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                firstName: 'Jim',
                lastName: 'Green',
                fullName: 'Jim Green'
            },
            watch: {
                firstName: function(val) {
                    this.fullName = val + ' ' + this.lastName;
                },
                lastName: function(val) {
                    this.fullName = this.firstName + ' ' + val;
                }
            }
        });
    </script>

侦听器案例

 <div id="app">
        <div>
            <span>用户名：</span>
            <span>
        <input type="text" v-model.lazy='uname'>
      </span>
            <span>{{tip}}</span>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        /*      
                  侦听器
                   1、采用侦听器监听用户名的变化
                2、调用后台接口进行验证
                3、根据验证的结果调整提示信息
                */
        var vm = new Vue({
            el: '#app',
            data: {
                uname: '',
                tip: ''
            },
            methods: {
                checkName: function(uname) {
                    //接口调用是异步操作；使用定时任务的方式模拟接口调用；
                    setTimeout(() => {
                        //模拟接口调用
                        if (uname == 'admin') {
                            this.tip = '用户名已经存在'
                        } else {
                            this.tip = '用户名可以使用'
                        }
                    }, 2000)
                }
            },
            watch: {
                uname: function(val) {
                    //调用后台接口，验证用户名的合法性
                    console.log(val);
                    this.checkName(val)
                        //修改提示信息；
                    this.tip = '正在验证'
                }
            }
        });
    </script>

过滤器的基本使用

//过滤器：格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定的格式；
//全局过滤器，局部过滤器
//1.定义过滤器：插值表达式 ，属性绑定：不会显示在页面上，但是会显示在标签内部
//Vue.filter(‘过滤器名称’,function(){})

   <div id="app">
        <input type="text" v-model='msg'>
        <div>{{msg | upper}}</div>
        <div>{{msg | upper | lower}}</div>
        <!-- 被处理了两次 -->
        <div :abc='msg | upper'>测试</div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">  
        Vue.filter("upper", function(val) { //要处理的数据
            //把值的首字母变为大写；从第0个变化，把上下的拼接
            return val.charAt(0).toUpperCase() + val.slice(1);
        })
        Vue.filter("lower", function(val) { //要处理的数据
            //把值的首字母变为大写；从第0个变化，把上下的拼接
            return val.charAt(0).toLowerCase() + val.slice(1);
        })
        var vm = new Vue({
            el: '#app',
            data: {
                msg: ''
            },
            //局部过滤器
            filter: {
                upper: function(val) {
                    return val.charAt(0).toUpperCase() + val.slice(1);
                }
            }
        });
    </script>

生命周期—生命周期钩子

   //vue实例的产生和销毁经过的一个过程；

   <div id="app">
        <div>{{msg}}</div>
        <button @click='update'>更新</button>
        <button @click='destroy'>销毁</button>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        // Vue实例的生命周期
 
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '生命周期'
            },
            methods: {
                update: function() {
                    this.msg = 'hello';
                },
                destroy: function() {
                    this.$destroy();
                }
            },
            beforeCreate: function() { //挂载阶段
                console.log('beforeCreate');
            },
            created: function() { //挂载阶段
                console.log('created');
            },
            beforeMount: function() { //挂载阶段
                console.log('beforeMount');
            },
            mounted: function() { //一旦触发，就代表初始化已经完成；模板有内容了
                console.log('mounted');
            },
            beforeUpdate: function() { //点击更新后，触发
                console.log('beforeUpdate');
            },
            updated: function() { //点击更新后，触发
                console.log('updated');
            },
            beforeDestroy: function() { //点击销毁后执行
                console.log('beforeDestroy');
            },
            destroyed: function() { //点击销毁后执行
                console.log('destroyed');
            }
        });
    </script>

vue数组操作

     1、变异方法：会影响数组的原始数据的变化。
                   2、替换数组：不会影响原始的数组数据，而是形成一个新的数组。

  <div id="app">
        <div>
            <span>
        <input type="text" v-model='fname'>
        <button @click='add'>添加</button>
        <button @click='del'>删除</button>
        <button @click='change'>替换</button>
      </span>
        </div>
        <ul>
            <li :key='index' v-for='(item,index) in list'>{{item}}</li>
        </ul>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        /*
                  Vue数组操作
               
                                    */
        var vm = new Vue({
            el: '#app',
            data: {
                fname: '',
                list: ['apple', 'orange', 'banana']
            },
            methods: {
                add: function() {
                    this.list.push(this.fname); //添加
                },
                del: function() {
                    this.list.pop(); //删除
                },
                change: function() {
                    //把变化后的数组，赋值给原始的数组
                    this.list = this.list.slice(0, 2); //替换数组，会生成一个新的数组；
                }
            }
        });
    </script>

动态响应属性