Vue基础个人笔记

学习Vue自用笔记 持续更新

文章目录

  • Vue基础
    • 01.初识Vue
      • MVVM模式(留个坑,学深了再补充)
      • Vue基础使用
    • 02.Vue渲染
      • 条件渲染
        • v-if : 条件性地渲染一块内容
        • v-show
        • v-if vs v-show
        • v-for
          • v-for 中使用数组
          • v-for中使用对象
          • v-for中使用值范围
      • 列表+条件渲染
        • 使用v-for + v-if
    • 03.模板语法
      • 插值
        • 数据插入内容中:{ {}}语法中可以自由使用js表达式
        • HTML代码插入内容中
      • 指令:带有v-前缀的属性
        • 参数
          • 动态参数(2.6.0新增):方括号括起来的js表达式
          • 参数约束
    • 04.计算属性和侦听器
      • 计算属性
        • 基础使用
        • 相较于普通方法
        • 相较于侦听属性(watch)
        • 计算属性的setter
      • 侦听器
    • 05.Class与Style绑定
      • 绑定Class
        • 使用对象
        • 使用计算属性
        • 使用数组
        • 数组+对象
        • 用在组件上
      • 绑定Style
        • 使用对象
        • 使用计算属性
        • 使用数组
        • **多重值**
    • 06.事件处理
      • 处理方法
        • 直接写表达式
        • 方法(可带参数)
      • 事件修饰符
      • 按键修饰符
      • 系统修饰符
    • 07.表单输入绑定与值绑定
      • 表单输入绑定
      • 值绑定
      • 修饰符
    • 08.组件基础
      • 基础使用
      • 局部组件
      • 父组件与子组件
      • template抽离写法
      • 组件中存放数据
      • 数据传递父传子
      • 数据通信子传父——自定义事件

Vue基础

01.初识Vue

MVVM模式(留个坑,学深了再补充)

Vue基础个人笔记_第1张图片

Vue基础使用

导入Vue.js

let app = new Vue({
   
            el:"#app",
            data:{
   
                isLogin : true
            },
            methods:{
   
                togglePage : function()
                {
   
                    this.isLogin = !this.isLogin; 
                }
            }
        });

ps:上面代码块methods中togglePage若使用箭头函数,this会指向window

02.Vue渲染

条件渲染

v-if : 条件性地渲染一块内容

​ v-if

​ v-else

​ v-else-if(2.1.0新增)作为else if 使用

<body>
     
    <div id="app">
       <p>你好,{
  {username}}p>
       

用户类型:A h3>

用户类型:B h3> <h3 v-else>用户类型:C h3> <h3 v-if="Math.random() > 0.5">now you see meh3> div> <script> let app = new Vue({ el:"#app", data:{ username:"小明", isA:false, isB:false } }) script> body>

v-show

Hello!

v-show不支持元素

ps:

template:用于包裹元素,其本身不会被渲染

一般用于对多个元素同时使用v-if v-for

v-if vs v-show

v-if v-show
方式 删除创建DOM元素 display样式
条件 直到为真才会渲染 任何条件都会渲染
性能 更高的切换消耗 更高的初始加载消耗
场景 条件很少改变 频繁切换

ps:if show 只会添加element.style,假如一开始css中将元素设为display:none 即使if show为true也无法让其显示(即并不会覆盖掉或修改已存在的css属性。

v-for

v-for 中使用数组

v-for = "item in arr" item->(item,index)

v-for中使用对象

v-for = "value in obj" value -> (value,name,index) name为属性名

v-for中使用值范围

{ { n }}

列表+条件渲染

使用v-for + v-if

永远不要把 v-ifv-for 同时用在同一个元素上。

一般我们在两种常见的情况下会倾向于这样做:

  • 为了过滤一个列表中的项目 (比如 v-for="user in users" v-if="user.isActive")。在这种情形下,请将 users 替换为一个计算属性 (比如 activeUsers),让其返回过滤后的列表。
  • 为了避免渲染本应该被隐藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers")。这种情形下,请将 v-if 移动至容器元素上 (比如 ulol)。

03.模板语法

插值

数据插入内容中:{ {}}语法中可以自由使用js表达式

​ 一般插值:数据更改则插值处内容便会更新

​ 用v-once:一次性插值

HTML代码插入

你可能感兴趣的:(Vue,vue)