Vue2基本用法

最新推荐文章于 2024-03-01 00:48:15 发布

一杯甜的苦咖啡

最新推荐文章于 2024-03-01 00:48:15 发布

阅读量742

点赞数

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

本文链接：https://blog.csdn.net/qq_53327551/article/details/125345019

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Vue2基本用法

基本el和data用法

通过el挂载dom节点,通过data传递变量

<body>
    <div id="app">{{message}}</div>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                message: 'Hello'
            }
        })
    </script>
</body>

v-bind绑定标签属性

可以绑定类名来切换样式，可以绑定img的src来加载图片，动态绑定a标签的herf属性,可以简写成一个冒号

<body>
    <div class="app">
        <span v-bind:title="message">
            鼠标请移动到我
        </span>
    </div>
    <script>
        let app = new Vue({
            el: '.app',
            data: {
                message: '鼠标悬停看到我'
            }
        })
    </script>
</body>

通过v-if和v-show来改变元素可见性

v-if和v-show的区别:

v-if通过改变dom节点来改变元素可见性，直接删除和添加节点，不断改变dom树性能占用高

v-show是通过改变元素的display样式来改变元素可见性，整体初始化的性能占用高

需要频繁切换的元素推荐用v-show,不频繁切换的可以用v-if

<body>
    <div id="app">
        <div id="if" v-if="vif">
            这里是v-if
        </div>
        <div id="show" v-show="vshow">
            这里是v-show
        </div>
    </div>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                vif: true,
                vshow: false
            }

        })
    </script>
</body>

通过v-for来加载列表

v-for和forEach用法很像，遍历一个数组中的元素,然后进行填充

<body>
    <div id="app">
        <ol>
            <li v-for="todo in todos">
                {{ todo.text }}
            </li>
        </ol>
    </div>

    <script>
        let app = new Vue({
            el: '#app',
            data: {
                todos: [{
                    text: '学习vue'
                }, {
                    text: '整个'
                }, {
                    text: '牛项目'
                }]
            }
        })
    </script>
</body>

通过v-on绑定事件

v-on可以给元素绑定事件，然后执行一个回调函数,回调函数写在vue实例的methods中，但是需要注意回调函数不能写成
()=>{}

必须要写成
function(){}

否则，Vue实例会找不到函数，因为箭头函数并没有this，this 会作为变量一直向上级词法作用域查找，直至找到为止

另外V-on可以简写成一个@

<body>
    <div id="app">
        <p>{{ message }}</p>
        <button v-on:click="reverseMessage">反转消息</button>
    </div>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                message: 'Hello'
            },
            methods: {
                reverseMessage: function() {
                    this.message = this.message.split('').reverse().join('')
                }
            }
        })
    </script>
</body>

Vue本身属性

Vue实例中可以用this来获取自身，然后通过 $ 访问自身属性,如el,data等，methods中的函数可以直接通过this.来取到，不需要再加 $ ,另外还可以使用$来调用实例本身的一些方法,比如 watch

<body>
    <div id="app">
        <p>
            {{num}}
        </p>
        <button @click="getVue">得到Vue实例</button>
    </div>
    <script>
        let message = {
            num: 1
        }
        let app = new Vue({
                el: '#app',
                data: message,
                methods: {
                    //注意不能使用箭头函数,因为其没有this
                    getVue: function() {
                        console.log(this)
                        console.log(this.$el)
                        console.log(this.$data)
                        console.log(this.getVue)
                    }
                }
            })
            //监听Vue实例中的num属性，只要有变化就执行一个回调函数，有两个参数
        app.$watch('num', function(newValue, oldValue) {
                console.log(newValue)
                console.log(oldValue)
            })
            //设置一个循环来改变num的值
        setInterval(() => {
            message.num++
        }, 1000)
    </script>
</body>

Vue表单渲染

Vue通过v-model可以实现双向数据绑定,通过data可以传入初始值,最常用input，搭配label标签和$watch方法，以此来检测数据变化，然后执行回调,也可以配合v-for实现列表渲染

<body>
    <div id="app">
        <input v-model="message" placeholder="edit me">
        <p>Message is: {{ message }}</p>
    </div>

    <div id="app2">
        <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
        <label for="jack">Jack</label>
        <input type="checkbox" id="john" value="John" v-model="checkedNames">
        <label for="john">John</label>
        <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
        <label for="mike">Mike</label>
        <br>
        <span>Checked names: {{ checkedNames }}</span>
        <ol>
            <li v-for="name in checkedNames">{{name}}</li>
        </ol>
    </div>

    <script>
        //v-model的数据绑定
        let app = new Vue({
                el: '#app',
                data: function() {
                    return {
                        message: ''
                    }
                }
            })
            //数组填充
        let list = {
            checkedNames: []
        }
        let app2 = new Vue({
                el: '#app2',
                data: list
            })
            //数据有变化就可以执行回调
        app2.$watch('checkedNames', function(newValue, oldValue) {
            console.log('Now you see me.')
            console.log(`this is newValue: ${newValue.toString()}`)
        })
    </script>
</body>

Vue组件基础

组件是可复用的Vue实例，可以用Vue.component(str:string,{}:object)函数来声明一个组件,每个组件有单独的作用域,不需要写el挂载点，另外需要注意声明一定要在写在实例前面

<body>
    <div id="app">
    <button-counter></button-counter>
    <button-counter></button-counter>//组件复用
    <button-counter></button-counter>//组件复用
    </div>

    <script type="text/javascript">
    // 定义一个名为 button-counter 的新组件
    Vue.component('button-counter', {
        data: function() {
            return {
                count: 0
            }
        },
        template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
    })

    new Vue({
        el: '#app'
    })
    </script>
</body>