vue框架 v-*的指令
"""
1、简述vue框架的作用和优势
作用:开发前后台分离项目
优势:前后台分离(开发效率)、轻量级(开发效率)、中文API(学习成本)
框架的特点:数据驱动、虚拟DOM、单页面应用(很好适配移动端项目)、数据的双向绑定(监听机制)
2、列举出三个vue的指令,并简述每个指令的用法
v-text: v-text="变量",类似{
{ 变量|基本类型|简单表达式 }} => 设置文本
v-html: 可以解析有html语法的文本 => 设置html文本
v-on: v-on:事件名="方法名" | v-on:事件名="方法名($event, ...)" => 设置事件
<div v-*=""> </div>
3、列举出至少三个vue实例成员,并简述每个实例成员的用法
el: id选择器,body html不能作为挂载点,只匹配一个
data:提供渲染的数据
methods:提供绑定的方法
delimiters:插值表达式标识符, ['{
{', '}}']
filters:提供自定义过滤器,过滤器可以同时过滤多个参数,还可以串联过滤器
let data = {}
new Vue({
'el': '#app',
data,
...
})
4、js补充
对象
类:class function
类属性:Vue.prototype.类属性
函数:let fn = () => {}
"""
大纲
"""
1)指令
属性指令:v-bind
表达指令:v-model
条件指令:v-show v-if
循环指令:v-for
斗篷指令:v-cloak
2)实例成员
计算:computed
监听:watch
3)vue项目环境
"""
斗篷指令(了解)
v-cloak:避免屏幕闪烁
"""
v-cloak:避免屏幕闪烁
1)属性选择器,会将v-cloak属性所在的标签隐藏
2)当vue环境加载后,会将v-cloak属性解析移除,所以内容{
{ num }}就会显示出来
3)而现在vue已经准备完毕,所以用户会直接看到数值10,而不会看到 页面从{
{ num }}闪烁成数值10 """
<style>
[v-cloak] {
display: none;
}
</style>
<div id="app" v-cloak>
<p>{
{ num }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
num: 10
},
})
</script>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
/**
1)属性选择器,会将v-cloak属性所在的标签隐藏
2)当vue环境加载后,会将v-cloak属性解析移除,所以内容{
{ num }}就会显示出来
3)而现在vue已经准备完毕,所以用户会直接看到数值10,而不会看到 页面从{
{ num }}闪烁成数值10
*/
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<p v-on:click="fn">{
{ num }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// v-cloak:避免屏幕闪烁
new Vue({
el: '#app',
data: {
num: 10
},
methods: {
fn () {
if (this.num <= 0) {
return false;
}
this.num -= 2
}
}
})
</script>
</html>
结果:
属性指令
属性指令:v-bind:属性名="变量"
"""
/** 属性指令
* 1)语法:v-bind:属性名="变量"
* 2)针对不同属性,使用方式稍微有一丢丢区别
* i)自定义属性以及title这些,直接赋值的,使用方式如下(t是变量,'o'是常量)
* &l