【Vue】Vue基础入门

       个人主页:五敷有你      
 系列专栏:Vue
⛺️稳重求进,晒太阳

Vue概念

  • 是一个用于构建用户界面的渐进式框架
  • 优点:大大提高开发效率
  • 缺点:需要理解记忆规则

创建Vue实例

步骤:

  1. 准备容器
  2. 引包
  3. 创建Vue实例new Vue()
  4. 指定配置项el data=>渲染数据
  • el指定挂载点,选择器指定控制的是哪个盒子
  • data:提供数据

插值表达式

插值表达式是一种Vue的模板语法

  1. 作用:利用表达式进行插值,渲染到页面
    1. 表达式:可以被求值的代码,js会算出一个结果
  2. 语法:{{表达式}}
  3. 注意点
    1. 使用的数据必须存在
    2. 支持的式表达式而非语法
    3. 不能在标签属性中使用{{}}插值

Vue的核心特征:响应式

数据改变,视图自动更新

【Vue】Vue基础入门_第1张图片

访问数据:实例.属性名

修改数据:实例.属性名=“值”

开发者工具:

在拓展中搜索VueDevtools下载安装

给他权限

OK

【Vue】Vue基础入门_第2张图片

Vue指令

Vue会根据不同的指令,针对标签实现不同的功能

指令:带有v-前缀的特殊标签属性

v-html

v-html="表达式" ->动态设置元素innerHTML

v-if(条件渲染)

作用:控制元素显示隐藏(条件渲染)

语法:v-if="表达式" 表达式值:true 显示,flase 隐藏

原理:根据条件判断,是否创建或移除元素节点

场景:不频繁切换的场景

v-show(显示隐藏)

作用:控制元素显示隐藏

语法:v-show="表达式"

原理:切换display:none

场景:频繁切换显示隐藏场景

v-if v-else v-else-if

作用:复制v-if进行判断渲染

语法:v-else v-else-if="表达式"

注意:需要紧挨着v-if一起使用

v-on

  1. 作用:注册事件=添加监听+提供处理逻辑
  2. 语法:
  • v-on:事件名="内联语句"
 
 //简写
  

v-on:事件名="methods中的函数名"

  1. 注意:
  • 内联语句可以直接拿data中的数据
  • method中是不能直接访问到data中的数据的,需要的是app.属性
  • 在methods中的函数,this都是指向当前实例
  1. 调用传参
    1. 可以额外传参
 
  
 /.../
 methods:{
            func(num){
                app.count=app.count+num;
            }
        }

v-bind

作用:动态的设置html的标签属性 ->src url title

语法:v-bind:属性名="表达式" 简写::属性名="表达式"

v-for

作用:基于数据循环,多次渲染整个元素 →数组、对象、数字

语法:v-for="(item,index) in 数组" (item每一项,index下标)

  • {{item}}
  • v-for中的key

    • {{item.id}}{{item.name}}{{item.author}}

    加key相当于每一列加了名字

    不加v-for的默认行为会尝试原地修改元素(就地复用)

    v-model

    作用:给表单元素使用,双向数据绑定--->可以快速获取或设置表单元素内容

    语法:v-model="变量"

     

    你可能感兴趣的:(前端,vue.js,前端,javascript)