【学习笔记】前端（I）—— Vue2（Ⅱ）

【学习笔记】前端（I）—— Vue2（Ⅱ）

码农世界 2024-05-25 前端 82 次浏览 0个评论

Vue2（Ⅱ）

  • 3、基础篇
    •       3.8、样式绑定
      •             3.8.1 class
      •             3.8.2 style
    •       3.9、列表渲染
      •             3.9.1 列表过滤
      •             3.9.2 列表排序
      •             3.9.3 列表更新
    •       3.10、数据劫持
    •       3.11、收集表单数据
    •       3.12、过滤器 filters
    •       3.13、自定义指令
    •       3.14、模板 template
    •       3.15、生命周期
    •       3.16、组件
      •             3.9.1 非单文件组件
      •             3.9.2 重要的内置关系
      •             3.9.3 单文件组件

3、基础篇

      3.8、样式绑定

            3.8.1 class

        绑定class样式要使用’ :class=“xxx” ‘的写法，其不影响’ class=“xxx” '的使用，也就是两者可以共存

写法 适用
字符串 类名不确定，要动态获取
数组 要绑定多个样式，要使用的类名明确
对象 要绑定多个样式，要使用的类名不明确 


   
      
      Title
      
      
      
   
   
      

         
         
{
  { name }}

         

         
         
{
  { name }}

         

         
         
{
  { name }}

            3.8.2 style

        绑定style样式要使用’ :style=“xxx” ‘的写法，其不影响’ style=“xxx” '的使用，也就是两者可以共存

写法 描述
对象 样式的键值对，例如 {background: ‘green’ }
数组 多个对象的集合 


   
      
      Title
      
      
      
   
   
      

         
         
{
  { name }}

         

         
         
{
  { name }}

         

         
{
  { name }}

      3.9、列表渲染

            3.9.1 列表过滤

筛选：arr.filter((每个元素)=>{被筛选的元素条件})


   
computed实现列表过滤

   
   
    
      
  • {
  { p.name }} - {
  { p.age }} - {
  { p.sex }}
    • 
   





   
watch实现列表过滤

   
   
    
      
  • {
  { p.name }} - {
  { p.age }} - {
  { p.sex }}
    • 
   




Top