挂载点

一个html标签id与一个vue里面el值一致，则这个html标签就是vue实例的挂载点，例如下图：

div的id是root，new Vue里面el的值是“#root”，则root这个标签就是Vue实例的挂载点。挂载点的作用就是Vue实例里面的方法、数据等只会处理挂载点范围内的元素。

模板

挂载点里面的内容都叫模板，模板可以直接写在挂载点里面如下图一，也可以写在Vue实例里面的template里面如图二，

两种写法效果一样。

实例

在Vue里面绑定好挂载点，写好模板、数据等，Vue实例会根据这些规则生成展示的内容显示在挂载点中。

如上图显示成HTML页面代码：

数据

Vue实例里面的data项，可以创建任意数据名字和数据值，并且使用‘{{key}}’（插值表达式）输出到页面。

 当动态data项的数据值改变了标签内容也随之改变，如下例子，当点击‘点击’后，content的值变为‘哈哈’，随之<h1>标签的内容也改变为‘哈哈’，改变页面“从操作dom，变为操作数据”。

事件

监听标签动作，然后做出相对应的反应，比如：监听标签被点击则执行某个函数使用（v-on:click="functionName"/ @click="functionName"）。

方法

Vue实例里面的methods项,定义一些列方法供挂载点内使用。

常用标签内指令

v-text

标签里面的内容由变量的值决定，如图，<H1>标签内容是‘word’

v-html

与v-text一样，把值绑定到标签内容，用v-html绑定的值如果存在html标签不会转义，v-text会转义如下图：

v-on：动作（@动作）

监听标签动作事件，并执行绑定方法

v-bind:属性

单向绑定数据，给标签的属性值绑定与vue实例data项的数据绑定，vue数据改变标签属性值也改变。没点击‘hello world’之前，<h1>标签的title显示的是‘this  is title’，点击以后Vue实例里数据titleValue改变为‘no title’，相对应<h1>标签的title也跟着改变为‘no title’。

v-model

双向绑定数据，给标签的值与vue实例data项的数据绑定，vue数据改变标签的值也改变，标签的值改变vue数据也会改变，与v-bind的差别在于：v-bind标签属性值改变vue数据不会改变。

下面例子，当标签model值改变，标签title1的值也改变；当点击标签model的时候，标签model和标签title1值都变为model。

当标签bind值改变，标签title2的值不改变；当点击标签model的时候，标签model和标签title1值都变为bind。

最后

以上就是精明可乐为你收集整理的VUE学习-挂载点、模板、实例、数据、事件、方法、常用标签内指令挂载点模板实例数据事件方法常用标签内指令的全部内容，希望文章能够帮你解决VUE学习-挂载点、模板、实例、数据、事件、方法、常用标签内指令挂载点模板实例数据事件方法常用标签内指令所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。