vue挂载根标签的属性是

vue挂载根标签的属性如下。

1、自定义属性props->组件的propos中声明的属性。

2、原生属性attrs->没有声明属性，默认自动挂载在组件的根元素上，inheritAttrs可以关闭自动挂载。

3、特殊属性class、style->挂载到组件根元素上，支持字符串、对象、数组等多种用法。

$event：当前触发的是什么事件

$eventtarget:触发事件的元素对象（不一定是绑定事件的对象，会因为事件冒泡变化）

$eventcurrentTarget:绑定事件的元素对象

参考：

vue中关于$event的通俗理解

Vue 点击获得父元素，子元素，兄弟元素（DOM *** 作）

Vue是一套用于构建用户界面的渐进式框架，该框架被设计为可以自底向上逐层应用，与其他大型框架大为不同。该框架核心库只关注视图层，既易于上手，又能通过npm包管理器与第三方库整合。

一、什么是Vue？

官方给出的概念：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的前端框架。

1、构建用户界面

用 vue 往 html 页面中填充数据，非常的方便

2、框架

框架是一套现成的解决方案，程序员若想使用只能遵守框架的规范，去编写自己的业务功能

学习 vue，就是在学习 vue 框架中规定的用法

vue 的指令、组件（是对 UI 结构的复用）、路由、Vuex、vue 组件库等都是框架的一部分

二、vue 的两个特性

1、数据驱动视图

概念

在使用了 vue 的页面中，vue 会监听数据的变化，从而自动重新渲染页面的结构 数据的变化会驱动视图自动更新

好处：程序员只管把数据维护好，那么页面结构会被 vue 自动渲染出来

2、双向数据绑定

概念

js 数据的变化，会被自动渲染到页面上 页面上表单采集的数据发生变化的时候，会被 vue 自动获取到，并更新到 js 数据中

开发者不再需要手动 *** 作 DOM 元素，来获取表单元素最新的值

3、实现原理--MVVM

概念

MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。

MVVM 指的是 Model、View 和 ViewModel， 它把每个 HTML 页面都拆分成了这三个部分，如图所示：

在 MVVM 概念中：

Model 表示当前页面渲染时所依赖的数据源。

View 表示当前页面所渲染的 DOM 结构。

ViewModel 表示 vue 的实例，它是 MVVM 的核心。

工作原理

ViewModel 为 MVVM 的核心

它把当前页面的数据源（Model）和页面的结构（View）连接在了一起。

当数据源发生变化时，会被 ViewModel 监听到，VM 会根据最新的数据源自动更新页面的结构 当表单元素的值发生变化时，也会被 VM 监听到，VM 会把变化过后最新的值自动同步到 Model 数据源中

三、Vue的基本使用

步骤

① 导入 vuejs 的 script 脚本文件

② 在页面中声明一个将要被 vue 所控制的 DOM 区域

③ 创建 vm 实例对象（vue 实例对象）

如下图所示

四、指令

1概念

指令（Directives）是 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构

2类型

vue 中的指令按照不同的用途可以分为如下 6 大类：

① 内容渲染指令

② 属性绑定指令

③ 事件绑定指令

④ 双向绑定指令

⑤ 条件渲染指令

⑥ 列表渲染指令

21 内容渲染指令

（1）v-text 指令

缺点：会覆盖元素内部原有的内容

（2）{{ }} 插值表达式：只是内容的占位符，不会覆盖原有的内容

专门用来解决 v-text 会覆盖默认文本内容的问题

（3）v-html 指令的作用：可以把带有标签的字符串，渲染成真正的 HTML 内容

22 属性绑定指令

注意：插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中！

使用 v-bind: 指令，为元素的属性动态绑定值；

简写是英文的 :

在使用 v-bind 属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号，例如：

<div :title="'box' + index">这是一个 div</div>

加上: 后，“” 中的表达式都按照 js表达式编译，因此字符串类型数据要加上单引号

23 事件绑定指令

（1）v-on: 简写是 @

（2）通过 v-on 绑定的事件处理函数，需要在 methods 节点中进行声明

（3）语法格式为：

<button @click="add"></button>

methods: {

add() {

// 如果在方法中要修改 vue实例data 中的数据，可以通过 this 访问到

thiscount += 1

}

}

