vue学习01

一

1v-cloak 插值表达式闪烁问题
v-text 默认是没有闪烁问题 会覆盖原本的内容 插值表达式不会
v-html

            
{{msg}}
            
===={{msg}}===
            
hello world
            

            

        
    
    

图片.png

2 v-bind，v-on指令学习

button

二

v-bind绑定属性 :缩写
v-on绑定事件 @缩写

button

v-on:click点击事件
v-on:mouseover鼠标覆盖事件

图片.png

三

3跑马灯效果制作

{{msg}}
            lang
            stop

var vm= new Vue({
            el:'#app',
            data:{
                msg:'天青色等烟雨',
                msg2:'
天行健 君子以自强不息!
',
                interValID:null
            },methods:{
                say:function(){
                    alert('hello vue.js!')
                },
                show:function(msg){
                    alert(msg)
                    
                },
                lang(){
                    if(this.interValID!=null)return;
                    
                    this.interValID=setInterval( () => {
                        var start=this.msg.substring(0,1)
                        var end=this.msg.substring(1)
                        this.msg=end+start
                        console.log(this.msg)
                    },500)
                },
                stop(){
                    clearInterval(this.interValID)
                    this.interValID=null;
                }
            }
         })

开启定时器 停止定时器
截取到后面所有字符串substring(0,1)
清除之后吧intervalId置为null

vm实例 会监听自己身上data中所有数据的改变 只要数据一发生改变，就会自动把最新的数据，从data上同步到页面中去

图片.png

图片.png

setInterval( () =>
=> es6箭头函数

四

4事件修饰符的介绍

.stop阻止冒泡
.prevent阻止默认行为
.capture 捕获机制
.self实现只有点击当前元素的时候 才会触发的函数
.once

实例
没有使用.stop

图片.png

图片.png

stop阻止事件往外冒
prevent 阻止默认事件 如 网址跳转 submit表单

百度一下

.self 只有点击当前元素才会触发事件处理函数

此时只会触发btn按钮的事件 不会触发外部的事件，要想触发外部的div事件 可以点击 inner 即inner.css区域即可触发外部的innerhandler事件

图片.png

百度一下
、此时只能阻止一次默认行为

比较:
click.prevent.once
click.once.prevent
其实没有区别
只触发一次事件处理函数

            
            
            

                


.self只会阻止自己身上冒泡行为的触发 并不会阻止真正冒泡的行为
.stop会阻止真正的冒泡行为

                
 
            
        

此时只会出现btn按钮的事件
inner
outer
都被stop阻止了

图片.png

五

讲解v-model实现表单元素的数据双向绑定
v-bind只能实现数据的单项绑定 从 M 自动绑定到V中 无法实现数据的双向绑定
v-mode 实现表单元素和Model中数据的双向数据绑定
v-model只能运用在表单元素中（input(radio,text,address,email) select checkbox textarea）

    

            
{{msg}}
            
            
        

v-model实现计算器

            
         
        
        
        
            +
            -
            *
            /
        
        
        
        
        
        

        
        
    
    

n1,n2,resu默认都为0 均实现数据双向绑定
v-model =n1
v-model n2
v-model =resu
select 也实现数据双向绑定 v-model=opt

图片.png

六通过属性绑定为元素设置class样式

            

                不要问我从哪里来heyjude
            
            
            
            
不要问我从哪里来heyjude
            
            
            
不要问我从哪里来heyjude
            
{{msg}}
        

图片.png

设置行内样式

            
兽人永不为奴!
            
hey jude
  传入多个属性

图片.png

七

v-for的使用方式

            

                

                    
name
                    
age
                    
sex
                
                

                    
{{p.name}}
                    
{{p.age}}
                    
{{p.sex}}
                
            
            
索引值{{i}}--每一项{{item}}
            
这是第{{count}}次循环
            
值是:{{val}}--键是:{{key}}
        

v-for循环普通数组 v-for循环对象数组 v-for迭代数字(count值从1 开始不是从0开始)

图片.png

v-for添加元素

            
            

                Id
                   
                
                Name
                
                
                submit
                
            
            
            

                
                {{x.id}}--{{x.name}}
            
        

图片.png

v-if 每次都会重新删除或创建元素
v-show每次不会重新进行DOM的删除和创建操作 只是切换了元素的display :none样式

设计频繁的切换 不适用v-if
v-if有较高的切换性能消耗
v-for有较高的初始渲染消耗

图片.png

https://www.bilibili.com/video/av36650577/?p=20
https://github.com/shy1118999/vue.js

图片.png