VUE的学习_从入门到放弃(二)

紧接上一节 

-----------------------------------------------------------------------------------------------------------------------------

  • 过滤器filter

<!-- filter 使用场景:在data中的数据格式,例如(货币、时间、大小写)等需要格式化的时候使用 -->
<!-- 分为全局变量和局部,例如 全局在一个html页面之的body中写 如果需要用到的全局很多也可以将其全部写到一个js文件中,然后去引用-->
<div id="app>
    {{money|price}} // | 就表示格式化
  <br>
  {{msg|upper("AAA"}}
</div> <script> Vue.filter("price",function(value){ return calue.toFixed(2); //调用,返回 console.log(value); }) <!-- 简写形式 只适合一个表达式的情形--> Vue.filter("peice",value=>value.toFixed(2)) var vm= new Vue({ el:"#app", data:{ money:100 }, filters:{   upper:function(value,text){
      return value.toUpperCase()+text;
    }, } }):
</script> 
  •  原生日期过滤器(js),类的变量传到互传,prototype

 function timeHelper(date,format){
    var res = format.replace("yyyy",date.getFullYear())
                    .replace("MM",date.getMonth()+1 <10?"0"+(date.getMonth()+1):date.getMonth()+1)
                    .replace("dd",date.getDate() <10?"0"+(date.getDate()):date.getDate())
                    .replace("HH",date.getHours() <10?"0"+(date.getHours()):date.getHours)
                    .replace("mm",date.getMinutes() <10?"0"+(date.getMinutes()):date.getMinutes())
                    .replace("ss",date.getSeconds() <10?"0"+(date.getSeconds()):date.getSeconds()); 
    return res;
}   
  •  vue强制刷新:

方法一:全局强制刷新,消耗性能大:this.$forceUpdate

if(finalData<0){
     for(let i in allTotalArr){
       if(allTotalArr[i]>0){
         allTotalArr[i]--
         break;
       }
     }
}else{
   for(let i in allTotalArr){
     if(allTotalArr[i]>=0){
       allTotalArr[i]++
       break;
     }
   }
 }
this.$forceUpdate

 

方法二:this.set 

if(finalData<0){
     for(let i in allTotalArr){
       if(allTotalArr[i]>0){
         allTotalArr[i]--
         this.$set(allTotalArr,i,allTotalArr[i])//强制更新
         break;
       }
     }
}else{
   for(let i in allTotalArr){
     if(allTotalArr[i]>=0){
       allTotalArr[i]++
       this.$set(allTotalArr,i,allTotalArr[i])//强制更新
       break;
     }
   }
 }

 

  •  Vue操作Dom

vue中的ref是把当前dom元素 “ 抽离出来 ” ,只要通过 this.$refs就可以获取到(注意this指向),此方法尤其适用于父元素需要操作子组件的dom元素,这也是子传父传递数据的一种方法.

  • 全局指令: 自定义指令,有两种形式:

通过 Vue.directive() 函数注册一个全局的指令。

通过组件的directives属性,对该组件添加一个局部的指令

创建全局指令:

需要传入指令名称以及一个包含指令钩子函数的对象,该对象的键即钩子函数的函数名,值即函数体,钩子函数可以有多个。

Vue.directive('self_defined_name',{
  bind:function(el,binding){
  //do someting
  },
  inserted: function(el,binding){
  //do something
  },
}

创建局部指令:

直接向创建的 Vue 实例的 directives 字典属性添加键值对,键值对即需要添加的自定义指令及对应钩子函数字典对象。键值对可以有多个,对应多个自定义指令。

new Vue({
  el:'#app',
  directives:{
    self_defined_name1:{
        bind:function(el,binding){
          //do something
        }
        inserted:function(el,binding){
                  //do something
        },
     }

    self_defined_name2:{
        bind:function(el,binding){
          //do something
        }
        inserted:function(el,binding){
                  //do something
        },
     }
  }

})  

 

  • 钩子

钩子函数:指令定义函数提供了几个钩子函数(可选)

bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。

update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。

componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。

unbind: 只调用一次, 指令与元素解绑时调用。

钩子函数参数

el: 指令所绑定的元素,可以用来直接操作 DOM 。

binding: 一个对象,包含以下属性:vnode: Vue 编译生成的虚拟节点。

name: 指令名,不包括 v- 前缀。

value: 指令的绑定值, 例如: v-my-directive="1 + 1", value 的值是 2

oldValue: 指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。

expression: 绑定值的表达式或变量名。 例如 v-my-directive="1 + 1" , expression 的值是 "1 + 1"

arg: 传给指令的参数。例如 v-my-directive:foo, arg 的值是 "foo"

modifiers: 一个包含修饰符的对象。 例如: v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }

oldVnode: 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。

<div id="app"  v-runoob:hello.a.b="message">
</div> 
<script>
Vue.directive('runoob', {
  bind: function (el, binding, vnode) {
    var s = JSON.stringify
    el.innerHTML =
      'name: '       + s(binding.name) + '<br>' +
      'value: '      + s(binding.value) + '<br>' +
      'expression: ' + s(binding.expression) + '<br>' +
      'argument: '   + s(binding.arg) + '<br>' +
      'modifiers: '  + s(binding.modifiers) + '<br>' +
      'vnode keys: ' + Object.keys(vnode).join(', ')
  }
})
new Vue({
  el: '#app',
  data: {
    message: 'lys!'
  }
})
</script>
#简写
Vue.directive('runoob', function (el, binding) {
  // 设置指令的背景颜色
  el.style.backgroundColor = binding.value.color
})

 

  • 计算属性:作用主要是对data中的属性进行处理

