Vue常见指令
01：文本指令：v-html / v-text 和插值表达式，名字也必须定义在data中。==
02：事件指令：v-on:click=”事件名”，缩写：@click=”事件名”，注：事件名定义在：methods中
03：属性指令：v-bind:属性名=”data的key” 缩写 : 属性名=”data的key” .注意动静拼接的问题
04：控制指令：v-model=”data的key”，用于获取form控制元素的值。如果的多余3个建议使用对象去定义和获取
05：循环指令：v-for =”(obj,index) in data” 中定义数组的名字” 。
06：条件指令：v-if / v-else-if /v-else 注意中间不能出现标签，否则会出现断层。
07：显示指令：v-show 控制元素的隐藏和显示。（鼠标事件 + v-show /v-if选项卡）
08：渲染指令：v-cloak
09：其他指令：v-pre v-once（== 用的非常的少==）
10、槽指令：v-slot(后续自定义组件使用，自定义代码块的机制)（暂时忽略）
属性指令 -v-bind
作用范围
元素的属性
语法
v-bind或者 简写：:
比如
<div v-bind:title="title"></div>
#或者
<div :title="title"></div>
如何认识元素标签
- 在前端学习，我们会学习元素的标签，有：
- 标签上分为几部分
- 标签名 div p a from
- 标签属性
- 自有属性：class,id,title
- 自定属性：用户自己决定 username
- 行为事件
- js事件去绑定 onclick
- 样式控制
- style
- class
- 文本域
- 总结
<div class="container" id="box" title="我是一个div" @click="alert('1')" username="我是飞哥">{
{test}}/v-html/v-text</div>
错觉：
<div class="container" id="box" title="{
{title}}" @click="alert('1')" username="我是飞哥">{
{test}}/v-html/v-text</div>
案例 - 初认识
v-bind指令：其实就一种解决属性和data动态渲染的一种机制。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>11、属性指令-v-bind.html</title>
</head>
<body>
<div id="app">
<h1 title="">{
{title}}</h1>
<div class="container" id="box1" v-bind:title="title" onclick="alert('1')" v-bind:username="username">我是文本域</div>
<div class="container" id="box2" :title="title" onclick="alert('1')" :username="username">我是文本域</div>
</div>
<script src="js/vue.global.js"></script>
<script>
var vue = Vue.createApp({
data(){
return {
title:"我是一个div",
username:"我是飞哥"
}
},
methods:{
}
}).mount("#app");
</script>
</body>
</html>
案例 - 动静拼接
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>11、属性指令-v-bind.html</title>
</head>
<body>
<div id="app">
<h1 title="">{
{title}}</h1>
<p v-for="(user,index) in users">
{
{user.id}}==={
{user.name}} <a :href="'/detail?id='+user.id+'&name='+user.name">点我查看明细</a>
</p>
</div>
<script src="js/vue.global.js"></script>
<script>
var vue = Vue.createApp({
data() {
return {
users: [
{
id: 1, name: "zhangsan"},
{
id: 2, name: "xiaowen"},
{
id: 3, name: "xiaofei"},
{
id: 4, name: "xiaoshi"},
{
id: 5, name: "xiaocai"},
]
}
},
methods: {
}
}).mount("#app");
</script>
</body>
</html>