Vue知识点笔记1

2019-05-31  本文已影响0人  二枚目

1、定义一个基本的Vue代码结构:引入vue.js;script中定义Vue对象var vm = new Vue({el: '#id')}并根据id绑定一个Dom元素。
2、插值表达式与“v-text"的区别与使用:

    <p>{{ msg }}可以添加字符</p>
    <p v-text="msg">此处字符会被替换</p>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello'
            }
        })
    </script>

3、v-cloak 解决插值表达式在显示data之前的闪烁问题:[v-cloak] { display: none; }
4、v-html 渲染html格式的数据(对比v-text,皆为覆盖dom元素内部值,但是html可以解析html格式数据并渲染,v-text转换为纯文本输出)
5、v-bind 属性绑定:在dom的属性名前加个"v-bind:"或者":"(缩写为一个冒号)可将后面的属性值替换为data中对应的值。

    <input type="button" v-bind:value="msg" v-on:click="show"/>
    <!-- 按钮值为"hello" 点击提示"world" -->
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello'
            },
            methods: {
                show: function () {
                    alert('world');
                }
            }
        })
    </script>

6、v-on 事件绑定:在dom的属性名前加个"v-on:"或者"@"(缩写)可将后面的事件替换为methods中对应的函数。

上一篇下一篇

猜你喜欢

热点阅读