VUE基础指令以及部分知识

一、vue的使用

1.基础模板以及相应的内容

<!-- 组件的HTML -->
<template>
<!-- 组件的跟标签 -->
<div>
	
</div>
</template>

<!-- 组件的vue代码 -->
<script>

</script>


<!-- 组件的css样式 -->
<style>

</style>

大体上有三个标签组成分别为template、script、style，这三个标签的功能也在上图对应部分写出了，可以做参考。

在template里面有一个根标签，这个标签多写几个也不会报错，但是会影响渲染到页面上的标签结构；然后在在里面写具体内容。

在script里面写vue的代码，以实现对template里内容的操作。

在style里面写css样式，跟html学习时一样，并没有什么变化。

2.在编写代码时的模板

vue代码在export default{ }的大括号中写入

name是当前组件名字写不写都可以，因为不报错，但是写了可以更好的查找

scoped表示改style标签里的样式只作用于当前组件

二、VUE指令

<!-- 组件的HTML -->
<template>
<div>
	<p>{{name}}</p>
	<p>{{age}}</p>
</div>
</template>
<!-- 组件的vue代码 -->
<script>
export default{
	name:"name",
	data() {
		return{
			name:"张三",
			age:24
		}
	}
}
</script>
<!-- 组件的css样式 -->
<style scoped>

</style>

插值表达式：语法{{变量}}

例如

 当然也可以是数组，也可以做判断等

例如

 v-bind

<!-- 组件的HTML -->
<template>
<div>
	<p v-bind:="myValue">666</p>
	
</div>
</template>
<!-- 组件的vue代码 -->
<script>
export default{
	name:"name",
	data() {
		return{
			myValue:{
				class:'cls',
				id:'one'
			}
		}
	}
}
</script>
<!-- 组件的css样式 -->
<style scoped>
.cls{
	color:red;
}
</style>

效果

语法：v-bind:属性名="vue变量"

简写：:属性名="vue变量"

用于绑定变量

v-on

<template>
  <!-- vue指令:   v-on事件绑定-->
  <p>你要买商品的数量: {{ count }}</p>
  <button v-on:click="count = count + 1">增加1</button>
  <button v-on:click="addFn">增加1个</button>
  <button v-on:click="addCountFn(5)">一次加5件</button>

  <button @click="subFn">减少</button>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      count: 1,
    };
  },
  methods: {
    addFn() {
      this.count++;
    },
    addCountFn(num) {
      this.count += num;
    },
    subFn() {
      this.count--;
    },
  },
};
</script>
<style lang="" scoped>
</style>

效果

客家可减，数字会变

用于绑定事件的

语法 ：

v-on:事件名="要执行的代码"

v-on:事件名="methods中的函数"

v-on:事件名="methods中的函数（实参）"

简写：@事件名="methods中的函数"

v-model

<template>
  <p>{{count}}</p>
  <input type="text" v-model="count">
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      count: 1,
    };
  },
};
</script>
<style lang="" scoped>
</style>

效果

 具体效果就是v-model绑定的变量发生变化，p标签绑定的值也会发生改变

用于双向绑定

语法：v-model="vue数据变量"

以及一些修饰符

语法：v-model.修饰符="vue数据变量"

.number 以parseFloat转为数字类型

.trim 去除首尾空白字符

.lazy 在change时触发而非inupt时

v-text和v-html

<template>
  <div>
    <p v-text="str"></p>
    <p v-html="str"></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      str: "<a href='#'>我是一个a标签</span>",
    }
  }
}
</script>
<style>
	
</style>

效果

 语法：

v-text="vue数据变量"

v-html="vue数据变量"

注意：会覆盖掉插值表达式

v-text把值当作普通字符串显示，v-html把值当作html解析

v-show和v-if

控制标签的隐藏或出现

具体代码和效果

 

 语法：

v-show="vue变量"

v-if="vue变量"

v-for

用于遍历数组

<!-- 视图层 -->
<template>
  <div id="app">
    <div id="app">
      <!-- v-for 把一组数据, 渲染成一组DOM -->
      <!-- 口诀: 让谁循环生成, v-for就写谁身上 -->
      <p>学生姓名</p>
      <ul>
        <li v-for="(item, index) in arr" :key="item">
          {{ index }} - {{ item }}
        </li>
      </ul>

      <p>学生详细信息</p>
      <ul>
        <li v-for="obj in stuArr" :key="obj.id">
          <span>{{ obj.name }}</span>
          <span>{{ obj.sex }}</span>
          <span>{{ obj.hobby }}</span>
        </li>
      </ul>

      <!-- v-for遍历对象(了解) -->
      <p>老师信息</p>
      <div v-for="(value, key) in tObj" :key="value">
        {{ key }} -- {{ value }}
      </div>

      <!-- v-for遍历整数(了解) - 从1开始 -->
      <p>序号</p>
      <div v-for="i in count" :key="i">{{ i }}</div>
    </div>
  </div>
</template>

<!-- 逻辑层 -->
<script>
export default {
  name: "",
  data() {
    return {
      arr: ["小明", "小欢欢", "大黄"],
      stuArr: [
        {
          id: 1001,
          name: "孙悟空",
          sex: "男",
          hobby: "吃桃子",
        },
        {
          id: 1002,
          name: "猪八戒",
          sex: "男",
          hobby: "背媳妇",
        },
      ],
      tObj: {
        name: "小黑",
        age: 18,
        class: "一年一班",
      },
      count: 10,
    };
  },
};
</script>

<!-- 样式层 -->
<style lang="" scoped>
</style>

效果

语法：

v-for="(值, 索引) in 目标结构"

v-for="值 in 目标结构"