Vue快速入门
简介
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
Vue 只关注视图层， 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
学习前通知
需要对html、css、javascript、ajax有简单了解
vue基础
el挂载点：
el：挂载点
el是用来设置Vue实例挂载(管理)的元素
1.Vue实例的作用范围是什么？
Vue会管理el选项命中的元素机器内部的后代元素
2.是否可以使用其他选择器？
可以使用其他选择器，建议使用Id选择器
3.是否可以设置其他的dom元素？
可以使用其他的双标签，但是不可以使用HTML和body标签
data：数据对象
1.vue中用到的数据定义在data中
2.data 中可以写复杂类型的数据
3.渲染复杂类型数据时，遵守js的语法即可
demo：
<head>
<meta charset="UTF-8">
<title>hello word</title>
<!--1.先引入vue的类库 vue官网给的是需要联网的 可以拷贝生成本地文件-->
<script src="vue.js"></script>
</head>
<body>
<!--2.创建一个双标签id 并设置id为hello-->
<div id="hello">
<!--在浏览器页面显示的内容 “ Hello World”-->
{{message}}
<hr>
<span>{{person.name}}-->{{person.type}}</span>
<hr>
<ul>
<li>{{list[0].lol}}</li>
<li>{{list[1].lol}}</li>
<li>{{list[2].lol}}</li>
</ul>
<br>
{{date}}
</div>
</body>
<!--3.js代码块-->
<script>
//创建一个Vue对象
var h = new Vue({
el:"#hello"
,data:{
message:"Hello World"
//时间类型
,date:new Date().getFullYear()+"年"
//对象类型
,person:{
name:"Vue"
,type:"框架"
}
//数组对象
,list:[
{lol:"Uzi"}
,{lol:"thyShy"}
,{lol:"Ming"}
]
}
});
</script>
①、 Vue本地应用
v-text:设置标签的文本值(textContent)
1.v-text指令的作用是：设置标签的内容
2.默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容
3.内部支持写表达式
v-html：设置标签的innerHtml
1.v-html指令的作用是：设置元素的innerHTML
2.内容中有html结构会被解析为标签
3.v-text指令无论内容是什么，只会解析文本
4.解析文本使用v-text，需要解析html结构使用v-html
v-on：为元素绑定事件
1.事件名不需要写on
2.指令可以简写为@
3.绑定的方法定义在methods属性中
4.方法内部通过this关键字可以访问定义在data中的数据
<body>
<div id="v">
<spam>{{message}}</spam>
<hr>
<span v-text="message"></span>
<hr>
<!--在原来的内容上拼接-->
<span v-text="message+'真好'"></span>
<hr>
<!--有颜色样式-->
<span v-html="context"></span>
<!--没有样式,则会显示：<p style='color: darkgoldenrod'>Hello Vue</p>-->
<span v-text="context"></span>
</div>
<br>
<br>
<br>
<div id="e">
<!--v-on:click点击事件 可简化为@click-->
<button v-on:click="add">+</button>
<span v-text="num">0</span>
<button @click="sub">-</button>
</div>
</body>
<script>
var g = new Vue({
el:"#v"
,data:{
message:"Vue.js"
,context:"<p style='color: darkgoldenrod'>Hello Vue</p>"
}
,methods:{
}
})
var u = new Vue({
el:"#e"
,data: {
message: "Hello Vue"
,num:0
}
,methods: {
add:function(){
if (this.num==10){
alert("别点了")
}else {
this.num++
}
}
,sub(){
if (this.num==0){
alert("别点了")
}else {
this.num--
}
}
}
})
</script>
②、本地应用
v-show:根据表达值的真假，切换元素的显示和隐藏
1.v-show指令的作用是：根据真假切换元素的显示状态
2.原理是修改元素的display，实现显示隐藏
3.指令后面的内容，最终都会解析为布尔值
4.值为true元素显示，值为false元素隐藏
5.数据改变后，对应元素的显示状态会同步更新
v-if：根据表达值的真假 ，切换元素的显示和隐藏(操作dom元素)
1.v-if指令的作用是：根据表达式的真假切换元素的显示状态
2.本质是通过操作dom元素来切换显示状态
3.表达式的值为true，元素存在于dom树中，为false，从dom树中移除
4.频繁的切换v-show，反之使用v-if，前者的切换消耗小
v-bind：设置元素的属性(比如：src，title，class)
1.完整式：v-bind：属性名
2.简写方式 省略v-bind，只保留 :属性名
3.需要动态的增删class建议使用对象方式
demo
<style>
.imag{
border: 6px solid lightcoral;
}
</style>
</head>
<body>
<div id="Max">
<button @click="ch">点击显示图片</button>
<br>
<button @click="ge">点击显示图片</button>
<br>
<button @click="an">显示其他效果</button>
<br>
<img src="img/1.jpg" v-show="agree" width="300px" height="300px">
<br>
<img :src="imgU" width="300px" height="300px" v-if="flag" v-bind:class="{imag:ims}">
</div>
</body>
<script>
new Vue({
el:"#Max"
,data:{
agree:false
,flag:false
,ims:false
,imgU:"./img/2.jpg"
}
,methods:{
ch(){
this.agree=!this.agree
}
,an:function () {
this.ims=!this.ims
}
,ge(){
this.flag=!this.flag
}
}
})
</script>
一个小栗子：图片改成自己的既可以看到效果
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>图片切换</title>
<link rel="stylesheet" href="./css/imgaeIndex.css" />
</head>
<body>
<div id="mask">
<div class="center">
<h2 class="title">
LOL
</h2>
<!-- 图片 -->
<img :src=imgUrl[index] alt="" />
<!-- 左箭头 -->
<a href="javascript:void(0)" class="left" @click="nt" v-if="index>0">
<img src="./images/prev.png" alt="" />
</a>
<!-- 右箭头 -->
<a href="javascript:void(0)" class="right" @click="prev" v-if="index<imgUrl.length-1">
<img src="./images/next.png" alt="" />
</a>
</div>
</div>
<script src="./js/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el:"#mask",
data:{
index:0,
imgUrl:[
'./img/1.jpg',
'./images/01.jpg',
'./images/02.jpg',
'./images/03.jpg',
'./images/04.jpg',
'./images/05.jpg',
]
},
methods:{
prev(){
this.index++
}
, nt(){
this.index--
}
}
})
</script>
</body>
③.本地应用
v-for:根据数据生成列表的结构
1.数组经常和v-for结合使用
2.语法是 (item,index) in 数据
3.item和index可以结合其它的指令一起使用
4.数组长度的更新会同步到页面上，是响应式的
v-on(补充):传递自定义参数，事件修饰符
1.事件绑定的方法写成函数调用的形式，可以传入自定义参数
2.定义方法时，需要定义形参来接受传入的实参
3.事件的后面跟上 .修饰符 可以对事件进行限制
4. .enter可以限制触发的按键为回车
5. 事件修饰符有多种
v-model:获取和设置表单元素的值
1.绑定的数据会和表单元素值相关联
2.绑定的数据<-------->表单元素的值
demo：
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="max">
<button @click="changeName">点击</button>
<br>
<!--keyup 触发键位为enter-->
<input type="text" v-model="msg" @keyup.enter="change">
<br>
<span>{{msg}}</span>
</div>
</body>
<script>
new Vue({
el:"#max"
,data:{
msg:"Hello Vue"
}
,methods:{
changeName(){
this.msg="Hello World"
}
//敲下enter键 会改变input、span中msg显示的内容
,change(){
this.msg="LOL"
}
}
})
</script>
④网络应用
文档传送：axios文档
网络应用 ：vue结合网络数据 开发应用
1.axios功能强大的网络请求库
2.axios请求格式
axios.get(地址?key=value&key2=values).then(function(response){},function(err){})
axios.post(地址, {key:value,key2:value2}).then(function(response){},function(err){})
一个网络接口栗子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入vue.js文件-->
<script src="../js/vue.js"></script>
<!--引入axios.js文件(网络请求库)-->
<script src="../js/axios.js"></script>
<style>
.text{
width: 295px;
height: 100px;
background: skyblue;
}
</style>
</head>
<body>
<div id="max">
<button @click="getJokes">点击获取笑话</button>
<br> <!--用v-for获取数组中的数据-->
<textarea class="text" maxlength="500px" v-for="item in jokes">{{item}}</textarea>
</div>
</body>
<script>
var app = new Vue({
/*挂载*/
el:"#max"
/*数据*/
,data:{
jokes:[]
}
/*方法*/
,methods:{
getJokes(){ /*网络接口：获取笑话的api接口*/
axios.get("https://autumnfish.cn/api/joke/list?num=5").then(function (res) {
/*请求到的五条笑话传给定义好的jokes:[]数组*/
app.jokes=res.data.jokes;
})
}
}
})
</script>
</html>
版权声明：本文为weixin_54517901原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。