eightHundreds
11/20/2016 - 4:39 AM

基本用法

基本用法

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div id="app">
			{{message}}
		</div>

		<div id="app2">
			<span v-bind:title="message">把app2.message绑定到span标签的title属性上</span>
		</div>

		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					message: 'hello Vue'
				}
			})
			var app2 = new Vue({
				el: '#app2',
				data: {
					message: 'You loaded this page on ' + new Date()
				}
			})
		</script>
	</body>

</html>
<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
<script>
  var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})
</script>
<div id="app-3">
  <p v-if="seen">Now you see me</p>
</div>
<script>
  var app3 = new Vue({
    el: '#app-3',
    data: {
      seen: true
    }
  })
</script>
<!--修改app3.seen 能控制p标签的显示  -->
<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
<script>
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})
</script>
<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>
<script>
  var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
</script>