vue指令

最新推荐文章于 2024-10-09 10:13:02 发布

cslazsb

最新推荐文章于 2024-10-09 10:13:02 发布

阅读量154

点赞数

分类专栏： vue 文章标签： vue.js javascript html5

本文链接：https://blog.csdn.net/cslazsb/article/details/120474966

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.插值表达式 {{vue变量}} 可以把vue变量直接加在标签上

举例

<template>
  <div>
      <h1>{{msg}}</h1>
      <h2>{{obj.userName}}</h2>
      <h3>{{obj.age>18 ? '成年人':'未成年'}}</h3>
  </div>
</template>

<script>
export default {
    data(){
        return {
            msg:'hello,vue',
            obj:{
                userName:'老张',
                age:'18'
            }
        }
    }
}
</script>

<style scoped>

</style>

效果

2.v-bind:属性名 = vue变量动态添加属性简写 :属性名 = 'vue变量'

举例

<template>
  <div>
      <!-- 复杂写法 -->
      <a v-bind:href="url">百度</a>
      <img :src="imgUrl" alt="">
  </div>
</template>

<script>
export default {
    data(){
        return {
            url:'http://baidu.com',
            imgUrl:'https://img1.baidu.com/it/u=2910476855,2188262851&fm=253&fmt=auto&app=120&f=JPEG?w=888&h=500'
        }
    }
}
</script>

<style scoped>

</style>

效果

3.绑定事件 v-on:事件名 = 'methods中的事件处理函数' 简写 @事件名:= 'methods中的事件处理函数'

<template>
  <div>
    <p>数量{{count}}</p>
    <button v-on:click="fn">点击加一</button>
    <button @click="addFn(5)">点击加五</button>
    <button @click="jian">点击减一</button>
  </div>
</template>

<script>
export default {
    data(){
        return {
            count:10
        }
    },
    methods:{
        fn(){
            this.count++
        },
        addFn(num){
            this.count+= num
        },
        jian(){
            this.count--
        }
    }
}
</script>

<style scoped>

</style>

效果

点击加一按钮 count 加一点击加五按钮 count 加五点击减一 count 减一

4.每个事件触发都会有事件对象

怎么拿事件对象

两种情况一种没有参数一种有参数

<template>
  <div>
    <a href="" @click="fn">不传参</a><br>
    <a href="" @click="nf(10,$event)">传参</a>
  </div>
</template>

<script>
export default {
    
    methods:{
没有参数 直接拿
        fn(e){
            e.preventDefault()
        },
有参数 手动加实参 $event
        nf(num,e){
            e.preventDefault()
        }
    }
}
</script>

<style scoped>

</style>

5.事件里的修饰符加到绑定的事件名后

.stop 阻止事件冒泡

.pervent 阻止默认行为

6.键盘事件 (keyup,keydown) 修饰符

.enter 检测是否按下回车键

.esc 检测是否按下退出键

6.双向绑定 v-model = 'vue变量' 目前只能作用与表单标签

把Vue的"数据变量"和表单的"value属性"双向绑定在一起

举例

遇到下拉菜单 v-model加到select value值option 里

<template>
  <div>
    <!-- 
    	v-model:是实现vuejs变量和表单标签value属性, 双向绑定的指令
    -->
    <div>
      <span>用户名:</span>
      <input type="text" v-model="username" />
    </div>
    <div>
      <span>密码:</span>
      <input type="password" v-model="pass" />
    </div>
    <div>
      <span>来自于: </span>
      <!-- 下拉菜单要绑定在select上 -->
      <select v-model="from">
        <option value="北京市">北京</option>
        <option value="南京市">南京</option>
        <option value="天津市">天津</option>
      </select>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      pass: "",
      from: ""
    }
  }
};
</script>

当我们在输入框输入内容我们在控制台就可以看见

当是复选框时，

变量为非数组, 则绑定的是checked的属性(true/false) - 常用于: 单个绑定使用
变量为数组, 则绑定的是他们的value属性里的值 - 常用于: 收集勾选了哪些值

<template>
  <div>
    <div>
      <!-- (重要)
      遇到复选框, v-model的变量值
      非数组 - 关联的是复选框的checked属性
      数组   - 关联的是复选框的value属性
       -->
      <span>爱好: </span>
      <input type="checkbox" v-model="hobby" value="抽烟">抽烟
      <input type="checkbox" v-model="hobby" value="喝酒">喝酒
      <input type="checkbox" v-model="hobby" value="写代码">写代码
    </div>
    <div>
      <span>性别: </span>
      <input type="radio" value="男" name="sex" v-model="gender">男
      <input type="radio" value="女" name="sex" v-model="gender">女
    </div>
    <div>
      <span>自我介绍</span>
      <textarea v-model="intro"></textarea>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hobby: [], 
      sex: "",
      intro: "",
    };
    // 总结:
    // 特别注意: v-model, 在input[checkbox]的多选框状态
    // 变量为非数组, 则绑定的是checked的属性(true/false) - 常用于: 单个绑定使用
    // 变量为数组, 则绑定的是他们的value属性里的值 - 常用于: 收集勾选了哪些值
  }
};
</script>

v-model修饰符

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

.number 以parseFloat转成数字类型
.trim 去除首尾空白字符
.lazy 在change时触发而非inupt时

7.v-show=‘vue变量’ 变量的值是布尔值 true是显示 false是隐藏相当于原生的display：none

v-if=‘vue变量’ 变量值也是布尔值 true是显示 false是隐藏直接将元素从DOM上移除

8.v-html=‘vue变量’ 可以解析标签会覆盖元素原有的内容

