vueDay01总结

**

vue

**
vue是一套用于构建用户界面的渐进式框架
vue核心：vue核心库只关注视图层，易上手，便于与第三方库和既有项目的整合
vue代码运行的原理：vue库文件进行了解析；编译过程，把vue语法转化成了原生js代码，页面更新只去修改数据，不再操作DOM
指令：本质就是自定义属性；
vue中的指令都是以**v-**开头

第一vue页面 htllo world

 //el：元素的挂载位置，要把数据挂载到哪个位置；
  //data：模型数据，所有的数据都放到data里面；
  //{{}}插值表达式， 把数据填充到html里面；{{1+2}} 支持简单的数学计算；
 <div id="app">
        <div>{{msg}}</div>
        <div>{{1+2}}</div>//3
        <div>{{msg + '----' + 123}}</div>//hello wolrd ---123
    </div>
    <script src="js/vue.js"></script>
    <script>
        //vue的基本使用步骤：
        //1.需要提供标签，用于填充数据；
        //2.引入vue库文件；
        //3.使用vue语法做功能；
        //4.把vue提供的数据填充到标签里面；
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello world'
            }
        })
    </script>

v-cloak

<style>
        [v-cloak] {
            display: none;
        }
    </style>
<div id="app">
        <div v-cloak>{{msg}}</div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        //指令就是自定义属性；
        //v-cloak指令；
        //插值表达式存在闪动问题；v-cloak可以解决闪动问题
        //v-cloak用法；
        //1.提供样式；
        //2.在插值表达式所在的标签中添加 v-cloak
        //原理：先通过样式隐藏内容，然后在内存中进行值的替换；替换完毕在显示最终的结果；
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello'
            }
        })
    </script>

数据填充的相关的三个指令用法

 <div id="app">
        <div>{{msg}}</div>
        <div v-text='msg'></div>
        <div v-html='msg1'></div>
        <div v-pre>{{msg}}</div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        //1.v-tetx没有闪动问题；填充纯文本；
        //2.v-html填充html片段;
        //注意：v-html存在安全隐患；网站内部的数据可以使用，跨域和第三方不建议使用
        //3.v-pre用于显示文本信息；跳过编译，显示原本信息；
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello',
                msg1: '<h1> hello </h1>'
            }
        })
    </script>

v-once

 <div id="app">
        <div>{{msg}}</div>
        <div v-once>{{info}}</div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        //数据响应式：数据来驱动内容来变化
        //html5的响应式就是做适配，屏幕尺寸变化，样式也会变化
        //数据绑定：将数据填充到标签中；
        //v-once：只编译一次，显示内容以后，不再具有响应式;
        //应用场景：如果显示的信息后续不要修改，就可使用v-once；可以提高性能,vue就不用再监听这个指令
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello',
                info: 'haha'
            }
        })
    </script>

双向数据绑定v-model

• 当数据发生变化的时候，视图也就发生变化
• 当视图发生变化的时候，数据也会跟着同步变化

v-model是一个指令，限制在 <input>、<select>、<textarea>、components中使用
当输入框中内容改变的时候，  页面上的msg  会自动更新
 <div id="app">
        <div>{{msg}}</div>
        <div>
            <input type="text" v-model='msg'>
        </div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        //双向绑定：
        //主要用于输入框中
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello'
            }
        })
    </script>

mvvm

MVC 是后端的分层开发概念； MVVM是前端视图层的概念，主要关注于 视图层分离，也就是说：MVVM把前端的视图层，分为了 三部分 Model, View , VM ViewModel
M model 数据层 vue中的数据层都放到了data里面
V views 视图
VM 控制器 将数据和视图建立联系
vm就是vue的实例，就是VM

v-on

 <div id="app">
        <div>{{msg}}</div>
        <div>
            <!-- 方法一 -->
            <button v-on:click="msg++">按钮</button>
            <!-- 简化二 -->
            <button @click="msg++">按钮</button>
            <!-- 方法三 -->
            <button @click="handle">按钮</button>
            <!-- 方法三 -->
            <button @click="handle()">按钮</button>
        </div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        //事件绑定：v-on指令用法
        //绑定事件定义在方法里面；
        //注意：函数必须带定义在methods里面；
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 0
            },
            methods: {
                handle: function() {
                    this.msg++;
                    console.log(this===vm) //true
                    //这里的this指向的是vue的实例对象；
                }
            }
        })
    </script>

事件函数传递参数

   <div id="app">
        <div>{{num}}</div>
        <div>
            <!--  1.如果事件要绑定事件名称，那么默认会传递事件对象作为事件函数的第一参数 -->
            <button @click='handle1'>按钮</button>
            <!-- 2.如果事件绑定函数调用事件,对象必须作为最后一个进行传递；并且事件对象的名称必须是固定的$event -->
            <button @click='handle(123,456,$event)'>按钮</button>
        </div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                num: 0
            },
            methods: {
                handle: function(p, p1, event) {
                    this.num++;
                    console.log(p, p1, event.target);
                },
                handle1: function(event) {
                    //target触发事件
                    console.log(event.target); //打印整个标签；
                    console.log(event.target.innerHTML); //打印出标签里面的内容
                }
            }
        })
    </script>

事件修饰符

