Vue基础day1

/ 0评 / 0

v-cloak解决插值表达式渲染闪烁

<div id="app"><p v-cloak>{{message}}</p></div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'The message will be show when page loading done',
        }
    })
</script>

而且,在css里面要添加

[v-cloak] {
    display: none;
}

v-text渲染无闪烁

<div id="app">
    <h4 v-text="message"></h4>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'The message will be show when page loading done',
        }
    })
</script>

v-text会覆盖元素中的全部内容,插值表达式只会替换占位符。

v-html将文本解析为html,同时替换元素内全部内容

<div id="app">
    <p v-html="message2"></p>
</div>
<script>
   var vm = new Vue({
    el: '#app',
   data: {
      message2: '<h1>Hello World</h1>',
       }
     })
</script>

v-bind:是vue中提供的用于绑定属性的指令

<div id="app">
    <input v-bind:title="title + 'a title'">
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
           title: 'this is'
        }
    })
</script>

v-bind后的内容执行为表达式,最后输出结果。

v-bind:title可以简写为 :title

v-on:是vue中提供的用于绑定事件的指令

<div id="app">
    <button v-on:click="boom">Click</button>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            title: 'this is'
        },
        methods:{
            boom:function () {
                alert('Hello World');
            },
        },
    })
</script>

v-on:click可以简写为 @click

v-bind实现数据的双向绑定

<div id="app">
<h4>{{msg}}</h4>
<input v-model="msg">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'this is a test',
},
methods: 
},
})
</script>

 

注意:

 

 

 

 

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注