Vue 基础知识

最新推荐文章于 2024-05-16 08:31:03 发布

津门老九

最新推荐文章于 2024-05-16 08:31:03 发布

阅读量211

点赞数

分类专栏： Vue 知识积累

本文链接：https://blog.csdn.net/u010723080/article/details/107170385

版权

Vue 知识积累专栏收录该内容

3 篇文章 0 订阅

订阅专栏

插值表达式：

<body>
    <script src="./vue.js"></script>

    <div id="app">
        <div>{{msg}}</div>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello World'
            }
        })
    </script>
</body>

插值表达式可以读取 data 中的数据，展示在标签上。在插值表达式中也可以进行基本的数值运算。<br/>

指令：

<body>
    <script src="./vue.js"></script>

    <div id="app">
        <input type="text" v-model="msg"/>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello World'
            }
        })
    </script>
</body>

v-model 指令将 data 中的数据和一个文本输入框进行绑定，data 中的数据改变文本框的内容会跟着改变，相反文本框中的内容改变 data 中的数据也会跟着改变。v-model 一般用在表单标签上（文本框、多选框、单选框、下拉框等）。v-model 在不同的表单标签上，绑定的数据类型不一样。

<body>
    <script src="./vue.js"></script>

    <div id="app">
        <div v-text="textmsg"></div>
        <div v-html="htmlmsg"></div>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                textmsg: 'Hello World',
                htmlmsg: '<h1>Hello World</h1>'
            }
        })
    </script>
</body>

v-text 指令将文本内容展示在标签内，v-html 表将 html 片段展示在表示内。

<body>
    <script src="./vue.js"></script>

    <div id="app">
        <a v-bind:href="url">超链接</a>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                url: 'http://www.baidu.com'
            }
        })
    </script>
</body>

v-bind 指令将标签的属性与 data 中数据绑定。简写形式如下：

<a :href="url">超链接</a>

<body>
    <script src="./vue.js"></script>

    <div id="app">
        <div v-bind:style='{color: r, fontSize: s}'>Hello World</div>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                r: 'blue',
                s: '50px'
            }
        })
    </script>
</body>

v-bind 指令绑定 div 标签的 style 属性，属性值可以是一个对象，对象的属性值是 data 中的数据。

<body>
    <script src="./vue.js"></script>

    <div id="app">
        <button v-on:click="fun">按键</button>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            methods: {
                fun: function () {
                    console.log("点击了按键")
                }
            }
        })
    </script>
</body>

v-on 指令用于事件绑定，v-on 指令给按键绑定一个点击事件，当点击按键时执行 fun 方法，简写形式如下：

<button @click="fun">按键</button>

<body>
    <script src="./vue.js"></script>

    <div id="app">
        <button @click="fun">按键</button>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello world'
            },
            methods: {
                fun: function () {
                    console.log(this.msg)
                }
            }
        })
    </script>
</body>

使用 v-on 指令绑定 button 标签的点击事件，当点击按键，执行 fun 方法，在 fun 方法中 this 指向的是 Vue 实例。

<body>
    <script src="./vue.js"></script>

    <div id="app">
        <button @click="fun('hello world')">按键</button>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            methods: {
                fun: function (msg) {
                    console.log(msg)
                }
            }
        })
    </script>
</body>

使用 v-on 指令绑定 button 标签的点击事件，当点击按键，执行 fun 方法，可以给 fun 方法传递参数。

<button @click="fun">按键</button>
...
fun: function (e) {
    console.log(e)
}

如果不传递参数，在方法声明中可以个方法添加一个参数，该参数是事件对象。

<button @click="fun($event,'hello world')">按键</button>
...
fun: function (e, msg) {
    console.log(e)
    console.log(msg)
}

在传递正常参数的同时也可以通过 $event 将事件对象显示的作为参数传递过来。

<body>
    <script src=".t/vue.js"></script>

    <div id="app">
        <ul>
            <li v-for="i in 10">{{i}}</li>
        </ul>
    </div>

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

津门老九

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 基础知识

插值表达式：<body> <script src="./vue.js"></script> <div id="app"> <div>{{msg}}</div> </div> <script> var vm = new Vue({ el: '#app', data: {
复制链接

扫一扫

专栏目录