VUE 入门基础(2)

 

二，起步

引用方式可以使用  vue-cli

　　<script src="https://unpkg.com/vue/dist/vue.js"></script>

　　　　声明式渲染

　　　　<div id="app">
  　　　　　　　　{{ message }}
　　　　　　</div>
　　　　　　var app = new Vue({
　　　　　　　　el:'#app',
　　　　　　　　data: {
　　　　　　　　　　message:  'Hello Vue'
　　　　　　　　}
　　　　　　})

　　在DOM元素上绑定属性　

　　　　<div id="app-2">

  　　　　　　<span v-bind:title="message">

   　　　　　　 Hover your mouse over me for a few seconds to see my dynamically bound title!

  　　　　　　</span>

　　　　　</div>

　　　　var app2 = new Vue({

　　　　　　el: '#app-2',

　　　　　　data: {

　　　　　　　　　　message: 'You loaded this page on ' + new Date()

　　　　　　　　}

　　　　　　})

　　v-bind 属性被称为指令，指令带有前缀 v-,以表示他们是Vue.js 提供的特殊属性。

　　条件与循环

　　控制切换一个元素的显示也相当简单：

　　<div id="app-3">

 　　　　 <p v-if="seen">Now you see me</p>

　　</div>

　　var app3 = new Vue({

　　　　el: '#app-3',

　　　　　　data: {

　　　　　　　　seen: true

　　　　　　}

　　　})

　绑定数据到数组来渲染一个列表

　　<div id="app-4>
　　　　<ol>
　　　　　　<li v-for="todo in todos">

　　　　　　　　{{ todo.text }}

　　　　　　</li>

　　　　</ol>

　　</div>

　　var app4 = new Vue({

　　　　　　el: '#app-4',

　　　　　　data: {

　　　　　　　　todos: [

　　　　　　　　　　{text: 'Learn JavaScript'},

　　　　　　　　　　{text: 'Learn Vue'},

　　　　　　　　　　{text: 'Build something awesome'}

　　　　　　　　]

　　　　　　}

　　　　})

处理用户输入

　　用v-on 指令绑定一个监听事件用于调用我们vue实例中定义的方法。

　　<div id="app-5">
　　　　　　<p>{{message}}</p>
　　　　　　<button v-on:click="reverseMessage">Reverse Message</button>
　　</div>
　　var app5 = new Vue({
　　　　　　el: '#app-5',
　　　　　　data: {
　　　　　　　　message: 'Hello Vue.js!'
　　　　　　},
　　　　　　methods: {
　　　　　　　　reverseMessage: function () {
　　　　　　　　this.message = this.message.splict(' ').reverse().join(' ')
　　　　　　}
　　　　}
　　})

用 v-model 指令 在表单和应用状态中做双向数据绑定。

　　<div id="app-6">
　　　　<p>{{message}}</p>
　　　　<input v-model="message">
　　</div>
　　var app6 = new Vue({
　　　　el: '#app-6',
　　　　data: {
　　　　　　message: 'Hello Vue!'
　　　　}
　　})