vue3的基础入门02

最新推荐文章于 2024-08-25 19:47:12 发布

中年阿呆

最新推荐文章于 2024-08-25 19:47:12 发布

阅读量2.2k

点赞数 3

分类专栏：笔记文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_45808678/article/details/123400981

版权

笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了Vue3的基础入门，详细讲解了插值表达式的使用和响应式特性，以及v-text、v-html的区别，v-show与v-if的控制逻辑，v-on事件绑定的语法和修饰符，v-for的遍历操作，v-bind的属性绑定，最后重点阐述了v-model的双向数据绑定原理和适用场景。

摘要由CSDN通过智能技术生成

1、插值表达式 {{}}

I、语法：由两对大括号组成，称为“Mustache”语法
II、作用: 用在页面标签中插入值，进行数据的绑定显示，且当值发生变化时，标签会重新渲染夹在，称为响应式特性
III、用法：<标签> {{Vue对象数据仓库变量|JS表达式|JS内置对象}}</标签>

<body>
    <div id="app">
        <p>{{name}}</p>   
        <p>{{age}}</p>   
        <p>{{user}}</p>   
        <p>{{arr}}</p>   

        <!-- 直接定义值 -->
        <p>{{'这是字符串'}}</p>
        <p>{{ ['这是数组','这是数组1'] }}</p>
        <p>{{ {name:'alice',age:age} }}</p>
        <!-- js运算 -->
        <p>{{ age>=18 ? '成年':'未成年' }}</p>
        <p>{{ age+1 }}</p>
        <!-- JS内置对象 -->
        <p>{{ new Date() }}</p>
        <p>{{ Math.random() }}</p>
        
    </div>
</body>
<script>
     Vue.createApp({
        data(){
            return {
                name:'tom',
                age:18,
                user:{
                    id:1001,
                    username:'admin',
                    password:'123'
                },
                arr:[1,2,3]

            }
        }
    }).mount('#app')

常用指令：

v-text，v-html相同和区别

v-html会解析文本中的html标签;

<body>
      <div id="app">
        <p>{{ msg }}</p>
        <!-- v-text -->
        <p v-text ='msg'></p>
        <p v-text ='info'></p>
        <hr>
        <!-- v-html -->
        <p v-html="msg"></p>
        <p v-html="info"></p>
      </div>
</body>
<script>
        Vue.createApp({
            data(){
                return {
                    msg:'hello',
                    info:'<h3>text</h3>'
                }
            }
        }).mount('#app')
</script>

v-show，v-if

v-show 和v-if的效果相同，但是v-show控制元素的显示和影藏，v-if是执行元素的创建和删除操作。

<body>
      <div id="app">
        <!-- v-show -->
        <button v-on:click="flag =! flag">变</button>
        <hr>
        <p id="myduan" v-show="flag">我的段落</p> 
        <p id="myduan" v-if="flag">我的段落</p>
		    <!-- v-if  v-else  v-else-if -->
           <p v-if="age>60">老年</p> 
           <p v-else-if="age>40">中年</p> 
           <p v-else-if="age>20">少年</p> 
           <!-- 都不符合的时候，使用v-else -->
           <p v-else>同年</p> 
      </div>
</body>
<script>
        Vue.createApp({
            data(){
                return {
                    flag:true,
                    age:25
                }
            }
        }).mount('#app')

常用指令v-on

事件绑定指令：

语法：<标签 v-on[:参数][.修饰符]=“取值”></标签>
缩写：@代替v-on：
参数：事件的名称，即事件类型；
取值：回调函数|行内表达式
修饰符：
- 按键修饰符—>只有当点击对应的按键才触发；
- 功能修饰符–>实现特定的功能，如.once,.prevent,.stop等

<body>
      <div id="app">
          <!-- 1、基本用法 -->
          <button v-on:click="show()">按钮1</button>
          <!-- 方法每月参数的时候，可以省略括号 -->
          <button v-on:click="show">按钮2</button>
          <!-- 使用@符号代替v-on： -->
          <button @click="show">按钮3</button>
          <hr>
          <p>{{ msg }}</p>
          <button @click="change">方式一修改msg</button>
          <button @click="msg = 'world'">方式二修改msg</button>
          <!-- 传递字符串 -->
          <button @click="write('aaa')">传参1</button>
          <!-- 传递变量 -->
          <button @click="write(msg)">传参2</button>
          <!-- $evetn作为实参，表示事件对象 -->
          <button @click="write($event)">传参3</button>  
          <input type="text"  @input="write($event.target.value)">
          <!-- 按键修饰符,.u是按键是字母u才触发 -->
          <input type="text" @keyup ='print($event)'>
          <input type="text" @keyup.u='print()'>
