Vue基本知识（常用标签，事件）

最新推荐文章于 2024-04-29 16:03:23 发布

码ming

最新推荐文章于 2024-04-29 16:03:23 发布

阅读量866

点赞数 1

CC 4.0 BY-SA版权

分类专栏： # vue 文章标签： vue 事件标签

本文链接：https://blog.csdn.net/weixin_46168350/article/details/116769021

vue 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了Vue.js的基础知识，包括如何下载及使用Vue扩展插件，如脚手架、路由、状态管理和图片懒加载。重点讲解了Vue中的双大括号表达式、v-text、v-html、v-bind、v-on及其事件修饰符的用法，以及v-show、v-if、v-for和v-model的使用。同时，文章还涵盖了计算属性和监视属性的实现，帮助读者深入理解Vue的双向数据绑定和动态渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

入门

下载

Vue 扩展插件

vue-cli: vue 脚手架
vue-resource(axios): ajax 请求
vue-router: 路由
vuex: 状态管理
vue-lazyload: 图片懒加载
vue-scroller: 页面滑动相关
mint-ui: 基于vue 的UI 组件库(移动端)
element-ui: 基于vue 的UI 组件库(PC 端)

双大括号表达式

语法: {{exp}}
功能: 向页面输出数据
可以调用对象的方法

案例

<div id="app">
        {{ msg }}  {{username}} {{pwd}}

        <br>
        <span>
            {{ username }}
            <h1>{{ msg }}</h1>
        </span>
   </div>
    <!--引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",  //element 用来给Vue实例定义一个作用范围
            data:{      //用来给Vue实例定义一些相关数据
                msg:"欢迎你,期待你的加入!",
                username:"hello Vue!",
                pwd :"12345",
            },
        });
    </script>

总结:

vue实例(对象)中el属性: 代表Vue的作用范围日后在Vue的作用范围内都可以使用Vue的语法
vue实例(对象)中data属性: 用来给Vue实例绑定一些相关数据, 绑定的数据可以通过{{变量名}}在Vue作用范围内取出
在使用{{}}进行获取data中数据时,可以在{{}}中书写表达式,运算符,调用相关方法,以及逻辑运算等
el属性中可以书写任意的CSS选择器[jquery选择器],但是在使用Vue开发是推荐使用 id选择器

创建Vue实例传入的options

el:
类型：string | HTMLElement
作用：决定之后Vue实例会管理哪一个DOM。
data:
类型：Object | Function （组件当中data必须是一个函数）
作用：Vue实例对应的数据对象。
methods:
类型：{ [key: string]: Function }
作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。

常用标签

v-text

v-text:用来获取data中数据将数据以文本的形式渲染到指定标签内部类似于javascript 中 innerText

<div id="app" class="aa">
        <span >{{ message }}</span>
        <span v-text="message"></span>
    </div>

    <!--引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                message:"欢迎您"
            }
        })
    </script>

总结

{{}}(插值表达式)和v-text获取数据的区别在于
a.使用v-text取值会将标签中原有的数据覆盖使用插值表达式的形式不会覆盖标签原有的数据
b.使用v-text可以避免在网络环境较差的情况下出现插值闪烁

v-html

v-html:用来获取data中数据将数据中含有的html标签先解析在渲染到指定标签的内部类似于javascript中 innerHTML

<div id="app" class="aa">
        <span>{{message}}</span>
        <br>
        <span v-text="message"></span>

        <br>
        <span v-html="message">xxxxxx</span>
    </div>

    <!--引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                message:"<a href=''>欢迎您</a>"
            }
        })
    </script>

v-bind: 强制数据绑定

v-bind: 用来绑定标签的属性从而通过vue动态修改标签的属性

功能: 指定变化的属性值
完整写法: v-bind:xxx='yyy' //yyy会作为表达式解析执行
简洁写法::xxx='yyy'

<div id="app">

    <img width="300" v-bind:title="msg" v-bind:class="{aa:showCss}"  src="baizhilogo.jpg" alt="">
    
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    const app = new Vue({
        el:"#app",
        data:{
            msg:"百知教育官方logo!!!!",
            showCss:true,
        },
        methods:{
        }
    })
</script>

v-on: 绑定事件监听

