代碼參考/lesson01/01. Vue表達式.htmlhtml
let vm = new Vue({
el: '#app', // 根元素或掛載點。
data: {
name: 'lee',
age: 18
}
})
複製代碼
這樣咱們就建立好了一個最基本的Vue項目。git
代碼參考/lesson01/01. Vue表達式.htmlgithub
使用Vue表達式{{}},就能夠將數據插入到頁面中的相應位置。數組
<div id="app">
<!-- 使用Vue表達式插入值 -->
姓名:{{name}}<br/>
年齡:{{age}}
</div>
複製代碼
此時能夠嘗試在控制檯修改數據,如vm.age++,就能夠看到頁面現實的值跟着改變。bash
在Vue表達式中,支持書寫簡單的表達式,如app
出生日期:{{new Date().getFullYear() - age}}
複製代碼
對於一些複雜的表達式,能夠使用methods實現:less
let vm = new Vue({
el: '#app', // 根元素或掛載點。
data: {
name: 'lee',
age: 18
},
methods: {
getBirth() {
return new Date().getFullYear() - this.age
},
}
})
複製代碼
再將方法用Vue表達式插入到頁面中:ui
出生日期:{{this.getBirth()}}
複製代碼
代碼參考/lesson01/02. v-bind指令.htmlthis
經過v-bind指令向標籤中插入屬性。spa
JavaScript:
let vm = new Vue({
el: '#app', // 根元素或掛載點。
data: {
name: 'lee',
age: 18
}
})
複製代碼
HTML:
<div id="app">
<!-- 經過v-bind指令插入屬性,能夠簡寫爲:title="age + '歲'" -->
<span v-bind:title="age + '歲'">{{name}}</span>
</div>
複製代碼
JavaScript:
let vm = new Vue({
el: '#app', // 根元素或掛載點。
data: {
name: 'lee',
age: 18,
classStr: 'class1 class2 class3',
classArr: ['class1', 'class2', 'class3'],
classObj: { // 爲false的屬性將不會被渲染到標籤中
class1: true,
class2: true,
class3: false
},
styleStr: 'display: block; height: 20px; background-color: red;',
styleObj: {
display: 'block',
height: '20px',
backgroundColor: 'blue'
},
styleObj2: {
width: '200px',
margin: '0 auto'
}
}
})
複製代碼
HTML:
<div :class="classStr"></div>
<div :class="classArr"></div>
<div :class="classObj"></div>
<div :style="styleStr"></div>
<div :style="styleObj"></div>
<div :style="[styleObj, styleObj2]"></div>
複製代碼