Vue学习笔记（一）：介绍

一、引入Vue

<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

二、声明式渲染

<div id="app">
    {{messsage}}
</div>
<script type="text/javascript" charset="utf-8">
    var app = new Vue({
    el:'#app',
	data:{
	messsage:'wangxuan'
	}
    });
</script>

Vue在背后做了大量的工作，现在数据和DOM已经被关联了起来，可以通过修改app.message来更新页面。

三、绑定元素特征

<div id='app-2'>
    <span v-bind:title="message">
        悬停查看效果
    </span>
</div>
var app2 = new Vue({
	el:"#app-2",
	data:{
		message:'页面加载于'+new Date().toLocaleString()
	}
})

v-bind特性被称为指令，v-为前缀的是Vue提供的特殊特性，v-bind的意思是绑定，这里指将title与message属性保持一致

 四、条件

<div id="app-3">
	<span v-if='seen'>不可见</span>
</div>
var app3 = new Vue({
	el:"#app-3",
	data:{
		seen:false
	}
})

Vue提供了强大的过滤系统，可以在插入/更新/移除元素时进行应用过滤。这里seen来控制span的可见性，false时不可见，将app3.seen改为true便可见了。

五、循环

<div id="app-4">
    <ul>
        <li v-for="todo in todos">
            {{todo.text}}
        </li>
    </ul>
</div>
var app4 = new Vue({
    el:"#app-4",
    data:{
	todos:[{
		text:1
	},{
		text:2
	},{
		text:3
	}]
    }
})

v-for可以绑定数组来渲染列表，我们可以操作app4.todos.push({text:4})来增加新项目

六、处理用户输入

为了能与用户进行交互，我们可以用v-on指令添加一个事件监听器，通过它调用在Vue实例中定义的方法。

<div id="app-5">
	<span>{{message}}</span>
	<button v-on:click='reverseMessage'>翻转字符串</button>
</div>
var app5 = new Vue({
	el:"#app-5",
	data:{
		message:"Hello Vue!"
	},
	methods:{
		reverseMessage:function(){
			this.message = this.message.split("").reverse().join("");
		}
	}
})

Vue提供v-model来实现表单输入与应用状态之间的双向绑定，当在输入框输入时，span的内容也会同步更新

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

七、组件化应用构建

在Vue里，一个组件本质上是一个拥有预定义选项的Vue实例。

<div id="app-7">
    <ul>
        <!--每个list-item提供todo对象，它是变量，即其内容是动态的。我们为每个组件提供了一个key-->
        <list-item v-for='item in lists' v-bind:todo='item' v-bind:key='item.id'></list-item>
    </ul>
</div>

/*新建了一个名为list-item的组件*/
Vue.component('list-item',{
    props:['todo'],
    template:'<li>{{todo.text}}</li>'
})
var app7 = new Vue({
    el:"#app-7",
    data:{
	lists:[{
	    id:0,text:1
	},{
	    id:1,text:2
	}]
    }
})