（4）$event 的应用场景：如果默认的事件参数对象 e 被覆盖了，则可以手动传递一个$event。

（5）事件修饰符：

prevent 阻止默认跳转行为

<a @clickprevent="xxx">链接</a>

stop 组织冒泡

<button @clickstop="xxx">按钮</button>

capture 以捕获模式触发当前的事件处理函数

onece 绑定的事件只触发一次

self 只有在eventtarget是当前元素自身时触发

（6）按键修饰符：

在监听键盘事件时，我们经常需要判断详细的按键。此时，可以为键盘相关的事件添加按键修饰符， 例如：

24 双向绑定指令

（1）v-model

data中的对象与绑定的输入框中的内容时刻保持一致

辅助开发者在不 *** 作 DOM 的前提下，快速获取表单的数据

<div>

<input v-model="username" />

<input v-model="password" />

</div>

const vm = new Vue(){

data:{

username: '',

password: ''

}

}

（2） v-model 指令的修饰符

//number 自动将用户的输入值转为数值类型

<input v-modelnumber="age" />

//trim 自动过滤用户输入的首尾空白字符

<input v-modeltrim="msg" />

//lazy 在“change”时而非“input”时更新,类似“防抖”

<input v-modellazy="msg" />

25 条件渲染指令

（1）v-show

原理：动态为元素添加或移除 display: none 样式，来实现元素的显示和隐藏

如果要频繁的切换元素的显示状态，用 v-show 性能会更好

（2）v-if

原理：每次动态创建或移除元素，实现元素的显示和隐藏

如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来，此时 v-if 性能更好

javaScript 框架

简化Dom的 *** 作

响应式数据驱动

简单的vue程序：

1导入开发版本的vueis

2创建vue实例对象，设置el属性和data属性

3使用简介的模版语法把数据渲染到页面上

vue实例可以使用双标签挂载，不能使用HTML和BODy来进行

v-text 设置标签的文本值 (覆盖标签中全部的内容 {{}} el只会替换相应的值)

v-html (1内容中有html结构会被解析成标签 2设置元素的innerHTML)

注：解析文本使用 v-text 解析hml使用v-html

v-on(1为元素绑定事件，2事件名不需要写on,3指令可以简写@ 4绑定的方法定义在methods属性中5方法内部可以通过this关键字访问定义data中的数据)

计数器（创建实例v-on事件和方法绑定，实时更改数据）

v-show(1根据元素的真假切换元素的显示状态 2原理是修改元素的display实现元素的隐藏)

v-if(1根据表达式的真假切换元素的显示状态 2本质是 *** 作dom 3表达式的值是true时，元素存在于dom树中，为否是从dom树中移除)

注：v-show和v-if的区别：

v-show：只是改变了display属性的 *** 作

v-if：改变的是dom数

实际情况 频繁切换的使用v-show

v-bind (1为元素绑定属性 2完整写法v-bind:属性名 3简写的话可以只写:属性名)

切换（1用数组来存放元素 2用v-on来绑定事件 3用v-bing来修改元素的属性）

v-for(1根据数据生成列表 2v-for长和)

v-on (补充)（1时间绑定的方法写成函数调用的形式，可以传入自定义参数

2定义方法时定义形参数来接受传入的实参

3通过修饰符可以对事件进行限制）

例如：@keyupenter

v-model(1便捷的设置和获取表单元素的值

2绑定的数据会和表单元素值相关联

3 表单的 数据=绑定的数据)

记事本实战演练(1增加 2删除 3隐藏 4清空 )

注：shift()函数删除的是数组中的第一个元素 使用splice删除指定的某个元素

获取DOM或者组件实例可以使用ref属性，写法和vue20需要区分开 。

总结：

1Vue2中可以通过ref直接 *** 作单个DOM和组件 this$refsinfoinnerHTML

2Vue2中可以批量通过ref *** 作DOM和组件 this$refsfruit[0]innerHTML

vue30里面模板的ref是跟着定义走的（先定义再使用， 模板中的名字和定义的名字要一致 ）先返回再使用

vue20里面的使用是跟着模板走（先模板中用，然后根据模板使用ref， 获取DOM的ref要和模板的一样 ）

