Vue基础

最新推荐文章于 2022-10-20 20:48:33 发布

十三鸽

最新推荐文章于 2022-10-20 20:48:33 发布

阅读量4.2k

点赞数 3

分类专栏： vue 文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/shisannnn/article/details/120222577

版权

这篇博客详细介绍了Vue.js的基础知识，包括数据绑定（单向和双向）、事件处理、事件修饰符（如.prevent和.stop）以及计算属性和监听（computed与watch）。还涵盖了Vue的生命周期、自定义指令和列表渲染等核心概念。

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

笔记是跟着尚硅谷的天禹老师所做，老师讲的真的很好！
vue推荐使用插件Vue 3 Snippets、Vetur 作者：Pine Wu

1.数据绑定

1.1. 单向数据绑定

语法：v-bind:href =“xxx” 或简写为 :href
特点：数据只能从 data 流向页面

1.2. 双向数据绑定

语法：v-mode:value=“xxx” 或简写为 v-model=“xxx”
特点：数据不仅能从 data 流向页面，还能从页面流向 data
备注：
3.1.双向绑定一般都应用在表单类元素上（如：input、select等）
3.2.v-model可以简写为v-model，因为v-model默认收集的就是value值

2.绑定容器的两种方式(el和$mount)

    <div id="root">
        <input type="text" v-model:value="name" />
    </div>


    <script type="text/javascript">
        const v = new Vue({
     
            //el: '#root', //第一种绑定方式
            data: {
     
                name: '张三'
            }
        })
        setTimeout(() => {
     
            v.$mount('#root') //第二种绑定方式
        }, 1000)
    </script>

3.data的两种写法

3.1.对象式

    <script type="text/javascript">
        const v = new Vue({
     
            el: '#root', 
            data: {
     
                name: '张三'
            }
        })
    </script>

3.2.函数式

    <script type="text/javascript">
        const v = new Vue({
     
            el: '#root',
            data: function() {
     
                return {
     
                    name: '张三'
                }
            }
        })
    </script>

4.Object.defineProperty用法

使用该方法为对象中添加新的属性

    <script type="text/javascript">
        let number = 80
        let person = {
     
            name: '张三',
            sex: '男'
        }

        Object.defineProperty(person, 'age', {
     
            value: 18,
            enumerable: true, //控制属性是否可以枚举，默认是false
            writable: true, //控制属性是否可以被修改，默认是false
            configurable: true, //控制属性是否可以被删除，默认是false

            //当有人读取person的age属性时，get函数就会被调用，且返回值是age的值
            get: function() {
     
                return number
            },

            //当有人修改person的age属性时，set函数就会被调用，且会收到修改的属性
            set(value) {
     
                number = value
            }

        })
        console.log(person)
    </script>

5.事件处理

事件的基本使用：

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

6.事件修饰符

6.1.Vue中的事件修饰符：

prevent：阻止默认事件（常用）
stop：阻止事件冒泡（常用）
once：事件只触发一次（常用）
capture：使用事件的捕获模式
self：只有event.target是当前操作的元素时才触发事件
passive：事件的默认行为立即执行，无需等待时间回调执行完毕
列如使用@wheel绑定鼠标滚轮事件时，执行的顺序是先执行回调函数，等回调函数执行完毕，浏览器的滚轮才会往下滚动，使用passive后，浏览器的滚轮就不用等待回调函数执行完毕了。但是这种使用的很少，因为@scroll监听浏览器滚动条，不用等待回调函数执行。

6.2. event.preventDefault()和@click.prevent

使用event.preventDefault()能阻止在点击浏览器后进行跳转

    <div id="root">
        <a href="http://www.baidu.com" @click="showInfo">跳转到{
  {name}}</a>
    </div>

    <script type="text/javascript">
        const vm = new Vue({
     
            el: '#root',
            data: {
     
                name: '百度'
            },
            methods: {
     
                showInfo(event) {
     
                    event.preventDefault();
                    alert('阻止跳转')
                }
            }
        })
    </script>

而使用@click.prevent也能实现同样的功能

    <div id="root">
        <a href="http://www.baidu.com" @click.prevent="showInfo">跳转到{
  {name}}</a>
    </div>

    <script type="text/javascript">
        const vm = new Vue({
     
            el: '#root',
            data: {
     
                name: '百度'
            },
            methods: {
     
                showInfo() {
     
                    alert('阻止跳转')
                }
            }
        })
    </script>

6.3. event.stopPropagation()和@click.stop

当div和button都拥有点击事件时，点击按钮将会导致事件触发两次，为了防止这种冒泡事件触发，可以使用event.stopPropagation()

    <div id="root" @click="showInfo">
        <input type="button" value="阻止冒泡" @click="showInfo" />
    </div>

    <script type="text/javascript">
        const vm = new Vue({
     
            el: '#root',
            data: {
     
                name: '百度'
            },
            methods: {
     
                showInfo(event) {
     
                    event.stopPropagation();
                    alert('阻止冒泡')
                }
            }
        })
    </script>

@click.stop

    <div id="root" @click="showInfo">
        <input type="button" value="阻止冒泡" @click.stop="showInfo" />
    </div>

    <script type="text/javascript">
        const vm = new Vue({
     
            el: '#root',
            data: {
     
                name: '百度'
            },
            methods: {
     
                showInfo() {
     
                    alert('阻止冒泡')
                }
            }
        })
    </script>

7.键盘事件

7.1.@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" @click="showInfo">
        <input type="text" placeholder="按下回车输出信息" @keyup.enter="showInfo" />
    </div>

    <script type="text/javascript">
        const vm = new Vue({
     
            el: '#root',
            data: {
     
                name: '百度'
            },
            methods: {
     
                showInfo(event) {
     
                    console.log(event.target.value);
                }
            }
        })
    </script>