Vue学习（一）跟着官方文档入门

最新推荐文章于 2025-04-07 17:37:31 发布

原创最新推荐文章于 2025-04-07 17:37:31 发布 · 511 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js

vue 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Vue中直接和间接控制DOM元素，以及数据渲染的基本指令，重点讲解了数据绑定、v-model、v-bind和组件之间的prop数据传递。通过实例演示了如何通过prop将不同数据传递给组件并结合使用。

DOM元素的控制

直接控制
在vue之前，原生js通过document对象控制html元素，像jQuery简化了这个操作，但是不管怎样都是一回事：使用某个选择器通过id、class来从DOM树中选择想要操作的元素，再进行页面上的更改。
间接控制
而vue的做法是，将页面元素和变量绑定在一起，页面就会随着变量的变化而变化.这个绑定的动作在vue里的用词是挂载。(这里的变量实际上应该是vue对象，但是说变量更加直观一点)

例子

官方第一个例子给了一个基本的挂载模板，将id为“app”的html元素绑定到了app这个vue对象上。el类似于选择器的作用，data就是可以用来操作的数据了。
在这里插入图片描述
那么现在目标框内的内容显示的是Hello Vue!，现在直接通过浏览器控制台改变要怎么做呢？

按传统方法，应该通过document对象获取id为’app’的元素，然后innerText来更新:

页面就会发生变化
而按照vue的方法，此时js里面已经有一个变量app

可以看到这个app是一个Vue对象，它挂载在id为’app’的元素上，在id为’app’的<div>标签里的内容跟随了了app对象里的成员变量message。所以直接修改变量app的message元素就可以更改’app’div里面的文本内容：

有意思的是，修改失败了。说明操作document之后破坏了vue的挂载关系，那么刷新一下页面，再试试看。

这样就是成功的。

渲染方式

先厘清一下概念

绑定
首先，vue对象和DOM元素建立联系的过程叫做的绑定。
vue实例(对象)中el属性:代表Vue的作用范围，在Vue的作用范围内就可以使用Vue的语法。el属性中可以书写任意的CSS选择器[jquery选择器],但是在使用Vue开发是推荐使用 id选择器（注意: el属性值不能指定body或html标签

vue对象的data部分和绑定无关，因为这要用另一术语来描述：数据渲染。
渲染
渲染就是页面上的数据展示，在这里就是用app对象的数据（data）控制页面元素’app’的展示内容,这里用的是双层花括号的方法，将app对象的数据成员message放到了’app’元素的文本展示区。

对于上面的例子来说，是vue对象单向挂载到了’app’元素上，因为通过document改变’app’的内容不会影响到app的message值。

数据渲染的指令

如 v-bind attribute 这样的语句被称为指令。
指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。

vue实例(对象)中data属性: 用来给Vue实例绑定一些相关数据, 绑定的数据可以取出操作，这个过程有下面几种指令：

v-text
通过{{变量名}}在Vue作用范围内取出数据，可以在{{}}中书写表达式,运算符,调用相关方法,以及逻辑运算等。这种双重花括号的绑定方式，是v-text的简化版本。

v-text的一般使用是这样：
```
 <div v-text="msg"></div >
```
v-text的作用类似于原生js中的innerText，是单向绑定，即数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值

v-html
v-html用于输出html，它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。

<div id="app">
    <p v-html="html"></p>
</div>

let app = new Vue({
        el: "#app",
        data: {
            html: "<b style='color:red'>v-html</b>"
        }
    });

v-model

v-model通常用于表单组件的绑定，例如input，select等。它与v-text的区别在于它实现的表单组件的双向绑定，如果用于表单控件以外标签是没有用的。
```
<div id="app">
  <input v-model="message " />
</div>
var app = new Vue({
   el : '#app',
   data : {
    message : 'hello world'    
 }
})
```
v-bind
官网对该指令的解释是“将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致”
意思其实就是，用v-bind可以将data中的数据和元素中的属性绑定在一起。

这里就是将message绑定到了span标签的’title’元素。

弄清楚挂载和数据渲染的概念之后，v-for、v-if等都只是数据渲染的不同姿势而已，需要的时候参照一下官网的例子即可。下一个值得关注的知识点是组件。

组件

概念

在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。

官方一句话这样定义组件，说白了就是自定义的一个html标签.

例子

在这里插入图片描述
template配置的内容就是自定义标签里的内容。

数据传递

prop

对于上面的组件构建，文档里说：

但是这样会为每个待办项渲染同样的文本，这看起来并不炫酷。我们应该能从父作用域将数据传到子组件才对。

这句话的意思是说，单单按上面的方法构建组件还不够，因为这样创建一个组件在每个用到这个组件的地方都是同样的数据，得搞一个操作，让每个组件使用的时候可以传入不同的数据。

所以给出了组件定义的改良：
在这里插入图片描述
其实就是多了一个prop的配置，关于prop，官方解释为：

Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个 property。为了给博文组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中：

Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

通俗来讲，就是可以给自定义的html标签配上参数，就像"<div id=‘xxx’ class=‘xxx’ />"里的id、class这种参数一样。组件上配置了props里有哪些参数，使用对应标签时就可以带上这些参数。
对于上面这个组件来说，template里面使用了title这个参数传入的数据，用h3的标题格式来展示。
使用：
在这里插入图片描述