vue学习笔记（一）关于事件冒泡和键盘事件以及与Angular的区别

刺骨的言语ヽ痛彻心扉 2022-06-15 03:44 107阅读 0赞

一、事件冒泡

方法一、使用event.cancelBubble = true来阻止冒泡

<div @click="show2()">
    
        <input type="button" value="按钮" @click="show1($event)">
    
        </div>
    
        methods:{
    
            show1:function(ev){
    
                console.log(ev);
    
                alert(1);
    
                ev.cancelBubble=true;   /*阻止冒泡*/
    
            },
    
            show2:function(){
    
                alert(2);
    
            }
    
        }

方法二：使用vue自带的方法阻止冒泡

拓展：事件修饰符

参考API：http://cn.vuejs.org/v2/guide/events.html\#事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题， Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。

.stop

.prevent

.capture

.self

.once

二、键盘事件

<input type="text" @keydown="show">
    
    show:function(){
    
         alert(1);
    
        }
    
        <input type="text" @keydown="show2($event)">
    
        show2:function(ev){
    
            console.log(ev.keyCode);
    
            if(ev.keyCode==13){
    
                alert('按下了回车键盘');
    
            }
    
        },
    
      <input type="text" @keyup="show3($event)">
    
    show3:function(ev){
    
            console.log(ev.keyCode);
    
            if(ev.keyCode==13){
    
                alert('回车键盘弹起的时候触发的事件show3');
    
            }
    
        }

拓展：按键修饰符

参考API：http://cn.vuejs.org/v2/guide/events.html\#按键修饰符

在监听键盘事件时，我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名

全部的按键别名：

.enter

.tab

.delete (捕获 “删除” 和 “退格” 键)

.esc

.space

.up

.down

.left

.right

.ctrl

.alt

.shift

.meta

\*\*\*\*\*\*\*\*

注意：在Mac系统键盘上，meta对应命令键 (?)。在Windows系统键盘meta对应windows徽标键(?)。在Sun操作系统键盘上，meta对应实心宝石键 (◆)。在其他特定键盘上，尤其在MIT和Lisp键盘及其后续，比如Knight键盘，space-cadet键盘，meta被标记为“META”。在Symbolics键盘上，meta被标记为“META” 或者 “Meta”。

\*\*\*\*\*\*\*\*

可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

// 可以使用 v-on:keyup.f1

Vue.config.keyCodes.f1 = 112

<div @click.ctrl="doSomething">Do something</div>

三、checkbox

注意对比angular写法，选中与不选中直接对应的是显示还是隐藏我们的box，flag在默认的data中设置为false

四、select

对比angular写法http://www.runoob.com/angularjs/angularjs-select.html

data: {
    
            selected: 'C',
    
            options: [
    
                { text: 'One', value: 'A' },
    
                { text: 'Two', value: 'B' },
    
                { text: 'Three', value: 'C' }
    
            ]
    
        }
    
        <select v-model="selected">
    
        <option v-for="item in options" :value="item.value">
    
                {
       {item.text}}
    
        </option>
    
        </select><br/>
    
            选中:{
       {selected}}

五、radio

对比angular

使用四中的源数据

<ul>
    
            <li v-for="option in options">
    
    <input type="radio" name="myRadio" :value="option.value"  v-model="selected"/>{
      {option.text}}
    
                </li>
    
            </ul><br/>
    
            <span>选择的是: {
      { selected }}</span>

六、生命周期函数

对比react生命周期函数

初始化：

getDefaultProps：作用于组件类，只调用一次，返回对象用于设置默认的props，对于引用值，会在实例中共享。

getInitialState：作用于组件的实例，在实例创建时调用一次，用于初始化每个实例的state，此时可以访问this.props。

componentWillMount：在完成首次渲染之前调用，此时仍可以修改组件的state。

render

必选的方法，创建虚拟DOM，该方法具有特殊的规则：

只能通过this.props和this.state访问数据

可以返回null、false或任何React组件

只能出现一个顶级组件（不能返回数组）

不能改变组件的状态

不能修改DOM的输出

