当前位置: 首页 > news >正文

vue的相关概念

 概念

1、创建 Vue 实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的:

let app = new Vue({

});

在构造函数中传入一个对象,并且在对象中声明各种 Vue 需要的数据和方法,包括:

- el

- data

- methods

等等 接下来我们一 一介绍。

2、模板或元素

每个 Vue 实例都需要关联一段 Html 模板,Vue 会基于此模板进行视图渲染。 我们可以通过 el 属性来指定。 例如一段 html 模板:

<div id="app">

</div>

然后创建 Vue 实例,关联这个 div 

let vm = new Vue({

el: "#app"

})

这样,Vue 就可以基于 id 为`app`的 div 元素作为模板进行渲染了。在这个 div 范围以外的部 分是无法使用 vue 特性的。 

3、数据

当 Vue 实例被创建时,它会尝试获取在 data 中定义的所有属性,用于视图的渲染,并且监 视 data 中的属性变化,当 data 发生改变,所有相关的视图都将重新渲染,这就是“响应式“系统。

<div id="app">
<input type="text" v-model="name" />
</div>

JS:

let vm = new Vue({

el: "#app",

data: {

name: "刘德华"
}
})

 name 的变化会影响到`input`的值

 input 中输入的值,也会导致 vm 中的 name 发生改变

4、方法

Vue 实例中除了可以定义 data 属性,也可以定义方法,并且在 Vue 实例的作用范围内使用。

<div id="app">

    {{num}}

<button v-on:click="add">加</button>
</div>


let vm = new Vue({

el: "#app",

data: {

num: 0

},

methods: {

add: function () {

// this 代表的当前 vue 实例

this.num++;
                   }
        }
})

安装 vue-devtools 方便调试  

 打开浏览器控制台,选择 vue 

安装 vscode 的 vue 插件 

安装这个插件就可以有语法提示 

指令

什么是指令?

 指令 (Directives) 是带有 `v-` 前缀的特殊特性。

 指令特性的预期值是:单个 JavaScript 表达式。

 指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。例如我们在入门案例中的 v-on,代表绑定事件

格式:{{表达式}}

说明:

 该表达式支持 JS 语法,可以调用 js 内置函数(必须有返回值)

 表达式必须有返回结果。例如 1 + 1,没有结果的表达式不允许使用,如:let a = 1 + 1;

 可以直接获取 Vue 实例中定义的数据或函数

相关文章:

  • python驾到~障碍通通闪开,美女批量入内存~
  • 【UV打印机】RYPC打印软件教程(六)-系统维护
  • 数据库语句的基本
  • 【备战蓝桥杯 | 软件Java大学B组】十三届真题深刨详解(1)
  • 【MATLAB教程案例25】常用图像变换域的matlab仿真分析——DFT频域,DCT域,小波域等
  • VcXsrv XLaunch 闪退 failed to bind listener 的解决方法
  • 一些特殊SQL使用Mybatis的#{}和${}注意点
  • rpcs3模拟器配置要求是什么?
  • paddleNLP 安装
  • 【算法笔记】位运算详解
  • 《设计模式》装饰者模式
  • SpringBoot--在Entity(DAO)中使用枚举类型
  • Session(服务端会话跟踪技术)
  • CVPR2022 BatchFormer
  • EXCEL中ADDRESS函数的使用
  • libtorch c++ 搭建分类网络进行训练和预测
  • 初学前端-JavaScript(语法)
  • Hold the door!protobuf从PC到STM32的互相通信
  • 【allegro 17.2软件操作保姆级教程一】软件操作环境设置
  • Python基础内容训练11(面向对象进阶)
  • JavaEE day6 初识JavaScript
  • 学生护眼灯怎么选择?分享适合学生的护眼灯
  • Opencv项目实战:20 单手识别数字0到5
  • 【教程】Python实时检测CPU和GPU的功耗
  • ESP32设备驱动-MCP4725数模转换器驱动
  • 电商项目之同一笔单多次收款成功