首页 > 其他分享> 文章详细

vue2总结

2022-03-18 18:08:29 阅读：159 来源： 互联网

标签：总结 Vue xxx 绑定 html 事件 vue2 data

一.Vue介绍

1.vue是一套用于构建用户界面的渐进式的JavaScript框架

2.vue的特点:

　　a.采用组件化模式,提高代码复用率,且让代码更好维护

　　b.声明式编码,让编码人员无需直接操作DOM,提高开发效率

　　c.使用虚拟DOM + 优秀的Diff算法,尽量复用DOM节点

3.学习Vue前,最好掌握这些基础知识:

　　ES6语法规范,ES6模块化,包管理工具,原型,原型链,数组常用方法,axios,promise

二.插值语法

功能：用于解析标签体内容。写法：{{xxx}}，xxx是js表达式(一个表达式会产生一个值，可以放在任何一个需要值的地方)，且可以直接读取到data中的所有属性。

三.指令语法

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。备注：Vue中有很多的指令，且形式都是：v-????

a.v-text 和 v-html

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

b.v-cloak

　　1.本质是一个特殊属性,Vue实例创建完毕并接管容器后,会删掉v-cloak属性. 　　2.使用css配合v-cloak可以解决网速慢时页面展示出{{ xxx }}的问题

        <style>
            [v-cloak]{
                display:none;
            }
        </style>
    </head>
    <body>
        <div id="root">
            <h2 v-cloak>{{name}}</h2>
        </div>
    </body>

c.v-once

　　1.v-once所在节点在初次动态渲染后,就视为静态内容了.

　　2.以后数据的改变不会引起v-once所在结构的更新,可以用于优化性能

<body>
    <div id="root">
        <h2 v-once>初始化的n值是:{{n}}</h2>
        <h2>当前的n值是:{{n}}</h2>
        <button @click="n++">点我n+1</button>
    </div>
</body>

<script type="text/javascript">        
    new Vue({
        el:'#root',
        data:{
            n:1
        }
    })
</script>

d.v-pre

　　1.跳过其所在节点的编译过程. 　　2.可利用它跳过:没有使用指令语法,没有使用插值语法的节点,会加快编译

e.v-bind

　　v-bind:href="xxx" 　　简写为 :href="xxx" 　　xxx同样要写js表达式，且可以直接读取到data中的所有属性。

<div id="root">
    正常 :<a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习1</a>
    简写 :<a :href="school.url" x="hello">点我去{{school.name}}学习2</a>
</div>

v-bind和插值语法的区别 :

　　v-bind : 一般都是写在属性的

　　插值语法 : 一般都是写在标签内容

f.v-model和v-bind [ 数据绑定 ]

Vue中有2种数据绑定的方式 : 　　1.v-model(双向数据绑定) : 数据不仅能从data流向页面,还可以从页面流向data 　　2.v-bind(单向数据绑定) : 数据只能用data流向页面　　　　3.注意 : 　　　　1.双向绑定一般都应用在表单类元素上（如：input、select等）　　　　2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

<body>
    <div id="root">
        <!-- 普通写法 -->
        单向数据绑定：<input type="text" v-bind:value="name"><br/>
        双向数据绑定：<input type="text" v-model:value="name"><br/>

        <!-- 简写 -->
        单向数据绑定：<input type="text" :value="name"><br/>
        双向数据绑定：<input type="text" v-model="name"><br/>

        <!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
        <h2 v-model:x="name">你好啊</h2>
    </div>
</body>

<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            name:'海贼王'
        }
    })
</script>

g.v-on(点击事件)

一.事件的基本使用

　　1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；　　2.事件的回调需要配置在methods对象中，最终会在vm上；　　3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；　　4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或组件实例对象；　　5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；$event是第一个参数

<body>
    <div id="root">
        <button v-on:click="showInfo1">不简写 :（不传参）</button>
        <!-- $event是固定的哦 -->
        <button @click="showInfo2($event,66)">简写 :（传参）</button>
    </div>
</body>

<script type="text/javascript">
    const vm = new Vue({
        el:'#root',
        methods:{
            showInfo1(event){
                alert('同学你好！')
            },
            showInfo2(event,number){
                console.log(event,number)
                alert('同学你好！！')
            }
        }
    })
</script>

二.事件修饰符

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

    <body>
        <div id="root">

            <!-- 阻止默认事件（常用） -->
            <a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>

            <!-- 阻止事件冒泡（常用） -->
            <div class="demo1" @click="showInfo">
                <button @click.stop="showInfo">点我提示信息</button>
                <!-- 修饰符可以连续写 -->
                <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">点我提示信息</a>
            </div>

            <!-- 事件只触发一次（常用） -->
            <button @click.once="showInfo">点我提示信息</button>

            <!-- 使用事件的捕获模式 -->
            <div class="box1" @click.capture="showMsg(1)">
                div1
                <div class="box2" @click="showMsg(2)">
                    div2
                </div>
            </div>

            <!-- 只有event.target是当前操作的元素时才触发事件； -->
            <div class="demo1" @click.self="showInfo">
                <button @click="showInfo">点我提示信息</button>
            </div>

            <!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
　　　　　　　　@scroll 是给滚动条加的滚动事件
　　　　　　　　@wheel  是个滚轮加的滚动事件 --  就是你滚到底部了,还是可以继续滚轮的

            <ul @wheel.passive="demo" class="list">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>

        </div>
    </body>

    <script type="text/javascript">
        new Vue({
            el:'#root',
            methods:{
                showInfo(e){
                    alert('同学你好！')
                    // console.log(e.target)
                },
                showMsg(msg){
                    console.log(msg)
                },
                demo(){
                    for (let i = 0; i < 100000; i++) {
                        console.log('#')
                    }
                    console.log('累坏了')
                }
            }
        })
    </script>

三.键盘事件

　　@keyup 按下抬起,才触发 --- 一般使用这个

　　@keydown 按下就触发

　　1.Vue中常用的按键别名：　　　　回车 => enter 　　　　删除 => delete (捕获“删除”和“退格”键) 　　　　退出 => esc 　　　　空格 => space 　　　　换行 => tab (特殊，必须配合keydown去使用) 　　　　上 => up 　　　　下 => down 　　　　左 => left 　　　　右 => right
　　2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
　　3.系统修饰键（用法特殊）：ctrl、alt、shift、meta 　　　　(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。　　　　(2).配合keydown使用：正常触发事件。
　　4.也可以使用keyCode去指定具体的按键（不推荐）　　5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

        <div id="root">
            <h2>欢迎来到{{name}}学习</h2>
            <input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.keyCodes.huiche = 13 //定义了一个别名按键

        new Vue({
            el:'#root',
            data:{
                name:'尚硅谷'
            },
            methods: {
                showInfo(e){
                    // console.log(e.key,e.keyCode)
                    console.log(e.target.value)
                }
            },
        })
    </script>

i.v-if 和v-show [ 条件渲染 ]

1.v-if

　　写法：　　　　(1).v-if="表达式" 　　　　(2).v-else-if="表达式" 　　　　(3).v-else="表达式" 　　　　适用于：切换频率较低的场景。　　　　特点：不展示的DOM元素直接被移除。　　　　注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

2.v-show

　　写法：v-show="表达式" 　　适用于：切换频率较高的场景。　　特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉 3.备注：　　使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。　　template与v-if可以配合使用,与v-show不可以!!

j.v-for

标签：总结,Vue,xxx,绑定,html,事件,vue2,data
来源： https://www.cnblogs.com/qd-lbxx/p/16022988.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9