vue核心基本的使用——vue指令
理解vue
vue是一种用于构建用户界面的渐进式框架，核心层只关心视图层，与现代化的工具链以及各种支持类库结合使用时，vue可以为复杂的单页应用提供驱动。
学习vue的条件
学习掌握html、css、JavaScript ;
vue实例的创建
在vue前，需要先创建一个实例接收数据。
创建步骤：
1.创建实例
var app = new Vue({
el:"#app",
data:{
},
methods:{
}
})
2.接收实例的容器
<div id="app">
</div>
其中，el表示挂载容器的选择器，
data表示需要接收的数据
methods表示要使用到的方法
vue指令
声明式渲染——v-bind
通过使用v-bind指令将模板与dom结合起来，并将模板内容渲染到dom中去。
<div id="app">
<h1 :title="message">鼠标悬停1秒钟</h1>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:'这里是蓦然的博客'
},
methods:{
}
})
</script>
v-bind可简写成：
这里将data数据挂载到id为app的div容器中，并且绑定在app中的h1，执行结果为
条件——v-if
v-if控制元素的显示隐藏，如果v-if的内容为真，则显示，否则将隐藏。
<div id="app">
<h1 v-if="see">{
{
message}}</h1>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:'这里是蓦然的博客',
see:true,
},
methods:{
}
})
</script>
此时，在h1身上添加了v-if=“see”指令，如果see为true，显然message照常显示，如果false,则不显示message的内容。
扫描二维码关注公众号，回复：
15240172 查看本文章
列表循环——v-for
数组绑定v-for指令来渲染列表，通过v-for指令，将数组当中的每一项都渲染出来。
<div id="app">
<h1 v-if="see">{
{
message}}</h1>
<ul v-for="item in list" :key="id">
<li>{
{
item.id}} {
{
item.content}}</li>
</ul>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:'这里是蓦然的博客',
see:true,
list:[
{
id:1,content:"少壮不努力，老大徒伤悲！"},
{
id:2,content:"欲穷千里路，更上一层楼！"},
{
id:3,content:"明日复明日，明日何其有！"},
{
id:4,content:"烽火连三月，家书抵万金！"},
]
},
methods:{
}
})
上述代码使用了v-for指令把list的数据一一渲染了出来。
处理用户动作（事件监听）——v-on
使用v-on指令添加事件监听，通过v-on调用vue中的方法，实现用户对页面动作的反应。
<div id="app">
<h1 v-if="see">{
{
message}}</h1>
<ul v-for="item in list" :key="id">
<li>{
{
item.id}} {
{
item.content}}</li>
</ul>
<button @click="al()">确定</button>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:'这里是蓦然的博客',
see:true,
list:[
{
id:1,content:"少壮不努力，老大徒伤悲！"},
{
id:2,content:"欲穷千里路，更上一层楼！"},
{
id:3,content:"明日复明日，明日何其有！"},
{
id:4,content:"烽火连三月，家书抵万金！"},
]
},
methods:{
al:function(){
alert("你点击了1次确定！")
}
}
})
</script>
v-on可简写成@
在实例的methods中创建了al方法——绑定在button上，如果点击了按钮，则弹出警示框。
事件双向绑定——v-model
通过v-model指令，实现表单输入与应用状态之间数据的双向绑定
<div id="app">
<input type="text" v-model="text" value="曹植：本是同根生，相煎何太急！">
<p>{
{
text}}</p>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:'这里是蓦然的博客',
text:"",
see:true,
list:[
{
id:1,content:"少壮不努力，老大徒伤悲！"},
{
id:2,content:"欲穷千里路，更上一层楼！"},
{
id:3,content:"明日复明日，明日何其有！"},
{
id:4,content:"烽火连三月，家书抵万金！"},
]
},
methods:{
al:function(){
alert("你点击了1次确定！")
}
}
})
组件化应用构建
组件系统是vue的一个重要概念，通常情况下，页面可以有多个小型组件，组成一个组件树。
组件的构建过程
1.构建组件容器——显示范围
<template id="myCom">
<div>这是组件</div>
</template>
2.注册组件：全局注册、局部注册
Vue.Component('my-com',{
template:'#myCom'//全局注册
});
var app = new Vue({
el:"#app",
components:{
'my-com':{
template:'#myCom',//局部注册
}
}
})
3.使用组件
<div id="app">
<!-- 3.使用组件 -->
<my-com></my-com>
</div>