1、簡單數據綁定
<div id="app-1">
? ? ? {{message}}
? ? </div>
new Vue({
? el: '#app-1',
? data: {
? ? message: 'Hello Vue!'
? }
})
2、v-html
<div id="app-2">
? ? {{message}}
? ? ? <span v-html="messageHtml"></span>
? ? </div>
new Vue({
? el: '#app-2',
? data: {
? ? message: 'Hello Word!',
? ? messageHtml: '<h1>Hello</h1>'
? }
})
3、v-if v-else v-show
<div id="app-3" >
? ? ? <div v-if="ok">
? ? ? ? 原來是真的哦
? ? ? </div>
? ? ? <div v-else="ok">原來是假</div>
? ? ? <div v-show="ok2">
? ? ? ? 2是真的哦
? ? ? </div>
? ? </div>
new Vue({
? el: '#app-3',
? data: {
? ? ok: false,
? ? ok2: false
? }
})
4、v-for
<div id="app-4">
? <ul>
? ? ? ? <li v-for=" (s,index) in st ">
? ? ? ? ?{{index}}-{{s.name}}-{{s.age}}
? ? ? ? </li>
? ? ? </ul>
? ? ? <ul>
? ? ? ? <li v-for=" aa in devstudent ">
? ? ? ? ? {{aa}}
? ? ? ? </li>
? ? ? </ul>
? ? </div>
new Vue({
? el: '#app-4',
? data: {
? ? student: [1, 4, 23, 2, 3],
? ? devstudent: '',
? ? st: [
? ? ? {name: 'zhangsan', age: '18'},
? ? ? {name: 'lisi', age: '19'},
? ? ? {name: 'wangwu', age: '15'}
? ? ]
? },
? computed: {
? ? devstudent: function () {
? ? ? return this.student.sort()
? ? }
? }
})
5、v-on
<div id="app-5">
? ? ? <p>{{a}}</p>
? ? ? <p>
? ? ? ? <button v-on:click="jia">+1</button>
? ? ? ? <button v-on:click="jian">-1</button>
? ? ? </p>
? ? ? <p>
? ? ? ? <input type="text" @keyup.enter="onEnter" v-model="b">
? ? ? </p>
? ? </div>
new Vue({
? el: '#app-5',
? data: {
? ? a: 10,
? ? b: 0
? },
? methods: {
? ? jia: function () {
? ? ? this.a ++
? ? },
? ? jian: function () {
? ? ? this.a --
? ? },
? ? onEnter: function () {
? ? ? this.a = this.a + parseInt(this.b)
? ? }
? }
})
6、v-model
<div id="app-6">
? ? ? <h1>選擇框</h1>
? ? ? <p>
? ? ? ? <input type="checkbox" id="Jack" value="Jack" v-model="xzArray">
? ? ? ? <label for="Jack">Jack</label>
? ? ? ? <br>
? ? ? ? <input type="checkbox" id="Jhon" value="Jhon" v-model="xzArray">
? ? ? ? <label for="Jhon">Jhon</label>
? ? ? ? <br>
? ? ? ? <input type="checkbox" id="Joe" value="Joe" v-model="xzArray">
? ? ? ? <label for="Joe">Joe</label>
? ? ? ? <br>
? ? ? ? <p>{{xzArray}}</p>
? ? ? </p>
? ? ? <h1>單選按鈕</h1>
? ? ? <p>
? ? ? ? <input type="radio" id="one" value="true" v-model="danxuan">
? ? ? ? <label for="one">true</label>
? ? ? ? <br>
? ? ? ? <input type="radio" id="two" value="false" v-model="danxuan">
? ? ? ? <label for="two">false</label>
? ? ? ? <br>
? ? ? <p>{{danxuan}}</p>
? ? ? <h1>選擇列表</h1>
? ? ? <p>
? ? ? ? <select v-model="select">
? ? ? ? ? <option>A</option>
? ? ? ? ? <option>B</option>
? ? ? ? ? <option>C</option>
? ? ? ? </select>
? ? ? <p>{{select}}</p>
? ?</p>
? ? </div>
new Vue({
? el: '#app-6',
? data: {
? ? xzArray: [],
? ? danxuan: '',
? ? select: ''
? }
})
7、v-bing
? ? <div id="app-7">
? ? ? <div v-bind:class="className">1.綁定className</div>
? ? ? <div v-bind:class={classA:colorOr}>2.綁定class中的判斷</div>
? ? ? <div v-bind:class=[classA,classB]>3.綁定class中使用數組</div>
? ? ? <div v-bind:class=[colorOr?classA:classB]>4.綁定class中使用三元表達式</div>
? ? ? <div v-bind:class=[{classA:colorOr},classB]>5.綁定class中使用判斷組合</div>
? ? ? <div :style="{color:red, fontSize:font}">6.style綁定</div>
? ? ? <div :style="fontArray">7.style綁定json數組</div>
? ? </div>
? <style>
? ? .classA{
? ? ? color: red;
? ? }
? ? .classB{
? ? ? font-size: 200%
? ? }
? </style>
new Vue({
? el: '#app-7',
? data: {
? ? className: 'classA',
? ? colorOr: false,
? ? classA: 'classA',
? ? classB: 'classB',
? ? red: 'red',
? ? font: '30px',
? ? fontArray: {
? ? ? color: 'green',
? ? ? fontSize: '12px'
? ? }
? }
})
8、自定義指令