做项目时会用到键盘事件，在监听键盘事件时，vue允许v-on在监听键盘事件时添加按键修饰符
常用的按键修饰符
<input v-on:keyup="submit"/>
.enter =>    enter键
.tab => tab键
.delete (捕获“删除”和“退格”按键) =>  删除键
.esc => 取消键
.space =>  空格键
.up =>  上
.down =>  下
.left =>  左
.right =>  右
 <div id="app">
        <div>{{num}}</div>
        <div @click='handle1'>
            <button @click.stop='handle($event)'>按钮</button>
        </div>
        <div>
            <a href="http://www.baidu.com" @click.prevent='handle2'>百度</a>
        </div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        //事件修饰符：
        //1.阻止事件冒泡：stop；
        //2.阻止默认行为：prevent
        var vm = new Vue({
            el: '#app',
            data: {
                num: 0
            },
            methods: {
                handle1: function() {
                    this.num++;
                },
                handle: function(event) {
                },
                handle2: function(event) {
                }
            }
        })
    </script>

按键修饰符

   <div id="app">
        <form action="">
            <div>
                用户名：
                <input type="text" v-on:keyup.delete='clearContent' v-model='uname'>
            </div>
            <div>
                用户名1：
                <input type="text" v-on:keyup.f1='hadel' v-model='uname'>
            </div>
            <div>
                密码：
                <input type="text" v-on:keyup.enter='handleSubmit' v-model='pwd'>
            </div>
            <div>
                <input type="button" v-on:click='handleSubmit' value="提交">
            </div>
        </form>
    </div>
    <script src="js/vue.js"></script>
    <script>
        //按键修饰符：keyup.enter，keyup.delete
        //自定义按键修饰符：名字是自定义的，对应的值必须按键event之间的值；
        Vue.config.keyCodes.f1 = 13
        var vm = new Vue({
            el: "#app",
            data: {
                uname: '',
                pwd: ''
            },
            methods: {
                handleSubmit: function() {
                    //点击回车打印出用户名和密码
                    console.log(this.uname, this.pwd);
                },
                clearContent: function() {
                    //点击delete清空表单；
                    this.uname = '';
                },
                hadel: function(event) {
                    this.uname = ''; //点击13键清空文本框内容；
                    // console.log(event.keyCode); //打印出键盘对应的key值；
                }
            }
        })
    </script>

属性绑定基本使用v-bind

<div id="app">
        <a v-bind:href="url">百度</a>
        <!-- 简写 -->
        <a :href="url2">黑马程序员</a>
        <button @click='hadel'>按钮</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
        //属性绑定；v-bind属性绑定；
        var vm = new Vue({
            el: '#app',
            data: {
                url: 'http://www.baidu.com',
                url2: 'http://itcast.cn'
            },
            methods: {
                hadel: function() {
                    this.url = 'http://itcast.cn'
                }
            }
        })
    </script>

v-model指令的本质

 <div id="app">
        <div>{{msg}}</div>
        <input type="text" :value='msg' @input='headel'>
        <input type="text" :value='msg' @input='msg=$event'>
        <input type="text" :value='msg' v-model='msg'>
    </div>
    <script src="js/vue.js"></script>
    <script>
        //v-model实现数据双向绑定：就是用到了v-on绑定事件和v-bind绑定属性值
        var vm = new Vue({
            el: "#app",
            data: {
                msg: 'hello'
            },
            methods: {
                headel: function() {
                    //是以输入域中最新的数据覆盖原来的数据；
                    this.msg = event.target.value
                }
            }
        })
    </script>

样式绑定Class对象用法

// 样式绑定相关语法细节：
        //1、对象绑定和数组绑定可以结合使用
        //2、class绑定的值可以简化操作；在data里面定义一个对象，存储更多数据；
        //3、默认的class如何处理？默认的class会保留
<style>
        .active {
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
        .error {
            background-color: orange;
        }
    </style>
 <div id="app">
        <div :class="{active:isActive,error:isEeeor}">测试样式</div>
        <button @click='hadel'>按钮</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
        //通过v-bind来绑定样式属性；以对象在里面填写，多个值以逗号分隔；
        var vm = new Vue({
            el: '#app',
            data: {
                isActive: true,
                isEeeor: true
            },
            methods: {
                hadel: function() {
                    //控制样式在true和false之间切换
                    this.isActive = !this.isActive;
                    this.isEeeor = !this.isEeeor
                }
            }
        })
    </script>

样式绑定Class数组用法

 <div id="app">
        <div :class='[activeClass,errorClass]'>测试样式</div>
        <button @click='hidel'>按钮</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                activeClass: 'active',
                errorClass: 'error'
            },
            methods: {
                hidel: function() {
                    this.activeClass = '';
                }
            }
        })
    </script>

样式绑定style用法

 <div id="app">
        <div v-bind:style='{border: borderStyle, width: widthStyle, height: heightStyle}'></div>
        <div v-bind:style='objStyles'></div>
        <div v-bind:style='[objStyles, overrideStyles]'></div>
        <button v-on:click='handle'>切换</button>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        /*
              样式绑定之内联样式Style：
              
            */
        var vm = new Vue({
            el: '#app',
            data: {
                borderStyle: '1px solid blue',
                widthStyle: '100px',
                heightStyle: '200px',
                objStyles: {
                    border: '1px solid green',
                    width: '200px',
                    height: '100px'
                },
                overrideStyles: {
                    border: '5px solid orange',
                    backgroundColor: 'blue'
                }
            },
            methods: {
                handle: function() {
                    this.heightStyle = '100px';
                    this.objStyles.width = '100px';
                }
            }
        });
    </script>