Vue快速入门
一:Vue是什么?
1.Vue是一个渐进式的js框架,何为渐进式,即:学多少用多少,不需要全部学完才能使用,这可能也是为何它能如此火爆的原因吧。
2.Vue的特性
(1)轻量:Vue.js库的体积非常小的,并且不依赖其他基础库。
(2)数据绑定:对于一些富交互、状态机类似的前端UI界面,数据绑定非常简单、方便。
(3)指令:内置指令统一为(v—*),也可以自定义指令,通过对应表达值的变化就可以修改对应的DOM。
(4)插件化:Vue.js核心不包含Router、AJAX、表单验证等功能,但是可以非常方便地根据需要加载对应插件。
(5)组件化:组件可以扩展 HTML 元素,封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用,就是可以自定义标签
二:使用Vue
1.直接下载vue的js文件,然后在页面中进行引入
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--1.引入vue-->
<script src="vue.min.js"></script>
</head>
2.准备div,进行挂载,创建vue对象,绑定工作台
下面代码最终效果会在页面上显示 — 猪八戒
<!--2.创建一个div工作台-->
<div id="qq">{{zq}}</div>
<script>
//3.创建vue对象,绑定工作台
new Vue({
el:"#qq",
data:{
zq:"猪八戒"
}
})
</script>
在data属性中还可以使用对象
<!--创建一个div工作台-->
<div id="qq">{{zq}},{{user}},{{user.name}}</div>
<script>
//创建vue对象,绑定工作台
new Vue({
el:"#qq",
data:{
zq:"猪八戒",
//还可以使用对象
user:{
name:"天蓬",
age:888
}
}
})
在vue中还可以定义方法,与data平级
data:{
zq:"猪八戒",
//还可以使用对象
user:{
name:"天蓬",
age:888
}
},
//方法
methods:{
say:function(){
alert(123);
//可以将值直接返回到div标签中调用方法的地方
return this.user.name+"你好"
}
}
});
调用方法,可以在div标签中调用,也可以直接在methods下面调用
<!--创建一个div工作台-->
<div id="qq">
{{zq}},{{user}},{{user.name}}
<!--这里也可以调用方法-->
{{say()}}
</div>
同时因为vue用变量接收了,这样还可以在下面修改data属性中的值
<script>
//创建vue对象,绑定工作台
var zbj = new Vue({
el:"#qq",
data:{
zq:"猪八戒",
//还可以使用对象
user:{
name:"天蓬",
age:888
}
},
//方法
methods:{
say:function(){
alert(123);
//可以将值直接返回到div标签中调用方法的地方
return this.user.name+"你好"
}
}
});
//调用方法
// zbj.say();
//可以修改值
zbj.zq = "天蓬元帅"
</script>
三:vue的表达式
1.算术运算
<!--创建一个div工作台-->
<div id="qq">
<!--普通运算-->
{{num1+num2}}==={{num1-num2}}==={{num1*num2}}==={{num1/num2}}
</div>
<script>
//创建vue对象,绑定工作台
var zbj = new Vue({
el:"#qq",
data:{
num1:2,
num2:6
},
});
</script>
2.三木运算
<!--创建一个div工作台-->
<div id="qq">
<!--三目运算-->
{{ww?"正确":"错误"}}
</div>
<script>
//创建vue对象,绑定工作台
var zbj = new Vue({
el:"#qq",
data:{
ww:true
}
});
</script>
3.字符串操作
<!--创建一个div工作台-->
<div id="qq">
<!--字符串-->
{{str}}==={{str.substring(2)}}==={{str.toUpperCase()}}
</div>
<script>
//创建vue对象,绑定工作台
var zbj = new Vue({
el:"#qq",
data:{
str:"youaremine"
}
});
</script>
4.对象操作
<!--创建一个div工作台-->
<div id="qq">
<!--对象操作-->
{{user}}==={{user.name}}==={{user.eat()}}
</div>
<script>
//模拟从数据库读取出的数据
var user = {
name:"明凯",
age:26,
eat:function(){
return "吃饭啦";
}
};
//创建vue对象,绑定工作台
var zbj = new Vue({
el:"#qq",
data:{
user:user
}
});
</script>
四:vue的指令,其实也就是一些特殊属性
1.v-text 和 v-html指令,两者都是显示文本内容,但是html指令可以解析标签
<!--创建一个div工作台-->
<div id="qq">
<!--
v-text指令:显示数据,并且覆盖原数据
v-html指令:显示数据,并且覆盖原数据,但是还会解析标签
-->
<span v-text="zbj">竖起约定之花</span> <!--这里显示的内容是<h1>朝花夕拾</h1>-->
<span v-html="zbj">竖起约定之花</span> <!--这里显示的内容是<h1>样式的-->
</div>
<script>
//创建vue对象,绑定工作台
var zbj = new Vue({
el:"#qq",
data:{
zbj:"<h1>朝花夕拾</h1>"
}
});
</script>
2.v-for指令,这就是循环指令,可以循环数组,num数字,对象,字符串
<!--创建一个div工作台-->
<div id="qq">
<!--
v-for:循环,可以循环数组,num,对象,字符串
-->
<!--数组-->
<ul>
<li v-for="(v,i) in hobbys">{{v}}==={{i}}</li> <!-- v:值,i:下标-->
</ul>
<hr/>
<!--对象-->
<ul>
<li v-for="(v,k,i) in user">{{v}}==={{i}}==={{k}}</li> <!-- v:值 ,k:属性,i:下标-->
</ul>
<hr/>
<!--num-->
<ul>
<li v-for="(v,i) in num">{{v}}==={{i}}</li> <!-- v:值,i:下标-->
</ul>
<hr/>
<!--字符串-->
<ul>
<li v-for="(v,i) in str">{{v}}==={{i}}</li> <!-- v:值,i:下标-->
</ul>
</div>
<script>
//创建vue对象,绑定工作台
var zbj = new Vue({
el:"#qq",
data:{
hobbys:["qq","ww","ee"],
user:{
name:"zbj",
age:12,
id:1
},
num:6,
str:"zzzbbbjjj"
}
});
</script>
3.v-show 和 v-if
v-show:只是单纯的显示隐藏指令
<!-- v-show ,值为true是,显示内容,为false时隐藏-->
<div id="qq" v-show="false">
红A
</div>
v-if:是判断指令,也带有显示隐藏功能,但是v-if如果是false的话,不是隐藏,而是这个元素就不会存在
<!-- v-if ,值为true时,显示,为false时,这个这个元素根本就不存在-->
<div id="qq" v-if="msg">
<span style="color: aqua">红A</span>
</div>
<script>
//创建vue对象,绑定工作台
var zbj = new Vue({
el:"#qq",
data:{
msg:false
}
});
</script>
4.v-bind,将data中的属性绑定到标签上,作为标签的属性
<!--创建一个div工作台-->
<!-- v-bind 为属性绑定值-->
<div id="qq">
<img v-bind:src="src" v-bind:alt="name">
<hr/>
<img :src="src" :alt="name"><!--简写-->
<hr/>
<img v-bind="img"><!--为对象属性绑定值-->
</div>
<script>
//创建vue对象,绑定工作台
var zbj = new Vue({
el:"#qq",
data:{
src:"",
name:"R姐",
img:{
src:"",
alt:"红A"
}
}
});
</script>
5.v-model,双向绑定
vue是MVVM模式的,在VM中有一个监听器,不论是M的值发生变化,还是V的值发生变化,另一个值都会跟着变化
<!--创建一个div工作台-->
<!-- v-model 双向绑定 只能用在input,select,textarea-->
<div id="qq">
<input type="text" v-model="text">{{text}} <!--这里的两个text的值会同时发生变化-->
</div>
<script>
//创建vue对象,绑定工作台
var zbj = new Vue({
el:"#qq",
data:{
text:"qwer"
}
});
</script>
6.v-on,注册事件的指令
<!--创建一个div工作台-->
<!-- v-on 事件绑定-->
<div id="qq">
<button v-on:click="eat()" >点击</button>
</div>
<script>
//创建vue对象,绑定工作台
var zbj = new Vue({
el:"#qq",
data:{
},
methods:{
eat:function(){
alert(666)
}
}
});
</script>
五:组件—即自定义标签
组件的语法
全局组件:
Component:组件;
Vue.component(“组件名字”,”组件的配置”)
局部组件:
在vue对象上:
components:{
组件名字:{组件的配置},
组件名字:{组件的配置},
}
1.自定义全局组件—在所有被vue挂载的地方都能使用
<!--创建一个div工作台-->
<div id="qq">
<myqwer></myqwer>
</div>
<div id="qqww">
<myqwer></myqwer>
</div>
<script>
//创建全局自定义标签---所有被挂载的地方都能被使用
Vue.component("myqwer",{
//模板
template:"<h1>全局自定义模板</h1>"
});
//创建vue对象,绑定工作台
var zbj = new Vue({
el:"#qq",
data:{
}
});
var zr = new Vue({
el:"#qqww",
data:{
}
})
</script>
2.自定义局部组件—只能在当前被挂载的标签中使用
<div id="ee">
<zzbbjj></zzbbjj>
</div>
<script>
var zz = new Vue({
el:"#ee",
data:{
},
//创建局部自定义标签---只能在这个被挂载的标签中使用
components:{
zzbbjj:{
template:"<h1>局部自定义标签</h1>"
}
}
});
</script>
六:vue的细节
1.要先定义组件,在进行vue的挂载
2.模板中必须要有一个根标签
3.如果要使用驼峰命名法,如myTag—>那么在使用时大写变小写,且在原来大写地方前面加上中横线加上,如