在计算属性或方法中使用拉姆达(lambda)表达式代替:function(){},不能使用split方法,因为拉姆达(lambda)表达式中的this指向的是window,此时需要使用所谓的that代替this。

生命周期的问题:注意beforeMount与mounted的相关顺序,created和beforeMount相同。

 

 

 

至此,VUE的学习_从入门到放弃(二)就结束啦啦,如果你觉得有用,点个赞吧!

如果您看了本篇博客,觉得对您有所收获,请点击右下角的 [推荐];

如果您想转载本博客,请注明出处;

如果您对本文有意见或者建议,欢迎留言;

感谢您的阅读,请关注我的后续博客。 

 

推荐这些文章:

前端,VUE学习记录(3)

本文接着前两章的内容继续叙述我的Vue学习过程,随着对Vue的学习越来越深入,我们会发现很多知识逐渐变得越来越抽象,接下来我会用很多我写的代码图来展示我学习的过程,并解释一些概念性的东西例如什么是Vue响应式等。注:本人水平有限,由于文章是我本人通过学习理解后总结出的,如有写的不好或者写错的地方欢迎私信我,并温柔的指出。谢谢阅览。

目录:

(1)Vue的三种模板

(2)Vue模板有哪些语法

(3)指令与修饰符

(4)sync修饰符

(5)Vue进阶属性:Directive指令

(6)Mixin混入

 

(1)Vue的三种模...

VUE防止按扭连续点击

在main.js里直接写入

Vue.directive('throttle', {
  inserted(el, binding) {
      el.addEventListener('click', () => {
          el.style.pointerEvents = 'none';
          if (!el.disabled) {
           ...

Vue快速入门(一)

目录Vue快速入门(一)介绍Vue.js 是什么M-V-VM思想安装CDN引入下载到本地快速使用双向数据绑定测试模板语法插值语法指令文本指令v-html:让HTML渲染成页面v-text:标签内容显示js变量对应的值v-show:显示/隐藏内容v-if:显示/删除内容事件指令v-on:click 可以缩写成@click属性指令v-bind:class=’js变量’可以缩写成::class=’js变量’
Vue快速入门(一)

介绍
Vue.js 是什么
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐...

Vue的入门——基本语法(上)

Vue 基本语法
(一) 声明式渲染
一般简单的语法是两组大括号包裹值,来声明式地将数据渲染进 DOM 的系统,接下来是指令式。
绑定元素的方式:使用指令

<title>Title</title>
 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="hello">
<span v-bind:title="content...

VUE自定义指令,使textarea自动增高。

编写一个全局指令

function autoHeight(elem) {
elem.style.height = "auto";
elem.scrollTop = 0; // 防抖动
elem.style.height = elem.scrollHeight + "px";
}
export default {
inserted: function (el, binding) {
el.addEventListener("keyup", () => {
autoHeight(el);
})
...

v-model指令的学习

v-model的原理
v-model="message"   ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓就相当于先用一个v-bind绑定一个值  v-bind:value="message"
再用v-on绑定一个事件   @input=“message=$event.target.value”
 

 

本文来自博客园,作者:没有烦恼的猫猫,转载请注明原文链接:https://www.cnblogs.com/maomao777/p/15808391.html

...

date_sub()函数的学习

获取当前日期:select curdate() 
获取当前日期前一天:select  date_sub(curdate(),interval 1 day)
获取当前日期后一天:select date_sub(curdate(),interval -1 day)
 
在判断当中的使用:
在判断当中也是一样的使用哈,例想要从表中查A,条件是time大于等于昨天,time小于等于今天:
select A from 表 where time >=date_sub(curdate(),interval 1 day) AND time <= ...

nodejs学习(三)函数

一.Node.js 函数
  在 JavaScript中,一个函数可以作为另一个函数的参数。我们可以先定义一个函数,然后传递,也可以在传递参数的地方直接定义函数。
Node.js 中函数的使用与 JavaScript 类似,举例来说,你可以这样做:

//常规函数
function say(name) {
console.log("hello" + " " + name)
}

//函数作为值传递
function execute(someFunction, value) {
someFunction(value)

}

execute(say, "tom")

  
...

正则表达式(?<=<(\w+)>).*(?=<\/\1>) 分组

问题
正则表达式(?<=<(\w+)>).*(?=<\/\1>)里面\1代表的是 (\w+) 还是 (?<=<(\w+)>)     ?请解释一下,谢谢!

最佳回答
测试了下   是指 (\w+)

...

Element 时间选择器 el-date-picker 从当前时间往后选择

1.element的   el-date-picker 

<el-date-picker :picker-options="setFulltime" style="width:100%" v-model="ruleForm.Time" type="datetime" placeholder="选择日期时间" clearable format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"> </el-date-picker>

2 . 定义 picker-options...

文章标题:VUE的学习_从入门到放弃(二)
文章链接:https://www.dianjilingqu.com/51387.html
本文章来源于网络,版权归原作者所有,如果本站文章侵犯了您的权益,请联系我们删除,联系邮箱:saisai#email.cn,感谢支持理解。
THE END
< <上一篇
下一篇>>