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事件对象

 <button @click="f1('a',$event)"  >按钮</button>
 
         f1(a,e){
            console.log(a,e.target);
        },
        
 注意：如果没有其他参数时，则$event可以不写，同时函数后的()也不能写，形参的第一个参数就是event对象
  <button @click="f1"  >按钮</button>
    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<a href='http://www.baidu.com'>跳转</a>"
        }
    }

}
</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的后面

        <span v-if="isb1">胖孩</span>
        <span v-else-if="isb2">蜘蛛</span>
        <span v-else>青蛙</span>

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中引入图片

直接引入死的图：

<img src="@/assets/logo.png" alt="">

引入动态的图：

<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>