9.v-for= ‘（item，index）in 目标结构 ’ :key='id或索引' 有id就用id 没有id就用索引

key的作用

:key没值比较元素标签

:key有值值为索引就地更新

:key的值为id 无则创建/删除推荐使用 id 提高更新性能

v-for更新监测机制

数组变更方法, 就会导致v-for更新, 页面更新

数组非变更方法, 返回新数组, 就不会导致v-for更新, 可采用覆盖数组或this.$set()

10.动态class属性 :class{'类名'：'布尔值'}

<template>
  <div>
    <!-- 语法:
      :class="{类名: 布尔值}"
      使用场景: vue变量控制标签是否应该有类名
     -->
    <p :class="{red_str: bool}">动态class</p>
  </div>
</template>

<script>
export default {
  data(){
    return {
      bool: true
    }
  }
}
</script>

<style scoped>
  .red_str{
    color: red;
  }
</style>

11.动态style属性 :style{'css属性名'：'值'}

<template>
  <div>
    <!-- 动态style语法
      :style="{css属性名: 值}"
     -->
    <p :style="{backgroundColor: colorStr}">动态style</p>
  </div>
</template>

<script>
export default {
  data(){
    return {
      colorStr: 'red'
    }
  }
}
</script>

<style>

</style>

12计算属性：什么是计算属性？

一个值需要通过计算得到举例

<template>
  <div>
    <p>{{ num }}</p>
  </div>
</template>

<script>
export default {
  data(){
    return {
      a: 10,
      b: 20
    }
  },
  // 计算属性:
  // 场景: 一个变量的值, 需要用另外变量计算而得来
  /*
    语法:
    computed: {
      计算属性名 () {
        return 值
      }
    }
  */
 // 注意: 计算属性和data属性都是变量-不能重名
 // 注意2: 函数内变量变化, 会自动重新计算结果返回
  computed: {
    num(){
      return this.a + this.b
    }
  }
}
</script>

<style>

</style>

计算属性缓存

<template>
  <div>
    <p>{{ reverseMessage }}</p>
    <p>{{ reverseMessage }}</p>
    <p>{{ reverseMessage }}</p>
    <p>{{ getMessage() }}</p>
    <p>{{ getMessage() }}</p>
    <p>{{ getMessage() }}</p>
  </div>
</template>

<script>
export default {
  data(){
    return {
      msg: "Hello, Vue"
    }
  },
  // 计算属性优势:
  // 带缓存
  // 计算属性对应函数执行后, 会把return值缓存起来
  // 依赖项不变, 多次调用都是从缓存取值
  // 依赖项值-变化, 函数会"自动"重新执行-并缓存新的值
  computed: {
    reverseMessage(){
      console.log("计算属性执行了");
      return this.msg.split("").reverse().join("")
    }
  },
  methods: {
    getMessage(){
      console.log("函数执行了");
      return this.msg.split("").reverse().join("")
    }
  }
}
</script>

<style>

</style>

计算属性好处

带缓存
依赖项不变, 直接从缓存取
依赖项改变, 函数自动执行并重新缓存

计算属性完整写法

计算属性也是变量, 如果想要直接赋值, 需要使用完整写法
语法：

computed: {
    "属性名": {
        set(值){
            
        },
        get() {
            return "值"
        }
    }
}

计算属性给v-model使用

<template>
  <div>
      <div>
          <span>姓名:</span>
          <input type="text" v-model="full">
      </div>
  </div>
</template>

<script>
// 问题: 给计算属性赋值 - 需要setter
// 解决:
/*
    完整语法:
    computed: {
        "计算属性名" (){},
        "计算属性名": {
            set(值){

            },
            get(){
                return 值
            }
        }
    }
*/
export default {
    computed: {
        full: {
            // 给full赋值触发set方法
            set(val){
                console.log(val)
            },
            // 使用full的值触发get方法
            get(){
                return "无名氏"
            }
        }
    }
}
</script>

<style>

</style>

13.vue侦听器-watch

作用：可以侦听data/computed属性值改变

语法：

watch: {
    "被侦听的属性名" (newVal, oldVal){
        
    }
}

<template>
  <div>
    <input type="text" v-model="name">
  </div>
</template>

<script>
export default {
  data(){
    return {
      name: ""
    }
  },
  // 目标: 侦听到name值的改变
  /*
  语法:
    watch: {
      变量名 (newVal, oldVal){
        // 变量名对应值改变这里自动触发
      }
    }
  */
  watch: {
    // newVal: 当前最新值
    // oldVal: 上一刻值
    name(newVal, oldVal){
      console.log(newVal, oldVal);
    }
  }
}
</script>

<style>

</style>

vue侦听器-深度侦听

当监听的是复杂类型我们就需要深度监听

语法

watch: {
    "要侦听的属性名": {
        deep: true, // 深度侦听复杂类型内变化
        handler (newVal, oldVal) {
            
        }
    }
}

案例

<template>
  <div>
    <input type="text" v-model="user.name">
    <input type="text" v-model="user.age">
  </div>
</template>

<script>
export default {
  data(){
    return {
      user: {
        name: "",
        age: 0
      }
    }
  },
  // 目标: 侦听对象
  /*
  语法:
    watch: {
      变量名 (newVal, oldVal){
        // 变量名对应值改变这里自动触发
      },
      变量名: {
        handler(newVal, oldVal){

        },
        deep: true, // 深度侦听(对象里面层的值改变)
      }
    }
  */
  watch: {
    user: {
      handler(newVal, oldVal){
        // user里的对象
        console.log(newVal, oldVal);
      },
      deep: true
    }
  }
}
</script>

<style>

</style>

deep深度侦听, handler固定方法触发