大一菜鸟vue学习之路（一）基本语法 上

小鱼默默学习
79 阅读4分钟

本文已参与「新人创作礼」活动， 一起开启掘金创作之路。

MVVM模型

  • MVC是Model-View-Controller的简称

  • MVVM是Model-View-ViewModel的简称

具体语法

options选项

五类属性

  1. 数据：data，props，propsDate，computed，Watch；
  2. DOM：el，template，render，renderError；
  3. 生命周期钩子：[beforeCreate,created]、[beforeMount,mounted]、[beforeUpdate,updated]、[activated,deactivated]、[beforeDestory,destoryed]、[errorCaptured]
  4. 资源：directives、filters、components
  5. 组合：parent、mixins、extends、provide、inject

data属性选项

  • data属性是传入一个函数，并且需要返回一个对象

    • 在vue2，可以传入一个对象
    • 在vue3，必须传入一个函数，否则直接报 错

  • data中返回的对象会被Vue的响应式系统劫持，之后对该对象的修改或者访问都会在劫持中被处理

method属性选项

this
  • 若在methods要使用data返回对象中的数据：那么这个this是必须有值的，并且应该可以通过this获取到data返回对象中的数据
  • 所以methods中的this不能是window，不然无法获取data返回对象中的数据
  • 所以不能使用箭头函数，因为如果这样，this就会是window了

不能用箭头函数来定义method的函数

this指向什么？
  • 事实上，vue源码对methods中的所有函数进行了遍历，并且通过了bind绑定了this
  • 指向vue实例

模板语法

Mustache双大括号语法（插值语法）

  • {{}}把数据显示到模板中，使用最多的语法是Mustache

  • data返回的对象是有添加到Vue的响应式系统中

  • 当data中的数据发生改变时，对应的内容也会发生更新

  • Mustache中不仅仅可以是data中的属性，也可以是一个JavaScript表达式

    • {{counter*2}}
{{info.split(" ")}}
{{age>=18?"成年人":"未成年人"}}

指令语法

  • 都是用到元素的属性上面

  1. v-once

    1. 只渲染一次【包括所有子元素】
    2. 当数据发生变化时，元素或者组件及其所有子元素将视为静态内容并且跳过
    3. 该指令可以用于性能优化

  2. v-text

    1. 直接替换元素的内容
    2. 用于更新元素的textContent

  3. v-html

    1. 默认情况下，如果我们展示的内容本身是html，那么vue并不会对其进行特殊的解析
    2. 如果我们希望内容被vue解析出来，那么可以使用v-html来展示

  4. v-pre

    1. 用于跳过元素和它子元素的编译过程，显示原始的Mustache
    2. 可以用于跳过不需要编译的节点，加快编译速度

  5. v-cloak

    1. 与css一起用，可以隐藏未编译的Mustache标签直到组件实例准备完毕
    2. //css
[v-clock]{
  display:none;
}
//html(vue)
<h2 v-clock></h2>

  6. ※v-memo【新】

    1. 该指令接收一个固定长度的数组作为依赖进行记忆比对，如果数组中的每个值都和上次渲染的时候相同，则整个该子树更新会被跳过
    2. <div v-memo="[name,age]"> </div>

  7. v-bind

    1. 动态绑定一个或多个属性值，或者向另一个组件传递props值

      • 动态绑定a元素的href属性
      • 动态绑定img元素的src属性
      • <button @click="change">切换</button>
<img v-bind:src="imgUrl" alt="">
//vue
//...
data:function() {
  return {
    imgUrl1:url1,
    imgUrl2:url2,
    showImgUrl:uel2
  }
},
methods:{
  change:function(){
    this.showImgUrl = this.showImgUrl === this.imgUrl1 ? this.imgUrl2 :this.imgUrl1
  }
}

    2. 缩写--":"

  8. 绑定class

    1. //普通
<button class="isActive?'active':''" @click="btnClick"></button>
//对象语法  如果后者为true，则加上前者，否则不加
 <button :class="{ active:isActive }" @click="btnClick"></button>
//数组语法 
 <button :class="['abc',classname,{active:isActive}]" @click="btnClick"></button>

  9. 绑定style

    1. 可以根据v-bind:style来绑定一些css内联样式
    2. CSS property 名可以用 驼峰式 或 短横线分割 来命名
    3. //动态绑定style，在后面跟上对象类型
//对象语法
<h2 :style="objStyle"></h2>
//数组语法
<h2 :style="[objStyle,{backgroundColor:'purple'}]"></h2>

data:function(){
   data:function(){
       objStyle:{
         fontSize:'50px',
         color:'green'
       }
   }
}

  10. 动态绑定属性名

    1. 前端无论绑定src、href、class、style，属性名称都是固定的
    2. 如果属性名称不是固定的，我们可以使用:[属性名]="值" 的格式来定义
    3. 这种绑定我们称之为动态绑定
    4. <template>
    <div :[name]="value">{{message}}</div>
</template>

  11. 绑定一个对象

    1. <h2 v-bind="infos"></h2>
data:function(){
  return {
    infos:{name:"why",age:18,height:1.88,address:"广州市"}
  }
}

  12. v-on(事件绑定)

    1. 缩写：@

    2. 用法：绑定事件倾听

      •  //基本写法
 <div class="box" v-on:click=""></div>
 //语法糖
 <div class="box" @click=""></div>
 //3.绑定方法位置，也可以写成一个表达式（不推荐）
 //4.绑定其他方法
 @mousemove
 //5.绑定事件
 v-on = "{ click:divClick,mousemove:divMousemove}"

    3. 修饰符

      • .stop - 调用event.stopPropagation()【阻止冒泡】
      • .prevent - 调用event.preventDefault ()【阻止默认行为】
      • .capture - 添加事件侦听器时使用capture模式。
      • .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调
      • .{keyAlias} - 仅当事件是从特定键触发时才触发回调
      • .once - 只触发一次回调【⭐】
      • .left - 只当点击鼠标左键时触发
      • .right - 只当点击鼠标右键时触发
      • .middle - 只当点击鼠标中键时触发
      • .passive - 事件的默认行为立即执行，无需等待事件回调执行完毕

    4. 默认参数：event对象

      • 鼠标事件PointerEvent()
      • 总结：如果在绑定事件的时候，没有传递任何的参数，那么event对象会被默认传递进来
      • 如果要获取event对象，用$event

... ...未完待续

avatar
文章
阅读
粉丝