Vue

by face08

HTML

<div id="app">
  <div>{{ message }}</div>
  <div v-html="message2"></div>
  
  <div>
    <label for="r1">3：属性v-bind</label><input type="checkbox" v-model="class1" id="r1">
    <div v-bind:class="{'class1': class1}">
      directiva v-bind:class
    </div>
  </div>
  
 <div>
  <p>  4：表达式  </p>
 	{{5+5}}<br>
	{{ ok ? 'YES' : 'NO' }}<br>
 </div>
 
  <div v-if="seen">5：指令是带有 v- 前缀的特殊属性. 当前v-if</div>
  
  <div><a v-bind:href="url">6：参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性。</a></div>
  
  <div>
    <p>{{ message3 }}</p>
    <input v-model="message3">
  </div>
  
  <div>
    <button v-on:submit.prevent="onSubmit">8：修饰符</button>
  </div>
</div>

CSS

div{
  padding-top:20px;
}

.class1{
  background: #444;
  color: #eee;
}

Vue

new Vue({
  el: '#app',
  data: {
    message: '1：文本插值 <span style="color: red">This should be red.</span>',
    message2: '2：v-html指令 <span style="color: red">This should be red.</span>',
    class1: false,
    ok: true,
    seen:true,
    url: 'http://www.baidu.com',
    message3:"7：双向绑定"
  },
  
  meths:{
  	onSubmit(){
    	console.log('click')
    }
  }
})