Vue最好用在其 模板功能时。
举其指令,例如,指标属性与v-前缀。
您可以在您的 Vue 实例中有一个变量url,您的标签将其用作href。
让我们试试其他指令,我们会发现自己使用了很多:
<a v-on:click="myFunction"></a>
这就是我们在点击链接时称呼我们组件的功能之一的方式。
动态论点将您的指令提升到一个新的水平. 考虑以下几点:
<a v-bind:[attributeName]="url">...</a>
attributeName本身就是一个JavaScript表达式,如url,被解释为这样,因为它周围的方块。
<a v-on:[event]="myFunction"></a>意味着事件变量可能是hover或click或用于v-on的任何其他属性。
让我们再来谈一件事情。
指令v-on和v-bind是如此普遍,以至于我们可以用Vue;:和@来编写它们的捷径。
因此,具有动态属性的img标签可以是<img :[classOrId]="value @click="display">,其中display是函数,value是字符串变量,而classOrId也是字符串变量。
为了扩大这一点,我们将创建一个照片画廊,使用这个新的嵌入式模板语法。
App 设置
如果您尚未安装 Vue CLI,请开始在终端中运行这些命令,具体取决于您是否喜欢使用 npm 或 Yarn:
1$ npm install -g @vue/cli
或
1$ yarn global add @vue/cli
现在您将能够从命令行运行vue命令,让我们创建一个名为 alligator-zest 的 Vue 应用程序。
1$ vue create alligator-zest
2$ cd alligator-zest
3$ npm run build
4$ npm run serve
接下来,我们将HelloWorld.vue更改为PhotoGallery.vue。
1[label App.vue]
2<template>
3 <div id="app">
4 <PhotoGallery/>
5 </div>
6</template>
7
8<script>
9import PhotoGallery from './components/PhotoGallery.vue'
10
11export default {
12 name: 'App',
13 components: {
14 PhotoGallery
15 }
16}
17</script>
18
19<style>
20#app {
21 font-family: Avenir, Helvetica, Arial, sans-serif;
22 -webkit-font-smoothing: antialiased;
23 -moz-osx-font-smoothing: grayscale;
24 text-align: center;
25 color: #2c3e50;
26 margin-top: 60px;
27}
28</style>
PhotoGallery.vue是我们即将获得幻想,同时保持事情简单的地方。
构建我们的画廊
假设我们在资产/照片文件夹中有5张照片,名为1.jpeg到5.jpeg。
1[label PhotoGallery.vue]
2<template>
3 <div>
4 <ul class="gallery">
5 <li v-for="n in 5" :key="n">
6 <img
7 :src="https://cdn.jsdelivr.net/gh/andsky/tutorials-images/require('@/assets/photos/' + n + '.jpeg')"
8 >
9 </li>
10 </ul>
11 </div>
12</template>
13
14<script>
15export default {
16 name: 'PhotoGallery'
17}
18</script>
19
20<style scoped>
21ul {
22 list-style-type: none;
23 padding: 0;
24}
25li {
26 display: inline-block;
27 margin: 0 10px;
28}
29.gallery {
30 display: flex;
31 justify-content: space-around;
32}
33img {
34 width: 20%;
35}
36</style>
<$>[注] @ 符号是指向 src 文件夹的 webpack 名称。
请注意画廊上的显示: flex以及v-for在li>标签中,您应该可以在浏览器中看到应用程序在localhost:8080。
让我们更新这个代码,以便当我们点击照片时,它被放大。
1[label PhotoGallery.vue]
2<template>
3 <div>
4 <ul class="gallery">
5 <li v-for="n in 5" :key="n">
6 <img
7 @click="highlight"
8 :src="https://cdn.jsdelivr.net/gh/andsky/tutorials-images/require('@/assets/photos/beijing/' + n + '.jpeg')"
9 >
10 </li>
11 </ul>
12 </div>
13</template>
14
15<script>
16export default {
17 name: 'PhotoGallery'
18},
19methods: {
20 highlight() {
21 event.target.id = "theater";
22 let eventIterator = event.target.parentNode;
23 while (eventIterator.previousElementSibling != null) {
24 eventIterator.previousElementSibling.getElementsByTagName('img')[0].id = "";
25 eventIterator = eventIterator.previousElementSibling;
26 }
27 eventIterator = event.target.parentNode;
28 while (eventIterator.nextElementSibling != null) {
29 eventIterator.nextElementSibling.getElementsByTagName('img')[0].id = "";
30 eventIterator = eventIterator.nextElementSibling;
31 }
32 }
33}
34</script>
35
36<style scoped>
37ul {
38 list-style-type: none;
39 padding: 0;
40}
41li {
42 display: inline-block;
43 margin: 0 10px;
44}
45.gallery {
46 display: flex;
47 justify-content: space-around;
48}
49img {
50 width: 20%;
51}
52#theater {
53 width: 40%;
54}
55</style>
我们将一个v-on:click添加到每个设置highlight()方法的图像中,该方法使被点击的图像变得更大,同时确保其他图像是小图像的大小。
它将点击的图像的 id 设置为剧院,其宽度较大,然后,它将父母节点的姐妹节点从图像中删除,其中有v-for 的 li 进入所有这些 li 标签,并将其相应的 img 标签的 id 设置为 null 字符串,以确保任何时候只有一个 img 拥有剧院 id。
这是很酷的,但它仍然不是我们在网络上看到的;我们如何可以让放大图像成为一个大显示器,比如,在5个小图像下?最终的结果将是一个小图像的滚子,选择的图像被放大到真正的剧院大小就在下面。
我们将添加如下:
1<div id="frame">
2 <img
3 :src="this.theatrical"
4 >
5</div>
1data() {
2 return {
3 theatrical: ""
4 }
5},
6methods: {
7 highlight() {
8 event.target.id = "theater";
9 this.theatrical = event.target.src;
最后,将以下内容添加到您的 CSS。
1#frame img {
2 width: 80%;
3}
<$>[注]在您的浏览器中查看它! <$>
大框架由您点击的照片填充,因为其src属性在您点击时被设置。
所有这一切都包括Vue的反应系统、数据属性和模板语法的一些巧妙的使用。