vue 模板语法_使用Vue模板语法构建照片库

vue 模板语法

Vue is best used when with its templating features. It becomes very intuitive to build fancy user interfaces.

Vue具有模板功能时最好使用。 构建精美的用户界面变得非常直观。

Take its directives, for example, which refers to tag attributes with the v- prefix.

以其指令为例，该指令引用带有v-前缀的标记属性。

You could have a variable url in your Vue instance that your anchor tag uses as its href. That would look like this:

您可以在Vue实例中有一个可变的url ，您的定位标记用作其href 。 看起来像这样：

<a v-bind:href="url"></a>

<a v-bind:href="url"></a>

Let’s try it with the other directive that we’ll find ourselves using a lot:

让我们尝试一下另一个经常使用的指令：

<a v-on:click="myFunction"></a>

<a v-on:click="myFunction"></a>

That is how we would call one of our component’s functions upon clicking the link.

这就是我们单击链接时将调用组件功能之一的方式。

---

---

Dynamic arguments take your directives to a new level. Consider the following:

动态参数将您的指令提升到一个新的水平。 考虑以下：

<a v-bind:[attributeName]="url">...</a>

<a v-bind:[attributeName]="url">...</a>

attributeName is itself a JavaScript expression like url, interpreted as such because of the square brackets around it.

attributeName本身是一个JavaScript表达式，例如url ，由于其周围的方括号而被解释为此类。

<a v-on:[event]="myFunction"></a> would mean that the event variable could be "hover" or "click" or any other attribute used with v-on.

<a v-on:[event]="myFunction"></a>表示事件变量可以是"hover"或"click"或与v-on一起使用的任何其他属性。

---

---

Let’s go over one more thing.

让我们再看一件事。

The directives v-on and v-bind are so common that we have shortcuts for writing them in Vue; : and @.

v-on和v-bind指令非常常见，以至于我们有在Vue中编写它们的快捷方式。 :和@ 。

So, an img tag with a dynamic attribute could be <img :[classOrId]="value" @click="display"> where display is a function, value is a string variable, and classOrId is also a string variable.

因此，具有动态属性的img标签可以是<img :[classOrId]="value" @click="display">其中display是一个函数， value是一个字符串变量，而classOrId也是一个字符串变量。

---

---

To expand on that, we’re going to create a photo gallery with some of this new fangled template syntax. Get ready!

为了对此进行扩展，我们将使用一些新的模板化模板语法创建一个照相馆。 做好准备！

应用程式设定 (App Setup)

If you don’t have the Vue CLI installed already, start by running either of these commands in your terminal, depending on if you prefer using npm or Yarn:

如果尚未安装Vue CLI，请先在终端中运行以下两个命令之一，具体取决于您是希望使用npm还是Yarn：

$ npm install -g @vue/cli

or

要么

$ yarn global add @vue/cli

Now you’ll be able to run the vue command from the command line. Let’s create a Vue app called alligator-zest

现在，您将能够从命令行运行vue命令。 让我们创建一个名为alligator-zest的Vue应用

$ vue create alligator-zest
$ cd alligator-zest
$ npm run build
$ npm run serve

---

---

Next, we’re going to change HelloWorld.vue to be PhotoGallery.vue. App.vue should look something like this:

接下来，我们将HelloWorld.vue更改为PhotoGallery.vue 。 App.vue应该看起来像这样：

App.vue

应用程序

<template>
  <div id="app">
    <PhotoGallery/>
  </div>
</template>

<script>
import PhotoGallery from './components/PhotoGallery.vue'

