vue 入门笔记

本文介绍了Vue.js的基础知识,包括全局过滤器、生命周期钩子函数,强调了生命周期在AJAX请求和DOM操作中的应用。此外,还探讨了如何通过`ref`获取DOM节点,自定义指令的实现,以及Vue中动画和计算属性的使用。重点讲述了Vue的核心功能——组件化,阐述了组件如何实现前端模块化,并强调了组件不能与HTML5标签名和JavaScript关键字冲突。
摘要由CSDN通过智能技术生成
  • v-show 使用 css display属性 开销小 频繁切换使用
    v-if 删除节点重新渲染 开销大 不频繁切换使用 
    组合使用  v-if v-else-if v-else
    获取 $event   @click="test1($event)  test1(evt){
           console.log(evt); },
    阻止事件冒泡,并阻止默认事件行为 @click.stop.prevent="test4"
    
  • 延迟显示 修饰符 lazy        <input type="text" v-model.lazy="msg">
    强制类型转换 <input type="text" v-model.number="msg">
    清除空格 trim   <input type="text" v-model.trim="msg">
    数据双向绑定 v-model="变量" 一般用于表单 change
    
<!-- 多选框 --> v-model可以代替checked的值
<input type="checkbox" value="小红" v-model="girl">小红
<input type="checkbox" value="小绿" v-model="girl">小绿
  • 全局过滤器

    <li v-for="item in arr">{
         {
         item.say|subStr(4,item.name)}}</li>
    Vue.filter("subStr", function (val,length,name) {
         return }第一个参数默认就是 |管道符前面的值value 
    
  • 生命周期钩子函数

    生命周期是一个Vue实例从创建到销毁的一个完整过程

    可以在生命周期里面做 ajax请求,获取dom节点,操作数据

    前面四个 是

    1. beforeCreate(){
          console.log("Vue实例初始化"); 
    2. created(){
         console.log("Vue实例化完成,但是没有渲染视图,数据已经渲染完成");
    3. beforeMount(){
         console.log("视图模板编译之前");
    4. mounted(){
          console.log("视图模板变异完成,并渲染视图");
    
    beforeUpdate(){<
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值