vue基础语法一

式微式微胡不归

已于 2022-09-24 17:07:24 修改

阅读量185

点赞数

分类专栏： Vue基础文章标签： vue.js javascript 前端

于 2022-09-17 00:11:55 首次发布

本文链接：https://blog.csdn.net/zhangli33/article/details/126754833

版权

Vue基础专栏收录该内容

9 篇文章 1 订阅

订阅专栏

2.更多用法--下拉列表、复选框、单选框、文本域

3.v-model修饰符

八、文本域

九、v-if和v-show---元素隐藏

一、插值表达式

改变标签内容：声明式渲染/文本插值

语法: {{ 表达式 }}

在App.vue中

<template>
  <div>
    <h1>{{msg}}</h1>
    <h2>{{obj.name}}</h2>
    <h3>{{obj.age >= 18?"成年了":"未成年"}}</h3>
  </div>
</template>

<script>
export default {
  data(){
    return{
      msg:"Hello vue",
      obj:{
        name:"vue",
        age:5

      }
    }
  }
}
</script>

<style>

</style>

二、改变标签原生属性值 v-bind

⚫ v-bind语法和简写

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

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

<template>
  <div>
    <!-- 值： 标签元素属性傻瓜的值 -->
    <!-- 语法：v-bind:原生属性名="vue变量" -->
    <a v-bind:href="url">点击去百度</a>
    <!-- 语法：原生属性名="vue变量名" -->
    <img :src="imgUrl" >
  </div>
</template>

<script>
export default {
  data(){
    return{
      url:"http://www.baidu.com",
      imgUrl:"//img20.360buyimg.com/seckillcms/s144x144_jfs/t1/160672/19/30192/99154/63106304Eeb1506fc/10381e35d4d75b9d.jpg!q70.jpg.avif"
    }
  }
}
</script>

<style></style>

三、事件绑定 v-on

目标：给标签绑定事件

⚫ 语法

⚫ v-on:事件名=“要执行的少量代码"

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

⚫ v-on:事件名=“methods中的函数名(实参)"

⚫简写

⚫ @事件名=“methods中的函数”

<template>
  <div>
    <p>要购买的商品数量：{{ count }}</p>
    <!-- 1.绑定事件 -->
    <!-- 语法：v-on:事件名="少量代码" -->
    <button v-on:click="count++">+1</button>

    <!-- 语法：v-on:事件名="methods里的函数名" -->
    <button v-on:click="addFn">+1</button>

    <!-- 语法：v-on:事件名="methods里的函数名(值)" -->
    <button v-on:click="addCountFn(5)">+5</button>

    <!-- 语法：@时间名 = "methods里的函数名" -->
    <button @click="subFn">-1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 1,
    };
  },
  methods: {
    addFn() {
      //this代表export default后{}对象，data和methods里的属性都直接挂他身上
      this.count++;
    },
    addCountFn(num) {
      this.count += num;
    },
    subFn(){
      this.count--
    }
  },
};
</script>

<style></style>

四、事件对象

⚫ 语法

⚫ 无传参, 通过形参直接接收

⚫ 传参, 通过$event指代事件对象传给事件处理函数

<template>
  <div>
    <!-- 无传参，直接在形参接收 -->
    <a @click="one" href="http:www.baidu.com">百度</a>
  <hr>
    <!-- 有传参，手动再加入一个参数$event -->
    <a @click="two(10,$event)"  href="http:www.taobao.com">淘宝</a>
  </div>
</template>

<script>
export default {
   methods: {
     one(e){
      e.preventDefault()
     },
     two(num,e){
      e.preventDefault()
     }
   }
}
</script>

<style>

</style>

五、v-on事件修饰符

目标：在事件后面.修饰符名 - 给事件带来更强大的功能

⚫ 语法

⚫ @事件名.修饰符="methods里函数"

⚫ 修饰符列表

⚫ .stop - 阻止事件冒泡

⚫ .prevent - 阻止默认行为

