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的内容。
列表循环——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>