学习Vue中的事件修饰符，计算属性和内置指令

最新推荐文章于 2024-09-13 14:34:15 发布

xj1216wt

最新推荐文章于 2024-09-13 14:34:15 发布

阅读量885

点赞数 18

文章标签： vue.js 学习前端

本文链接：https://blog.csdn.net/xj1216wt/article/details/136782522

版权

Vue 事件处理

事件修饰符Vue中的事件修饰符

prevent---------------阻止默认事件（常用)
stop-------------------阻止事件冒泡（常用)
once-----------------事件只触发一次（常用)
capture---------------使用事件的捕获模式
self---------------------只有event.target是当前操作的元素时才触发事件
passive----------------事件的默认行为立即执行，无需等待事件回调执行完毕

修饰符可以连续写，比如可以这么用:@click.prevent.stop=“showInfo”

Vue 计算属性侦听属性

computed计算属性
1．定义:要用的属性不存在，需要通过已有属性计算得来
2．原理:底层借助了o0bjcet.defineproperty()方法提供的getter和setter3. get函数什么时候执行?
a．初次读取时会执行一次
b．当依赖的数据发生改变时会被再次调用
4．优势:与methods 实现相比，内部有缓存机制(复用)，效率更高，调试方便5．备注
a．计算属性最终会出现在vm上，直接读取使用即可
b.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变c．如果计算属性确定不考虑修改，可以使用计算属性的简写形式

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>
            {{fulldate}}
        </h1>
        <input type="text" v-model="first">
        <input type="text" v-model="last">
    </div>
</body>
<script src="./vue.js"></script>
<script>
    Vue.config.productionTip = false;
    var vm = new Vue({
        el:"#app",
        data(){
            return {
                a:0,
                b:0,
                first:"张",
                last:"三",
            }
        },
        computed:{
            fulldate:{
                get(){
                    console.log("触发了get");
                    return this.a-this.b;
                },
                set(value){
                    console.log("触发了set");
                    var arr =value.split('-');
                    this.first = arr[0];
                    thid.last =arr[1];
                }
            }
        },
        methods:{

        }
    })
</script>
</html>

v-model是什么

    1.双向数据绑定，既可以从data流向页面，也可以由页面流向data
    2.通常用于表单收集，v-model默认绑定value值
    3.v-model:value=""或v-model=""(简写) 
    
  v-model原理 
    1.v-model本质是一个语法糖
    2.v-bind绑定数据
    3.oninput数据传递

v-model修饰符
.lazy 失去焦点后提交值
.number有效转换"1"== 1 为数字
.trim清除前后空格

用法

<input type="text" v-model.trim="formData.userName">

直接v-model.语法=""即可。。。

内置指令

v-bind---------------单向绑定解析表达式，可简写为 :（冒号）
v-model-------------双向数据绑定
v-for-----------------遍历数组/对象/字符串
v-on-----------------绑定事件监听，可简写为@
v-show-------------条件渲染(动态控制节点是否展示)
v-if------------------条件渲染（动态控制节点是否存存在)
v-else-if-----------条件渲染（动态控制节点是否存存在)
v-else-------------条件渲染(动态控制节点是否存存在)

v-text指令
作用:向其所在的节点中渲染文本内容
与插值语法的区别: v-text 会替换掉节点中的内容，{{xxx}}则不会，更灵活
v-htm1 指令
作用:向指定节点中渲染包含html结构的内容与插值语法的区别:
注意点！！！
i . v-htm1会替换掉节点中所有的内容，{{xxx}}则不会
ii . v-htm1 可以识别htm1 结构，严重注意v-htm1有安全性问题!! !
i ．在网站上动态渲染任意htm1是非常危险的，容易导致XSS攻击
ii.一定要在可信的内容上使用v-html，永远不要用在用户提交的内容上! !!