⚫ .once - 程序运行期间, 只触发一次事件处理函数

<template>
  <div>
    <div @click="fatherFn">
      <p @click.stop="oneFn">.stop - 阻止事件冒泡</p>
      <a href="http://www.baidu.com" @click.prevent.stop>阻止默认行为和冒泡</a>
      <p @click.once="twoFn">只触发一次事件处理函数</p>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    fatherFn() {
      console.log("father-触发了click事件");
    },
    oneFn() {
      console.log("p标签被点击了");
    },
    twoFn() {
      console.log("p标签被点击了");
    },
  },
};
</script>

<style></style>

六、键盘修饰符

目标：给键盘事件, 添加修饰符, 增强能力

⚫ 语法:

⚫ @keyup.enter - 监测回车按键

⚫ @keyup.esc - 监测返回按键

<template>
  <div>
    <!-- 绑定键盘按下事件.enter 回车 -->
    <input type="text" @keydown.enter="enterFn" />
    <hr>
    <!-- 绑定键盘退出事件.esc 取消键 -->

    <input type="text" @keydown.esc="escFn" />
  </div>
</template>

<script>
export default {
  methods: {
    enterFn(){
      console.log("用户按下回车");
    },
    escFn(){
      console.log("用户按下esc");
    }
  },
};
</script>

<style></style>

七、v-model

1.基础使用--用户名和密码

⚫ 语法: v-model="Vue数据变量"

⚫ 双向数据绑定

⚫ 变量变化 -> 视图自动同步

⚫ 视图变化 -> 变量自动同步

<template>
  <div>
    <div>
      <span>用户名</span>
      <input type="text" v-model="username" />
    </div>
    <div>
      <span>密码</span>
      <input type="text" v-model="pass" />
    </div>
  </div>
</template>

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

};
</script>

<style></style>

2.更多用法--下拉列表、复选框、单选框、文本域

<template>
  <div>
    <div>
      <!-- 下拉列表：绑定再select上-->
      <span>来自于：</span>
      <select v-model="from">
        <option value="北京市">北京</option>
        <option value="南京市">南京</option>
        <option value="天津市">天津</option>
      </select>
    </div>
    <div>
      <!-- 复选框
      v-module的变量值
      非数组：关联的是复选框的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 {
      from: "",
      hobby: [],
      gender: "",
      intro:""
    };
  },
};
</script>

<style></style>

3.v-model修饰符

⚫ 语法: v-model.修饰符="Vue数据变量"

⚫ .number 以parseFloat转成数字类型

⚫ .trim 去除首尾空白字符

⚫ .lazy 失去焦点内容改变时(onchange事件), 把内容同步给v-model的变量

<template>
  <div>
    <div>
      <span>年龄</span>
      <!-- number修饰符--把值parseFloat转数值再赋予给v-model对应的变量 -->
      <input type="text" v-model.number="age" />
    </div>
    <div>
      <span>人生格言</span>
      <!-- .trim修饰--去除首尾两边空格 -->
      <input type="text" v-model.trim="motto" />
    </div>
    <div>
      <span>个人简介</span>
      <!-- lazy修饰符--失去焦点内容改变时(onchange事件), 把内容同步给v-model的变量 -->
      <textarea v-model.lazy="intro"></textarea>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: 0,
      motto: "",
      intro: "",
    };
  },
};
</script>

<style></style>

八、文本域

注意：尽量少用v-html

九、v-if和v-show---元素隐藏

语法：v-show / v-if="布尔值或布尔运算"

当为false时，元素被隐藏

<template>
  <div>
   <!-- 
    v-show隐藏：dispaly：none  //频繁切换
    v-if :从DOM元素移除
    -->
      <p v-show="isShow">v-show控制元素</p>

      <!-- v-if和v-show之间不能有其他标签 -->
      <p v-if="age >= 18">已成年</p>
      <p v-else>未成年</p>
   
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
    
      age: 18,
    };
  },
};
</script>

<style></style>