总结： *** 作单个DOM或者组件的流程

1定义一个响应式变量

2把变量返回给模板使用

3模板中绑定上述返回的数据

4可以通过info变量 *** 作DOM或者组件实例

1定义 *** 作DOM的函数----通过形参获取单个DOM元素

总结： ref批量 *** 作元素的流程

1定义一个 *** 作DOM的函数

2把该函数绑定到模板上（ 必须动态绑定 ）

3在函数中可以通过参数得到单个元素，这个元素一般可以放到数组中

4通过上述数组即可 *** 作批量的元素

1创建一个Vue实例

通过vue函数创建一个新的vue实例

一个 Vue 应用由一个通过new Vue创建的 根 Vue 实例 ，以及可嵌套的、可复用的组件树组成的。

我们先看看Vue基本的使用,至于组件我们后面详细的在来探讨

<divid="app"><!-- {{ 插值表达式,可以赋值 取值 三元 }} -->{{ msg }}</div><scriptsrc="/node_modules\vue\dist\vuejs"></script><script>// 引入vue后 会白给你一个Vue构造函数letvm=newVue({// 配置对象el:'#app',// 告诉vue能管理那个部分,使用的是querySelectordata:{// data中的数据会被vm所代理msg:'hello world',// 可以通过vmmsg取到对应的内容 ,也可以赋值      }})</script>

2声明式渲染

Vuejs 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

21 关于{{}} 插值表达式

插值表达式,表达式,赋值运算,计算,三元表达式,但是尽量少在这里写逻辑计算

插值：

<!-- HTML ---><divid="app">{{ message }}</div><!-- JS ---><script>newVue({el:'#app',data:{messgae:'hello Vue!'}})</script>

我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？

如果需要确定现在的数据是否已经和DOM建立了关联,形成响应式

可以将js中的new Vue复制给一个全局变量vm此时vm就是Vue实例化对象,未来可能会用它来搞很多事情,但是最常用到它的时候,是通过this关键字来使用它

varvm=newVue({el:'#app',data:{messgae:'hello Vue!'}})

然后在浏览器的js控制台中修改vmmessage值，同时页面也会发生改变

在控制台中输入

vmmessge="你好,Vue"

22使用 JavaScript 表达式

迄今为止，在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vuejs 都提供了完全的 JavaScript 表达式支持。

{{ number + 1 }}{{ ok 'YES' : 'NO' }}{{ messagesplit('')reverse()join('') }}<divv-bind:id="'list-' + id"></div>

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。

示例:

<divid="app"><!-- 数字 *** 作 --><p>{{ number + 2 }}</p><!-- 三目运算 --><p>{{ ok 'YES' : 'NO' }}</p><!-- 字符串翻转 --><p>{{ messagesplit('')reverse()join('')  }}</p></div><script>constvm=newVue({el:"#app",data:{message:'Hello World',number:10,ok:true,}})</script>

显示结果:

1png

但是有个限制就是，每个绑定双大括号(Mustache语法)里面都只能包含 单个表达式

23 关于data数据

vue关注的是数据变化,不需要在像以前一样关注DOM的变化

比如我想在2秒之后让页面发生变化,我们只需要在2秒后更改数据就可以了

varvm=newVue({el:'#app',data:{msg:'hello world'}})setTimeout(function(){vm$datamsg="bye world"},2000)

关于实例介绍:

示例中vm是Vue的实例对象,

实例对象上有$data属性,其值就是选项对象中data属性值

选项对象就是在实例化Vue时传入的对象

data属性值是一个对象,因此$data也就是这个对象

当通过$data修改msg的值时,也就等于改data中的值, 对应是引用类型

因此示例的结果就是:

2秒后data数据中msg的值改变了, 又因为Vue是始终在关注着msg这个数据,一旦数据发生变化,就会触发Vue的响应式, 继而改变视图显示

24 再次理解MVVM模式

在上一节讲Vue的mvvm模式的时候就有提到,

Vue实例对象就是vm,data数据就是model,  页面显示的结果就是view

再来看一下mvvm的图

mvvmjpg

