VUE学习-挂载点、模板、实例、数据、事件、方法、常用标签内指令

挂载点

一个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。