Rain 的个人主页
Vue

Vue

Sun Sep 15 2024
Pin
10 minutes
tech Blog Project
1307 words

Vue#

创建一个Vue应用#

前提条件

  • 已安装18.3或更高版本的 Node.js
PLAINTEXT
1
2
3
4
npm create vue@latest
cd your-project-name
npm install
npm run dev

API风格#

项目结构#

PLAINTEXT
1
2
3
4
5
6
7
8
9
.vscode 		--- VSCode工具配置文件
node_modules 	--- Vue项目的运行依赖文件夹（npm install生成）
public 			--- 资源文件夹（浏览器图标等等）
src				--- 源码文件夹（在此写代码）
.gitignore 		--- git忽略文件（团队协同文件）
index.html		--- 入口HTML文件
package.json	--- 信息描述文件
README.md		--- 注释文件（对该项目的解释）
vite.config.js	--- Vue配置文件

模板语法#

文本插值#

最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法（ 即双大括号[object Object] )

双大括号中的标签会被相应组件实例中的变量替换

VUE
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<templete>
	<h3>模板语法</h3>
	<p>{{ msg }}<p>
	<p>{{ number+1 }}
    <p>{{  ok? "yes" : "no"}}</p>
    <p>message.split("").reverse().join("") </p>
<templete>

<script>
	export default{
		data(){
			return{
				msg:"神奇的语法",
				number:10,
				ok:true,
				message:"大家好"
			}
		}
	}
<script>
VUE
1
2
3
4
<--没有返回值-->
{{ var a = 1 }}
<--有返回值，但不是单一表达式-->
{{ if(ok) {return message} }}
原始HTML#

双大括号会将数据解释为纯文本，而不是HTML语言。若想实现HTML需使用 v-html指令

  • 这里我们遇到了一个新概念：v-html 被称为一个指令。指令由v-为前缀
VUE
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
	<p>
    	纯文本: {{ rawHtml }}
    </p>
	<P >
      属性: <span v-html="rawHtml"></span>  <--相当于p嵌套span标签-->
    </P>
</template>

<script>
	export default{
    	data(){
    		return{
                rawHtml:"<a href="https://rainn.asia“>测试</a>"
            }
    	}
	}
</script>
Attribute 绑定#

双大括号不能在Html attribute 中使用，例：id={{ dynamicid }}

VUE
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
	<div id={{ dynamicid }}>
        测试
    </div>
</template>

<script>
	export default{
        data(){
            return{
                dynamicid:"appid"
            }
        }
    }
</script>

需要使用v-bind指令

<div v-bind:id="dynamicid"> 测试 </div

注：如果键值为null或undefined 将不会显示（该attribute 将会从渲染的元素上移除）

VUE
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
	<div v-bind:id="dynamicid" v-bind:class="dunamicClass" v-bind:title="dynamictitle">
        测试
    </div>
</template>

<script>
	export default{
        data(){
            return{
                dynamicid:"appId",
                dynamicClass:"appclass",
                dynamictitle:"appTitle"
            }
        }
    }
</script>

<style>
    .dynamicid{
        color:red
    }
</style>

__由于v-bind非常常用，所以提供了简写 __

<div :id="dynamicid"></div>

布尔型 Attribute#

布尔型 attribute 依据 true / false 值来决定 attribute 是否应该出现在该元素上，disabled就是常见的例子之一

<button :disabled="isButtonDisabled">测试</button>

VUE
1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
	<button :disabled="isButtonDisabled">测试</button>
</template>

<script>
	export default{
        data(){
            return{
                isButtonDisabled:true
            }
        }
    }
</script>
动态绑定多个值#

如果有多个对象具有共同的 多个attribute，为了方便，可以把它们 ‘打包’ ，使用无参的v-bind

<div v-bind="objectOfattrs">

VUE
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
	<div v-bind="objectOfattrs">
        测试1
    </div>
	<div v-bind="objectOffattrs">
        测试2
    </div>
</template>

<script>
	export default{
        data(){
            objectOfattrs:{ 
            	id : "appid",
                class: "appclass"
            }
        }
    }
</script>

条件渲染#

v-if#

v-if 指令用于条件性的渲染（显示）一块内容，这块内容只会在指令的表达式返回__真__时才被渲染

VUE
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
	<h3>条件渲染</h3>
	<div v-if="flag">Can you see me or not!</div>
</template>

<script>
	export default{
        data(){
            retrun{
                flag:true
            }
        }
    }
</script>
v-else#

可以使用v-else 指令添加一个 “else区块”

VUE
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
	<div v-if="flag">Can you see me or not?</div>
	<div v-else>Just look at me! </div>
</template>

<script>
	export default{
        data(){
            retrun{
                flag:false
            }
        }
    }
</script>
v-else-if#

该指令提供的是一个相应于 v-if 的 “else if 区块”。它可以连续多次重复使用，而上者，只能使用一次

VUE
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
	<div v-if="type === 'A'">A</div>
	<div v-else-if="type === 'B'"> B</div>
	<div v-else-if="type === 'C'">C</div>
	<div v-else>not A/B/C </div>
</template>

<script>
	export default{
        data(){
            retrun{
                type:D
            }
        }
    }
</script>

说明：v-if 、v-else-if、v-else 必须挨着使用

v-show#

另一个可以用来条件性地渲染元素的指令是 v-show

区别#

v-if

：是 “真实的” 按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件 都会被销毁与重建

v-show：元素无论初始条件如何，始终会被渲染，只有CSS display 属性会被切换

​ v-if 直接被销毁，v-show 仍然显示哈

20240905222644.png

总结：

v-if有更高的切换开销 ; v-show 有更高的渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。

列表渲染#

v-for#

我们可以使用一个v-for 指令基本于一个数组来渲染一个列表，v-for 指令的值需要使用item of items形式的特殊语法，其中 item 是迭代器 ，item 源数据

v-for 遍历普通数组#
VUE
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
	<p v-for="(name,index) of names">
        {{ name }}:{{ index }}
    </p>
</template>

<script>

    export default{
        data(){
            retrun{
                names: ["hello","world"]
            }
        }
    }

</script>
v-for遍历对象数组#
VUE
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<tempalte>
    <div v-for="(result) of results">
    <p> {{ result.id }} </p>
    <p> {{ result.title }}</p>
    <img  v-bind:src= "restult.ph" />
    </div>
</tempalte>

<script>
	export default{
        data(){
            return{
                 results:[
                    {
                        id: 1,
                        title: "vue",
                        ph: "https://free2.yunpng.top/2024/09/12/66e2dbe3b7bdf.png"
                    },
                    {
                        id: 2,
                        title: "good",
                        ph: "https://free2.yunpng.top/2024/09/12/66e2dbe3b7bdf.png"

                    },
                ]
            }
        }
    }
</script>
v-for遍历一个对象#
代码
VUE
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
  <p v-for="(value,key,index) of userInfo">
      {{ value }}-{{ key }}-{{ index }}
  </p>
</template>

<script>
  export default{
      data(){
          return{
              userInof:{
                  name: "iwen",
                  age: 20
              }
          }
      }
  }
</script>