功能: 绑定指定事件名的回调函数
完整写法:
v-on:keyup=‘xxx’
v-on:keyup=‘xxx(参数)’
v-on:keyup.enter=‘xxx’
简洁写法:
@keyup=‘xxx’
@keyup.enter=‘xxx’

<div id="app">
        <h2>{{message}}</h2>
        <h2 v-text="message"></h2>
        <h2>年龄:{{ age }}</h2>
        <br>
        <input type="button" value="点我改变年龄" v-on:click="changeage">
    </div>
    <!--引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                message:"hello 欢迎来到百知课堂!",
                age:23,
            },
            methods:{  //methods 用来定义vue中时间
                changeage:function(){
                    alert('点击触发');
                }
            }
        })
    </script>

函数两种写法

  methods:{
               /*changecount:function(){
                   this.count++;
               }*/
               changecount(){
                   this.count++;
               }
           }

总结:

事件事件源:发生事件dom元素事件: 发生特定的动作 click… 监听器发生特定动作之后的事件处理程序通常是js中函数

在vue中绑定事件是通过v-on指令来完成的 v-on:事件名如 v-on:click
在v-on:事件名的赋值语句中是当前时间触发调用的函数名
在vue中事件的函数统一定义在Vue实例的methods属性中
在vue定义的事件中this指的就是当前的Vue实例,日后可以在事件中通过使用this获取Vue实例中相关数据

v-show

v-show:用来控制页面中某个标签元素是否展示底层使用控制是 display 属性

<div id="app">
    <!--
        v-show: 用来控制标签展示还是隐藏的
    -->
    <h2 v-show="false">欢迎你的加入!</h2>
    <h2 v-show="show">欢迎你的加入这是vue中定义变量true!</h2>
    <input type="button" value="展示隐藏标签" @click="showmsg">

</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            show:false,
        },
        methods:{
            //定义时间
            showmsg(){
               this.show =  !this.show;
            }
        }
    })
</script>

总结

在使用v-show时可以直接书写boolean值控制元素展示,也可以通过变量控制标签展示和隐藏
在v-show中可以通过boolean表达式控制标签的展示课隐藏

v-if

v-if: 用来控制页面元素是否展示底层控制是DOM元素操作DOM

<div id="app">
    <h2 v-if="false">教育</h2>
    <h2 v-if="show">欢迎你的加入</h2>
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            show:false
        },
        methods:{

        }
    });
</script>

v-for的使用

v-for: 作用就是用来对对象进行遍历的(数组也是对象的一种)

<div id="app">

    <span>{{ user.name }} {{ user.age }}</span>
    <br>
    <!--
       通过v-for遍历对象
    -->
    <span v-for="(value,key,index) in user">
        {{index}} : {{key}} : {{value}}
    </span>

    <!--
        通过v-for遍历数组
    -->
    <ul>
        <li v-for="a,index in arr" >
            {{index}} {{a}}
        </li>
    </ul>

    <!--
        通过v-for遍历数组中对象
        :key 便于vue内部做重用和排序
    -->
    <ul>
        <li v-for="user,index in users" :key="user.id">
            {{index+1}} {{ user.name }}  === {{ user.age }} ==== {{ user.content }}
        </li>
    </ul>

</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            user:{name:"小陈",age:23},
            arr:["北京校区", "天津校区", "河南校区"],
            users:[
                {id:"1",name:"xiaochen",age:23,content:"我曾经也是一个单纯的少年!"},
                {id:"2",name:"小白",age:23,content:"我曾经是一个邪恶的少年!"},
            ]
        },
        methods: {}
    });
</script>

总结

在使用v-for的时候一定要注意加入:key 用来给vue内部提供重用和排序的唯一key

v-model 双向绑定

v-model: 作用用来绑定标签元素的值与vue实例对象中data数据保持一致,从而实现双向的数据绑定机制

<div id="app">
    <input type="text" v-model="message">
    <span>{{message}}</span>
    <hr>
    <input type="button" value="改变Data中值" @click="changeValue">
</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message:""
        },
        methods: {
            changeValue(){
                this.message='百知教育!';
            }
        }
    });
</script>