componentDidMount：真实的DOM被渲染出来后调用，在该方法中可通过this.getDOMNode()访问到真实的DOM元素。此时已可以使用其他类库来操作这个DOM。

运行时：

componentWillReceiveProps：组件接收到新的props时调用，并将其作为参数nextProps使用，此时可以更改组件props及state。

componentWillReceiveProps: function(nextProps) {
    
            if (nextProps.bool) {
    
                this.setState({
    
                    bool: true
    
                });
    
            }
    
        }

shouldComponentUpdate：组件是否应当渲染新的props或state，返回false表示跳过后续的生命周期方法，通常不需要使用以避免出现bug。在出现应用的瓶颈时，可通过该方法进行适当的优化。

componentWillUpdate：接收到新的props或者state后，进行渲染之前调用，此时不允许更新props或state。

render

componentDidUpdate：完成渲染新的props或者state后调用，此时可以访问到新的DOM元素。

销毁：

componentWillUnmount：组件被移除之前被调用，可以用于做一些清理工作，在componentDidMount方法中添加的所有任务都需要在该方法中撤销，比如创建的定时器或添加的事件监听器。

参考API：http://cn.vuejs.org/v2/guide/instance.html\#实例生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。在这个过程中，实例也会调用一些 生命周期钩子 ，这就给我们提供了执行自定义逻辑的机会。

beforeCreate:实例刚刚被创建1

created:实例已经创建完成2

beforeMount:模板编译之前3

mounted:模板编译完成4------\*\*\*\*\*\*\*\*请求数据放在这个里面  必须记住\*\*\*\*\*

beforeUpdate:数据更新之前

updated:数据更新完毕

beforeDestroy:实例销毁之前

destroyed:实例销毁完成    ----this.$destroy();销毁实例

{
       {msg}}
    
    <input type="button" value="更新数据" @click="update()">
    
        <input type="button" value="销毁组件" @click="destroy">
    
      data:{
    
            msg:'welcome vue2.0'
    
        },
    
      methods:{   /*自定义方法*/
    
            update(){
    
                this.msg='大家好';
    
            },
    
            destroy(){
    
                this.$destroy();   /*销毁实例 组件*/
    
            }
    
        }

七、模拟百度搜索提示功能

1、监听文本框中的值

2、请求百度的接口

3、实现方法，watch监听文本框的输入变化，按键修饰符keyup实现

4、可以在表单的input 元素上使用v-model 指令来创建双向数据绑定。它会根据input元素的类型自动选取正确的绑定模式。

// var api='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+newValue;
    
    <input type="text" v-model="search"/>
    
        <br/>
    
        <ul>
    
            <li v-for="item in list">
    
     
    
                {
       {item}}
    
            </li>
    
        </ul>

方法一watch:

引入<script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script>
    
    data:{
    
                search:'',
    
                list:[]
    
            }
    
            var timer='';
    
            vm.$watch('search',function(newValue){
    
            console.log(newValue);
    
            clearTimeout(timer);
    
     
    
            var _that=this;
    
            timer=setTimeout(function(){
    
                //去服务器请求数据
    
                var api='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+newValue;
    
                _that.$http.jsonp(api,{
    
                    jsonp:'cb'  /*改变回调函数*/
    
                }).then(function(data){
    
                    console.log(data.body.s);
    
                    _that.list=data.body.s;   /*改变data绑定的值*/
    
                })
    
            },200);
    
        })

方法二：键盘事件  @keyup

<input type="text" v-model="search" @keyup="requestData()"/>
    
              data:{
    
                search:'',
    
                list:[],
    
                timer:''
    
            },
    
            methods:{
    
                requestData:function(){
    
                    var api='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+this.search;
    
                    var _that=this;
    
                    clearTimeout(this.timer);  /*清除定时器*/
    
                    this.timer=setTimeout(function(){
    
                        //去服务器请求数据
    
                        _that.$http.jsonp(api,{
    
                            jsonp:'cb'  /*改变回调函数*/
    
                        }).then(function(data){
    
                            console.log(data.body.s);
    
                            _that.list=data.body.s;   /*改变data绑定的值*/
    
                        })
    
     
    
                    },200)
                }
    
            }