一、
插值表达式{{}}、v-text、v-html都可以获取变量的值，并将其赋值给界面元素。其中，插值表达式可以在变量前后插入其他内容，v-text会直接替换元素里的内容，v-html则可以渲染html代码。
另外，v-cloak是一个指令，用于防止界面闪烁。在Vue加载之前，v-cloak存在于元素上，Vue加载结束后，v-cloak会被隐藏，从而防止闪烁。
二、
v-bind指令用于将Vue实例的数据绑定到视图层的属性上，你提供了一个很好的例子。在Vue控制下的界面元素中使用该指令可以动态地更新属性值，而不需要手动修改DOM（文档对象模型）。当然，在示例中的代码中很明显，这里给出一些扩充：
1. :class 语法糖
:class是v-bind:class的缩写形式，用于方式中应用对某个类进行操作。
例如，我们有如下数据绑定：
data: {
hasError: true
}
那么就可以通过以下代码片段来设置红色文字样式：
<div v-bind:class="{error: hasError}"></div>
其中，error指定了CSS中对应样式的名称。
2. 绑定 style 对象
我们也可以使用 v-bind 来直接绑定一个样式对象。注意：CSS 属性名可以使用驼峰式（camelCase）或短横线分隔命名（kebab-case），具体取决于您是否希望在 JavaScript 中访问属性 (camelCase) 还是在模板中访问 (kebab-case)。
例如：
<div v-bind:style="{ color: activeColor }"></div>
activeColor 是从 data 中取得的一个字符串。现在这个样式会被应用到这个 div 中，直到 activeColor 发生改变。
三、事件修饰符
- .stop 阻止冒泡
- .prevent 阻止默认事件
- .capture 添加事件侦听器时使用事件捕获模式
- .self 只当事件在该元素本身（比如不是子元素）触发时触发回调
- .once 事件只触发一次
<style>
.box {
height: 200px;
background-color: green;
}
.sub-box {
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<div class="box" @click='clickBox'>
<button @click.stop='clickBtn'>点我</button>
</div>
<a href="http://www.baidu.com" @click.prevent='clickA'>baidu</a>
<h1>capture事件修饰符</h1>
<div class="box" @click='clickBox'>
<div class="sub-box" @click.capture='clickSubBox'>
<button @click='clickBtn'>事件捕获</button>
</div>
</div>
<h1>self事件修饰符</h1>
<div class="box" @click='clickBox'>
<div class="sub-box" @click.self='clickSubBox'>
<button @click='clickBtn'>事件捕获</button>
</div>
</div>
<button @click.once='clickBtn'>once</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
clickBox() {
console.log('点击了盒子')
},
clickBtn() {
console.log('点击了按钮');
},
clickA() {
console.log('点击了a标签')
},
clickSubBox() {
console.log('点击了sub box')
}
},
})
</script>
四、v-model数据双向绑定
- 作用：数据双向绑定
- 注意：绑定的是表单控件
<body>
<div id='app'>
<input type="text" v-model:value='value1'>
<select v-model:value='opration'>
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model:value='value2'>
<button @click='calc'>=</button>
<input type="text" v-model:value='result'>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
value1: '',
value2: '',
opration: '+',
result: ''
},
methods: {
calc() {
switch (this.opration) {
case '+':
this.result = Number.parseFloat(this.value1) + Number.parseFloat(this.value2);
break;
case '-':
this.result = Number.parseFloat(this.value1) - Number.parseFloat(this.value2);
break;
case '*':
this.result = Number.parseFloat(this.value1) * Number.parseFloat(this.value2);
break;
case '/':
this.result = Number.parseFloat(this.value1) / Number.parseFloat(this.value2);
break;
}
}
}
})
</script>
五、Vue中样式的使用
- 数组
- 三木表达式
- 数组内置对象（对象的键是样式的名字，值是Boolean类型）
- 直接通过对象
- 直接在元素上通过 :style 的形式，书写样式对象
- 将样式对象，定义到 data 中，并直接引用到 :style 中
- 在data上定义样式
- 在元素中，通过属性绑定的形式，将样式对象应用到元素中
- 在 :style 中通过数组，引用多个 data 上的样式对象
- 在data上定义样式
- 在元素中，通过属性绑定的形式，将样式对象应用到元素中
<style>
.first {
color: red;
}
.second {
font-size: 25px;
}
</style>
</head>
<body>
<div id='app'>
<!-- 使用多个class -->
<p class="first second">这是一段文字</p>
<!-- 使用变量指定class，根据flag值动态添加class -->
<p :class="[pClass,flag?'second':'']">这是一段文字</p>
<!-- 使用对象指定class，根据flag值添加或删除second class -->
<p :class="[pClass,{'second':flag}]">这是一段文字</p>
<!-- 直接指定class名添加或删除first/second class -->
<p :class="{'first':false,'second':true}">这是一段文字</p>
<!-- 使用内联样式1 -->
<div :style="{'font-size':'32px'}">{{message}}</div>
<!-- 使用内联样式2 -->
<div :style="textStyle">{{message}}</div>
<!-- 同时使用多个内联样式 -->
<div :style="[textStyle,textStyle2]">{{message}}</div>
<!-- 使用方法动态返回样式对象 -->
<div :style="getStyle(2)">{{message}}</div>
</div>
<!-- 创建Vue实例 -->
<script>
var vm = new Vue({
el: '#app', // 挂载元素
// 数据
data: {
message: 'Hello Vue!',
pClass: 'first',
flag: true,
textStyle: {
color: 'red',
'font-size': '50px'
},
textStyle2: {
'font-weight': '600'
}
},
// 方法
methods: {
getStyle(num) {
let obj = {
color: 'red',
'font-size': '50px'
};
if (num == 1) {
obj.color = 'red'
} else {
obj.color = 'green'
}
return obj
}
}
})
</script>
六、V-for和key属性
- 遍历数组，参数(item,index) in list
- 遍历对象，参数(value,key,index) in list
- 遍历数字，num in 10 (1~10)
- key在使用v-for的时候都需要去设置key
- 让界面元素和数组里的每个记录进行绑定
- key只能是字符串或者数字
- key必须是唯一的
<body>
<div id="app">
<ul>
<li v-for="(item,index) in list">{{item.name}}数组的下标{{index}}</li>
</ul>
<h1>迭代对象</h1>
<ul>
<li v-for="(value,key,index) in user">对象的键：{{key}}，对象的值：{{value}},数组的下标{{index}}</li>
</ul>
<h1>迭代数字</h1>
<ul>
<li v-for="num in 10">你好</li>
</ul>
<h1>v-for的key</h1>
<button @click='add'>add</button>
<ul>
<li v-for='(item,index) in list' :key='item.id'><input type="checkbox"> {{item.name}}数组的下标{{index}}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
user: { userId: 19, name: '测试name', age: 18 },
list: [
{ id: 1, name: '张三1' },
{ id: 2, name: '张三2' },
{ id: 3, name: '张三3' },
{ id: 4, name: '张三4' },
{ id: 5, name: '张三5' }
]
},
methods: {
add() {
this.list.unshift({
userId: 10,
name: '新来的'
})
}
},
})
</script>
七、v-if与v-show区别
- 区别：
- v-if删除dom元素
- v-show设置display:none
- 应用场景：
- v-if只修改一次的时候可以使用v-if
- v-show频繁切换的时候可以使用v-show
<body>
<div id="app">
<button @click='change'>切换</button>
<p v-if='flag'>{{ message }}</p>
<div v-show='flag'>{{ message }}</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
flag: false
},
methods: {
change() {
this.flag = !this.flag
}
},
})
</script>
</body>
9776
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