# 总结
		1.使用v-model指令可以实现数据的双向绑定 
		2.所谓双向绑定 表单中数据变化导致vue实例data数据变化   vue实例中data数据的变化导致表单中数据变化 称之为双向绑定

# MVVM架构  双向绑定机制
	Model: 数据  Vue实例中绑定数据
	
	VM:   ViewModel  监听器

	View:  页面  页面展示的数据

事件修饰符

修饰符: 作用用来和事件连用,用来决定事件触发条件或者是阻止事件的触发机制

# 1.常用的事件修饰符
	.stop
	.prevent
	.capture
	.self
	.once
	.passive

stop事件修饰符

用来阻止事件冒泡

<div id="app">
    <div class="aa" @click="divClick">
        <!--用来阻止事件冒泡-->
        <input type="button" value="按钮" @click.stop="btnClick">
    </div>
</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {},
        methods: {
            btnClick(){
                alert('button被点击了');
            },
            divClick(){
                alert('div被点击了');
            }
        }
    });
</script>

prevent 事件修饰符

用来阻止标签的默认行为

		<!--用来阻止事件的默认行为-->
    <a href="http://www.baizhibest.com/" @click.prevent="aClick">hello</a>

self 事件修饰符

用来针对于当前标签的事件触发 ===========> 只触发自己标签的上特定动作的事件只关心自己标签上触发的事件不监听事件冒泡

		<!--只触发标签自身的事件-->
    <div class="aa" @click.self="divClick">
        <!--用来阻止事件冒泡-->
        <input type="button" value="按钮" @click.stop="btnClick">
        <input type="button" value="按钮1" @click="btnClick1">
    </div>

once 事件修饰符

once 一次作用: 就是让指定事件只触发一次

    <!--
    .prevent : 用来阻止事件的默认行为
    .once    : 用来只执行一次特定的事件
    -->
    <a href="http://www.baizhibest.com/" @click.prevent.once="aClick">百知教育</a>

按键修饰符

作用: 用来与键盘中按键事件绑定在一起,用来修饰特定的按键事件的修饰符

# 按键修饰符
	.enter
	.tab
	.delete (捕获“删除”和“退格”键)
	.esc
	.space
	.up
	.down
	.left
	.right

enter 回车键

用来在触发回车按键之后触发的事件

 <input type="text" v-model="msg" @keyup.enter="keyups">

tab 键

用来捕获到tab键执行到当前标签是才会触发

<input type="text" @keyup.tab="keytabs">

计算属性

在computed 属性对象中定义计算属性的方法
在页面中使用{{方法名}}来显示计算的结果

监视属性

通过通过vm 对象的$watch()或watch 配置来监视指定的属性
当属性变化时, 回调函数自动调用, 在函数内部进行计算

计算属性高级

通过getter/setter实现对属性数据的显示和监视
计算属性存在缓存, 多次读取只执行一次getter 计算

<div id="demo">
  姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
  名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
  <!--fullName1是根据fistName和lastName计算产生-->
  姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1"><br>
  姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2"><br>
  姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br>

  <p>{{fullName1}}</p>
  <p>{{fullName1}}</p>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  const vm = new Vue({
    el: '#demo',
    data: {
      firstName: 'A',
      lastName: 'B',
       fullName2: 'A-B'
    },

    // 计算属性配置: 值为对象
    computed: {
      fullName1 () { // 属性的get()
        console.log('fullName1()', this)
        return this.firstName + '-' + this.lastName
      },

      fullName3: {
        // 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值
        get () {
          console.log('fullName3 get()')
          return this.firstName + '-' + this.lastName
        },
        // 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值
        set (value) {// fullName3的最新value值  A-B23
          console.log('fullName3 set()', value)
          // 更新firstName和lastName
          const names = value.split('-')
          this.firstName = names[0]
          this.lastName = names[1]
        }
      }
    },

    watch: {
      // 配置监视firstName
      firstName: function (value) { // 相当于属性的set
        console.log('watch firstName', value)
        // 更新fullName2
        this.fullName2 = value + '-' + this.lastName
      }
    }
  })

  // 监视lastName
  vm.$watch('lastName', function (value) {
    console.log('$watch lastName', value)
    // 更新fullName2
    this.fullName2 = this.firstName + '-' + value
  })

</script>