VUE 笔记1基础部分

VUE 笔记1基础部分

v-text=‘app’ 不解析标签
v-html=‘app’ 解析标签
v-cloak 指令设置样可以解决屏幕闪动的问题
属性解析 v-bind:src =‘imgs.jpg’ 简写 :src=‘img/imgs/jpg’

v-model 双线数据绑定
v-once 只渲染一次
v-model.lazy 失去光标改变数据
v-model.number 数字转换机制
v-model.trim 去空格

循环

v-for=‘i in list’
v-for = ‘(i,v) in list’
json循环 v-for =(‘item,key,index’) :key(item.id)区别下标丢失问题

v-on:click=‘add()’ 点击事件
@click:=‘add()’ 简写

v-if判断 删除元素 v-show显示 显示隐藏元素

判断语句

事件修饰符

@click.stop=‘add()’ 阻止事件冒泡 内=>外
@click.prevent=‘add()’ 阻止默认行为
@click.capture=‘add()’ 事件捕获 优先调用 外=>内
@click.self=‘add()’ 必须在自身元素触发
@click.once=‘add()’ 只执行1次
@subimt.prevent 提交阻止默认行为

鼠标修饰符

@click.left middle right 左击 中间 右击触发
@click ctrl alt shift 系统修饰符

键盘修饰符

@keyup.down 按下 up上 lef 左 right 右 .enter按下enter键触发
自定义键盘按键 Vue.config,keyCodes.f1=112

修饰符 : ' ：'
class:     
    :class='a+" "+b'  拼接
    :class=[a, b,bg:isFalse?"":bg]
   :class='{box:true,border:true,bg:false}'
   :class='{box:a==20,border:true,bg:false}'
style
    :style='{width:200px,height:200px}'




## 全局模板过滤器
{
    { vals | 名字 }}
全局
Vue.filter('名字'，function(vals){
 return vals+改变的属性
})

局部
filters: { //首字母大写
           fl1: function (value) {
               return value.charAt(0).toUpperCase() + value.slice(1)
           }
}

带参数模板过滤器
{
    { vals | 名字 ("$","1")}}
Vue.filter('名字'，function(vals,str='$',param=2){
 return str+(parseInt(vals).toFixed(param))
})

定义全局

 
Vue.prototype.funColor = function (content, c = 'red') {
       return "" + content + ""
 }

## vue-resource
get
    this.$http.get(url,{a:0,b:1}).then(function(res){
    },function(err){
    })
post
   this.$http.post(url,{a:0,b:1},{emulateJSON:true}).then(function(res){
   },function(err){
   })
跨域
   this.$http.jsonp(url),{jsonp: 'jsonp'jsonpCallback:'回调函数名字' }.then(function(res)    {},function(err){})
   this.$http.jsonp(url),{pargrams:{wd,this.wd},jsonp: 'cb' }.then(function(res){},function(err){})

钩子函数 mounted

钩子函数也是函数
函数本身 有出发场景 自己触发 不需手动调用
钩子函数也叫生命周期函数
beforeCreate vue对象刚刚初始化了钩子函数和简单事件 还没有数据和方法
created vue对象一斤加载了数据和方法 也是最早能获取的数据
beforeMonut 在内存编译完成 数据没有替换
mounted 已经完成dom替换 内存数据和真是dom数据保持一致
钩子函数 修改数据
beforeUpdate 虚拟dom中完成修改 没有加载到真是dom中
updated 在虚拟dom完成修改 并且替换了真实dom 真实dom和虚拟dom数据一致

vm实例对象

vm.$el  调用普通属性
vm.#data 调用data
vm.info   调用方法
vm.$mount("#app")  手动挂载

自定义指令
Vue.directive(“focus”,{
bind:function(el){}, 初始化css静态属性
inserted:function(el){} 一般使用js属性
})

自定义指令传参数

hello

Vue.directive("colors", { inserted: function (el, parem) { el.style.color = parem.value } })

计算属性

computed:{
str:function(){
return ‘asd’
}
}

watch 监听

watch: {
str() {
strs = this.str + “@qq.com”
this.useStr = strs
}
}

动画

.fade-enter 开始之前
.fade-enter-active 执行的时候
.fade-enter-to 执行完毕
.fade-leave 隐藏之前
.fade-leave-active 隐藏的时候
.fade-leave-to 隐藏完毕

animate插件
enter-active-class 开始名字
leave-active-class 结束名字

控制时间

半场效果

  
            

   

  methods: {
            beforeEnter(el) {
                el.style.transform = 'translate(0,0)'
            },
            enter(el, noe) {
                el.offsetLeft
                el.style.transform = 'translate(150px,450px)'
                el.style.transition = 'all 2s ease'
                noe()    回调 立马执行下一个函数

            },
            afterEnter(el) {
                this.shows = !this.shows
            }
        }

多个组件
enter-active-class=‘bounceInUp’
leave-active-class='bounceInDown
必须绑定key:

过度模式
out-in 隐藏在引入
out-in 引入在隐藏