这张图在配合刚才的示例, 我们就能很好的理解,当数据Model发生变化以后, Vue就可以通过Data Bindings了解到,然后使用新的数据去改变页面显示

至于Vue如何通过DOM Listeners监听页面的改变,来改变数据,这个我们之后讲到在说

3实例上的方法

除了数据属性，Vue 选项对象中还暴露了一些有用的属性与方法。在通过实例对象使用选项对象的属性时,属性前面都需要带上前缀$，以便与用户定义的属性区分开来。例如：

vardata={a:1}varvm=newVue({el:'#example',data:data})vm$data===data// => truevm$el===documentgetElementById('example')// => true

31 实例上常用的属性和方法

vm$attrs// 用户获取父组件传递给子组件的属性,(除props,class,style外)vm$data// vm 上的数据vm$watch// 监听vm$el// 当前el元素vm$set// 后加的属性实现响应式vm$options// vm 配置 上的 所有属性vm$nextTick(()=>{})// 异步方法,等待渲染dom完成后来获取vmvm$refs// 获取dom元素或者组件实例的引用

其实我们可以创建一个Vue实例,然后在控制台上打印这个实例对象,你会看到很多的属性和方法

constvm=newVue({el:"#app",})

在控制台输入vm

显示结果:

实例属性png

这里面很多属性,我们暂时不用去关心他,因为随着学习的深入,慢慢都会学习到的

4实例化多个vue

我们可以在页面上同时实例化多个Vue, 不同的实例接管页面上不同的区域

看下如下的示例:

##  <h1>实例化多个Vue对象</h1><divid="app-one"><h2>{{ title }}</h2><p>{{ greet }}</p></div><divid="app-two"><h2>{{ title }}</h2><p>{{ greet }}</p><buttonv-on:click="changeTitle">点击改变app-one的h2的内容</button></div><script>//  Vue实例varone=newVue({el:'#app-one',data:{title:" vue-app-one的内容"},computed:{greet:function(){return"Hello App One"}}})//  Vue实例vartwo=newVue({el:'#app-two',data:{title:" vue-app-two的内容"},methods:{changeTitle:function(){onetitle="app-one的内容发生改变了"}},computed:{greet:function(){return"Hello App two"}}})</script>

Vue事件和方法还没有讲到, 先做一个了解即可:

示例分析:

两个实例one和two接管了不同的DOM元素,

点击按钮是在two实例接管的DOM元素中,

所以,当你点击时,只会触发two实例中的方法, 也只会改变two实例中的数据

那么问题来了

能否在two实例中修改one实例中的数据呢,

答案当然是可以的啦, 因为变量one是全局变量,

在two实例化中,就可以通过one变量得到第一个Vue实例化对象,

然后就可以通过实例化对象修改数据,这个可以自己尝试写写

5 Vue *** 作DOM元素

虽然Vue是数据驱动的,但是有的时候我们就需要自己手动的获取到DOM元素,对DOM元素进行 *** 作,那么该如何处理呢,

*** 作DOM元素:

在需要 *** 作的DOM元素中使用ref属性,

ref属性的值是自己随便定义的名字

通过Vue实例的$refs属性获取 *** 作dom元素

<divid="app"><divref="wuwei">无为</div></div><script>varvm=newVue({// 根实例el:'#app',data:{},mounted(){//dom元素中有多个一样的ref,dom如果不是通过v-for循环出来的,只能获取一个// 如果是循环出来的,可以获取多个,获取的是一个数组consolelog(this$refswuwei)}});</script>

关于示例中$refs属性的解释:

因为可以在多个DOM元素上使用ref

所以$refs属性获取的是所有具有ref属性的DOM元素的集

因此要想 *** 作确定的DOM元素就需要在通过当初的ref值获取

简而言之: 就是ref在dom元素上通过this$refs自定义名字是获取dom元素

当获取到DOM元素后,然后就可以采用原生的JavaScript对DOM进行 *** 作

注意:

Vue 接管的DOM元素之外的元素使用ref是获取不了的,值是undefined

以上就是关于vue挂载根标签的属性是全部的内容，包括:vue挂载根标签的属性是、vue获取当前点击元素的dom对象、元素上使用v-bind绑定的data-index属性,可以用什么方式来获取index值等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！