VUE-基础指令
第一节、vue提供的指令
所谓的指令：就是以v-开头的命令，每一个指令都有自己的功能
位置：标签内部（同属性）
比如：<标签 v-xx=""
vue提供了大量的指令来让程序员实现某些功能，比如v-if / v-else /v-for ...
1 事件监听 v-on指令
所谓的事件同js，点击、焦点、键盘等
在vue中先给一个标签绑定事件：
<标签 v-on:事件类型="简单的业务/函数"
事件类型:click/blur/focus/change/mouseover/keyup....
简单的业务:赋值过程
demo： 一开始动态绑定好name,值是张三，点击按钮后，把name改为李四
简单的业务:
好处：少定义一个方法，偷懒
坏处：如果业务很复杂，用不了的
<template>
<div id="demo1">
{{name}}
<button v-on:click="name='李四'">改变</button>
</div>
</template>
<script>
export default {
data(){
return {
name:"张三",
}
}
}
</script>
注意：
1 tempalte中是可以使用data定义的变量
具体：{{变量}} 或者 指令的引号中="变量"
2 指令中默认也是需要写变量，非要写常量，也需要添加’‘，和{{}}类似
3 无论是{{}} 还是 指令 都支持ES6的模板字符串，指令: v-on:事件="" 这里的引号不能是``,只能是单引或者双引
使用函数：（重点）----需要用到methods注册函数
语法：
<标签 v-on:事件="函数名"
export default {
methods:{
函数(){}
}
}
<template>
<div id="demo1">
我的名字是{{name}}
<button v-on:click="change">改变</button>
</div>
</template>
<script>
export default {
components:{},
data(){
return {
name:"张三",
}
},
methods:{
change(){
//this指向当前组件对象,能够直接点出data定义的数据，也能点出methods定义的方法
console.log(this.name);
this.name='李四'
},
}
}
</script>
注意：
观察所知，this代表当前组件对象，可以点出自己定义的属性(定义在data)和方法（定义在methods中），
因此，我们自定义属性或方法时尽量不要取名 $或者_开头，避免很多冲突
2 方法的使用
2.1基本使用：
<标签 v-on:事件="函数名"
export default {
methods:{
函数(){}
}
}
2.2 简写：
v-on: 可以简写成 @
<button v-on:click="" 等同于 <button @click=""
2.3 同一个标签中可以注册多个事件
有两种写法：
1
<button @click="f1" @mouseover="f2">按钮</button>
2
<button v-on="{click:f1,mouseover:f2}">按钮2</button>
2.4 关于方法的传参问题
<button @click="f1('a','b',1)" >按钮</button>
f1(a,b,c){
console.log(a,b,c);
},
注意：如果不传递参数，则函数名后面的()可写可不写
2.5 关于获取event事件对象
f1(a,e){
console.log(a,e.target);
},
注意：如果没有其他参数时，则$event可以不写，同时函数后的()也不能写，形参的第一个参数就是event对象
f1(e){
console.log(e.target);
},
第二节、v-bind指令
能够把元素的属性写活
语法：
<标签 v-bind:真正的属性=""
真正的属性：该标签本身就拥有的属性 （以下是公共属性：name class style id ...）
demo:
<font v-bind:color="c" v-bind:size="s" >哈皮狗</font>
<button @click="c='yellow'">按钮</button>
<button @click="s--">按钮</button>
</div>
</template>
<script>
export default {
components:{},
data(){
return {
c:"red",
s:7
}
},
简写：
v-bind: 可以简写成 :
<font v-bind:color="c" v-bind:size="s" >哈皮</font>
可以简写成
<font :color="c" :size="s" >哈皮</font>
第三节、 v-html、v-text
该指令能够为标签体赋值
v-html类似于以前innerHTML – 支持标签
v-text类似于以前的innerText --支持文本
<template>
<div>
<span v-html="name"></span>
<hr>
<span v-text="name"></span>
</div>
</template>
<script>
export default {
data(){
return{
name:"wowo跳转"
}
}
}
</script>
v-html、v-text、{{}} 三者的对比
以上三个都是用来设置渲染内容的
1 v-html、v-text 属于指令，而{{}}属于模板
2 只有v-html能够支持标签(支持富文本编辑器)，其余两个都不支持
3 {{}}使用率>>>v-html、v-text，因为更加灵活
第四节、v-show 隐藏和显示
v-show指令可以为控制元素的隐藏和显示，值只能是boolean，true代表显示，false代表隐藏
<标签 v-show="boolean"
第五节、v-if 隐藏和显示
v-if指令可以为控制元素的隐藏和显示，值只能是boolean，true代表显示，false代表隐藏
<标签 v-if="boolean"
1 v-else
1 该指令必须搭配v-if,不能单独存在，代表否则
2 该指令必须写在v-if的后面
3 指令必须写紧挨着v-if,特殊情况例外
功效：可以实现2选一切换功能,替换之前的三元
<span v-if="isb">老沙</span>
<span v-else>呱呱</span>
<button @click="isb=!isb">切换</button>
</div>
</template>
<script>
export default {
data(){
return{
isb:false
}
}
}
</script>
2 v-else-if
1 该指令必须搭配v-if,不能单独存在，代表否则,另外开启一个条件
2 该指令必须写在v-if的后面
胖孩
蜘蛛
青蛙
3 v-if和v-show的区别
共同点：都是来隐藏显示元素的
不同点：
1 v-show:通过样式(display:none/block)来控制隐藏显示
v-if:通过追加和删除节点来控制隐藏和显示的
2 使用场景不同：
2.1 有个按钮，频繁的点击切换隐藏和显示，选择用v-show，因为v-if是节点的追加和删除，性能是低于样式控制的
2.2 如果有根据权限渲染组件的需求 选择用v-if
3 v-show只能单独使用，而v-if可以搭配v-else/v-else-if实现其他功能 (v-if功能更强大写)
第六节、关于vue中的样式
vue中样式分为全局、局部
全局：能够影响所有组件
内部写法：
<style> ... <style>
外部写法：
@import '@/style/s1.css';
@import '@/style/s2.css';
优先级: 父 > 子
局部：只能影响当前组件 （用得最多）
内部写法：<style scoped> ... <style>
外部写法：
<style scoped src="@/style/s1.css">
注意：这里用了src之后则style就不能再写其他样式了，如果想要引入其他外部样式/内部样式，则需要再开一个style标签
第七节、关于vue中引入图片
直接引入死的图：
引入动态的图：
<template>
<div>
<img :src="src" alt="">
</div>
</template>
<script>
let src=require("@/assets/logo.png")
export default {
data(){
return{
src
}
}
}
第八节、devtools插件
安装：最终插件集成到chrome浏览器
作用：随时的观察组件中定义的数据的变化
第九节、修饰符
分为： 事件修饰符、按键修饰符、系统修饰符
修饰符是一个语法糖： 实现相同功能，但是语法更为简单
语法：
@事件.修饰符=""
1 事件修饰符
用来处理冒泡和默认的问题
.stop --阻止冒泡
.prevent --阻止默认
<div id="s" @click.stop="f">div> 阻止冒泡
<a href="" @click.prevent="f">跳转a> 阻止默认
2 按键修饰符
.enter ---用得最多的
.tab
.esc
.delete
.space
.left
.right
.up
.down
<input type="text" @keyup.enter="f">
3 系统修饰符
搭配按键修饰符 提供组合键
.shift
.alt
.ctrl
第十节、$refs和ref
ref用来为某些标签做标记的
this.$refs.ref标记值---》获取被标记的原生dom阶段 （vue）
等效于曾经的document.getElementById()
语法：
<标签 ref="名字"/>
//使用
this.$refs.名字 获取 标签对象
demo:
<input type="text" ref="t">
<button @click="f" >获取值button>
methods:{
f(){
console.log(this.$refs.t.value );
},
}
第十一节、v-for 渲染列表
v-for可以渲染元素,能够支持循环遍历数组、对象、字符串、数字
1 遍历数组
<需要遍历的标签 v-for="item in arr" :key=""
item:自定义变量，代表数组中的每一个元素
arr:data定义的数组数据
key：这是一个属性代表唯一身份，我们需要在循环中为每一个变量的元素设置一个唯一的身份，该身份和我们程序员无关，是你给vue框架的，以后当我们去修改某个元素时，vue就能够拿到之前给的那个唯一身份快速找到元素并且做局部修改，反之如果没有给，则vue会把整个列表重新渲染
---作用就是提升性能
<template>
<div>
<table border="1">
<thead>
<tr>
<td>编号</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>爱好</td>
</tr>
</thead>
<tbody>
<tr v-for="item in stus" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.gender==1?'男':'女'}}</td>
<td>{{item.hobby.join()}}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
stus: [
{
id: 1,
name: "张三",
age: 18,
gender: 1,
hobby: ["吃饭", "睡觉", "打豆豆"],
},
{
id: 2,
name: "张三",
age: 28,
gender: 0,
hobby: ["吃饭", "打豆豆"],
},
{
id: 3,
name: "宅六",
age: 38,
gender: 1,
hobby: ["睡觉", "打豆豆"],
},
{
id: 4,
name: "吴奇隆",
age: 12,
gender: 1,
hobby: ["吃饭", "睡觉"],
},
{
id: 9,
name: "时光飞逝",
age: 11,
gender: 0,
hobby: ["吃饭", "睡觉", "打豆豆"],
},
],
};
},
如果需要下标：
<tr v-for="(item,index) in stus" :key="item.id">
item代表元素，
index代表下标，以上两个都是自定义变量
2 遍历对象
<span v-for="(v,k) in user" :key="k">
{{k}}:{{v}}
</span>
data() {
return {
n:10,
str:"abcdef",
user:{
name:"aaa",
age:"aaa"
},
3 遍历字符串
<span v-for="(item,index) in str">
{{item}}:{{index}}
</span>
data() {
return {
n:10,
str:"abcdef",
user:{
name:"aaa",
age:"aaa"
},
4遍历数字
<span v-for="(item,index) in n">
{{item}}:{{index}}
</span>
data() {
return {
n:10,
str:"abcdef",
user:{
name:"aaa",
age:"aaa"
},
第十二节、template虚拟标签
在vue中提供了<template></template>虚拟标签，该标签在打包后不会产生
作用：能够部分的指令满足某些需求(v-show是不支持的)
<template v-xx="">
<span></span>
<span></span>
<span></span>
</template>
等效于
<span v-xx=""></span>
<span v-xx=""></span>
<span v-xx=""></span>
<tbody>
<tr
v-for="(item, index) in stus"
:key="item.id"
>
<template v-if="item.age>=30">
<td >{{ item.id }}--{{ index }}</td>
<td >{{ item.name }}</td>
<td >{{ item.age }}</td>
<td >{{ item.gender == 1 ? "男" : "女" }}</td>
<td >{{ item.hobby.join() }}</td>
</template>
</tr>
</tbody>
第十三节、v-if 和 key 的搭配
demo：点击按钮切换文本框和密码框
思路1：直接更改type值
<template>
<div>
<input :type="type"> <button @click="f">切换</button>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
type:"password",
};
},
methods: {
f() {
this.type=this.type=='text'?'password':'text'
},
},
};
</script>
思路2：
这里的k是强行让v-if的“物理删除” 生效,避免切换后的数据缓存问题
<template>
<div>
<input v-if="isb" key="1" type="text">
<input v-else key="2" type="password">
<button @click="f">切换</button>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
isb:true
};
},
methods: {
f() {
this.isb=!this.isb
},
},
};
</script>
<style scoped >
#f {
width: 300px;
height: 300px;
border: 1px red solid;
}
#s {
width: 200px;
height: 200px;
border: 1px blue solid;
}
</style>