</div>
</body>
<script>
        Vue.createApp({
            data(){  //数据仓库
                return {
                    msg:'hello,world'
                }
            },
            methods:{   //方法仓库
                show(){
                    console.log('1111')
                    
                },
                change(){
                    this.msg = 'hello1'  //this可以获取到数据仓库的变量
                },
                write(args){
                    console.log(args)
                },
                print(){
                    
                    console.log(2222)
                }

            }
        }).mount('#app')

常用指令v-for

<body>
      <div id="app">
          <!-- 循环数组 -->
          <li v-for="item in arr">{{item}}</li>
          <!-- 循环数组和索引 -->
          <li v-for="(item,index) in arr">{{index}} = {{item}}</li>
            <hr>
          <!-- 循环对象 -->
          <li v-for="item in user">{{item}}</li>
          <!-- 循环对象和索引 -->
          <li v-for="(value,key) in user">{{key}} = {{value}}</li>
          <!-- 循环对象和索引 -->
          <li v-for="(value,key,index) in user">{{index}}:{{key}} = {{value}}</li>
          <!-- 循环数字 -->
          <li v-for="item  in num">{{item}}</li>
           <!-- 循环字符串 可以为每一项提供一个唯一的key属性-->
           <li v-for="item  in str":key="index">{{item}}</li>
</div>
</body>
<script>
        Vue.createApp({
            data(){
                return {
                    arr:['name','age','sex'],
                    user:{
                        id:1111,
                        name:'tom',
                        age:12
                    },
                    num:15,
                    str:'heloworld'
                }
            }
        }).mount('#app')

常用指令 v-bind

属性绑定指令
用法：<标签 v-bind[:参数]=“取值”></标签>
缩写：省略v-bind；
参数:指定要绑定的属性；
取值：任意；
注意：特殊属性的绑定，如boolean类型、class

<body>
      <div id="app">
          <!-- 属性绑定 -->
          <img v-bind:src="url" v-bind:title="title">
          <!-- v-bind缩写属性绑定 -->
          <img :src="url" :title="title">
          <!-- boolean类型的属性绑定 -->
          <input type="text"  :disabled="boolean">
          
</div>
</body>
<script>
        Vue.createApp({
            data(){
                return {
                    url:'https://www.baidu.com/img/pc_9c5c85e6b953f1d172e1ed6821618b91.png',
                    title:'百度图片',
                    boolean:false,
                }
            }
        }).mount('#app')

常用指令v-model（双下个数据绑定指令）

语法：<标签 v-model=‘取值’></标签>
取值：随表单控件类型不同而不同
限制：仅限于表单中可输入或者可选择的元素，如,,

<body>
      <div id="app">
        <p>{{name}}</p>
        <!-- 单行文本框 -->
        <!-- <input type="text"  :value="name" @input="name = $event.target.vaule"> -->
        <input type="text" v-model="name">
          <!-- 单选按钮 -->
          <hr>
        <input type="radio" value="male" v-model="sex">男
        <input type="radio" value="female" v-model="sex">女
        <input type="radio" value="zhong" v-model="sex">中
        <hr>
        <!-- 复选框 v-model绑定的为数组 --> 
        <input type="checkbox" value="sport"  v-model="sports">运动
        <input type="checkbox" value="xuexi" v-model="sports">学习
        <input type="checkbox" value="youyong" v-model="sports">游泳
        <!-- 修饰符 .number 数据转换为数值    ；
            .lazy 改变事件，默认使用input事件，可以使用change事件；
            .trim 去除两边的空格
        -->
        <hr>
        <input type="text" v-model.number="num">
        <hr>
        <input type="text" v-model.number.lazy="num">
        <hr>
        <input type="text" v-model.trim="num">
</div>
</body>
<script>
        Vue.createApp({
            data(){
                return {
                    name:'lili',
                    sex:'zhong',
                    sports:[],
                    num:8
                }
            }
        }).mount('#app')
</script>