Vue学习计划(基础二)-模板语法,计算属性,侦听器

<div id="app">

<!-- 以下说绑定的值都可以写成js表达式形式 -->

<!-- {{}}: 双大括弧语法 -->

<!-- 如果不想让它响应更新,可以添加v-once指令(只渲染一次) -->

<p>

first: {{firstName}}<br>

last: {{lastName}}<br>

{{firstName + ' ' + lastName}}

</p>

<!-- 以下的绑定都会优先显示,也就是原本标签之间的值的会无效 -->

<!-- 使用v-html: html会被解析 -->

<p v-html="test"></p>

<!-- 使用v-text: html不会被解析,直接以文本输出 -->

<p v-text="test">123</p>

 

<!-- 标签属性绑定v-bind, 简写":" -->

<img v-bind:height="imgHeight" :width="imgWidth" style="border: 1px solid #000"></img>

</div>

 

<script>

var vm = new Vue({

el: '#app',

data: {

firstName: 'Chi',

lastName: 'Chan',

test: '<h1>哈哈哈<h1>',

imgHeight: '200px',

imgWidth: 200

}

})

</script>