export default {
  name: 'App',
  components: {
    PhotoGallery
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

PhotoGallery.vue is where we’re about to get fancy while keeping things simple at the same time. 🌈

PhotoGallery.vue是我们的理想之选，同时让事情变得简单。 🌈

建立我们的画廊 (Building our gallery)

Let’s assume we have 5 photo files in the assets/photos folder named 1.jpeg through 5.jpeg. Use any images you want.

假设在assets/photos文件夹中有五个照片文件，名为1.jpeg到5.jpeg 。 使用任何您想要的图像。

PhotoGallery.vue

摄影画廊

<template>
  <div>
    <ul class="gallery">
      <li v-for="n in 5" :key="n">
        <img
          :src="require('@/assets/photos/' + n + '.jpeg')"
        >
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'PhotoGallery'
}
</script>

<style scoped>
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
.gallery {
  display: flex;
  justify-content: space-around;
}
img {
  width: 20%;
}
</style>

The @ symbol is a webpack alias that points to the src folder.

@符号是指向src文件夹的webpack别名。

Note the display: flex on "gallery" as well as the v-for in the <li> tag. You should be able to see the app in your browser at localhost:8080.

注意display: flex在"gallery"上display: flex v-for在<li>标记中为v-for 。 您应该能够在浏览器中的localhost:8080上看到该应用程序。

Let’s update this code so that when we click on a photo it’s enlarged.

让我们更新此代码，以便在单击照片时将其放大。

PhotoGallery.vue

摄影画廊

<template>
  <div>
    <ul class="gallery">
      <li v-for="n in 5" :key="n">
        <img
             @click="highlight"
          :src="require('@/assets/photos/beijing/' + n + '.jpeg')"
        >
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'PhotoGallery'
},
methods: {
  highlight() {
    event.target.id = "theater";
    let eventIterator = event.target.parentNode;
    while (eventIterator.previousElementSibling != null) {
      eventIterator.previousElementSibling.getElementsByTagName('img')[0].id = "";
      eventIterator = eventIterator.previousElementSibling;
    }
    eventIterator = event.target.parentNode;
    while (eventIterator.nextElementSibling != null) {
      eventIterator.nextElementSibling.getElementsByTagName('img')[0].id = "";
      eventIterator = eventIterator.nextElementSibling;
    }
  }
}
</script>

<style scoped>
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
.gallery {
  display: flex;
  justify-content: space-around;
}
img {
  width: 20%;
}
#theater {
  width: 40%;
}
</style>

We added a v-on:click to each image that sets off the highlight() method. This method makes the image that is clicked-on become larger while ensuring that the others are thumbnail-sized.

我们v-on:click每个图像v-on:click添加了一个v-on:click来启动highlight()方法。 此方法使单击的图像变大，同时确保其他图像为缩略图尺寸。

It sets the id of the clicked image to “theater” which has a larger width. Then, it gets the sibling nodes of the parent node off of the image, the li with the v-for in it. It goes into all of these li tags and sets their respective img tag’s id to a null string to make sure that only one img has the “theater” id at any given time.

它将点击图像的ID设置为具有较大宽度的“剧院”。 然后，它使父节点的兄弟节点脱离图像，其中包含v-for的li。 它进入所有这些li标签，并将它们各自的img标签的id设置为空字符串，以确保在任何给定时间只有一个img具有“剧院” id。

This is cool but it’s still not what we see on the web; how can we get the enlarged image to be a big display, say, under the 5 thumbnails? The end result would be a roll of thumbnails with the selected image enlarged to a real theater size right below. Sounds good, right?

这很酷，但是仍然不是我们在网络上看到的。 我们如何才能在5个缩略图下显示放大的图像？ 最终结果将是一卷缩略图，所选图像放大到正下方的真实影院大小。 听起来不错吧？

We’re going to add the following:

我们将添加以下内容：

<div id="frame">
  <img
    :src="this.theatrical"
  >
</div>

data() {
  return {
    theatrical: ""
  }
},
methods: {
  highlight() {
    event.target.id = "theater";
    this.theatrical = event.target.src;

And finally, add the following to your CSS.

最后，将以下内容添加到您CSS中。

#frame img {
  width: 80%;
}

Check it out in your browser!

在浏览器中查看！

The big frame is filled up by the photo that you clicked-on since its src attribute gets set when you click. Now you have a nice gallery view of your photos!

因为单击时设置了其大写边框的src属性，所以大边框由您单击的照片填充。 现在，您可以很好地浏览照片了！

All with some nifty use of Vue’s reactivity system, data properties, and template syntax. 🧪

所有这些都很好地使用了Vue的React系统，数据属性和模板语法。 🧪

翻译自: https://www.digitalocean.com/community/tutorials/vuejs-vue-template-syntax

vue 模板语法