Vue学习
学习
Vue.js基本语法
安装Vue
开发版本
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
生产环境版本
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
使用node安装
node install --save-dev
//导入包
<script src="./node_modules/vue/dist/vue.js"></script>
第一个Vue程序
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app', //绑定挂载点
data: {
message: 'Hello Vue!'
}
})
el绑定的作用实例范围是什么
el绑定的标签内部都可以
el只能绑定单标签
DATA数据对象
此处省略十万字
本地应用
v-text指令
作用：
- 设置标签文本值
- 默认写法会替换全部内容，使用插值表达式
{{ }}会替换指定内容
<div>
<h2 v-text="message"></h2>
<h2>
文本{{message}} //插值表达式
</h2>
</div>
var app = new Vue({
el:"#app",
data:{
message:"信息",
}
})
插值表达式
<body>
<div id="app">
<h2 v-text="msg+'!'"></h2> //可以直接在指令中直接加入表达式
</div>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"msg"
}
})
</script>
</body>
v-html指令
作用：
- 设置标签innerHTML
- 将data内容解析成为标签内容
- v-text无论内容是什么都只会被解析成文本
<div id="app">
<div v-html="content"></div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
content:"<a href="http://www.baidu.com">百度</a>"
}
})
</script>
此时：content值将被解析成为
a标签
v-on指令
作用：
- 为元素绑定事件
- 绑定的方法定义在
methods属性中- 方法的内部通过
this关键字可以访问定义在data中的数据
<div id="app">
<input type="button" value="v-on指令" v-on:click="doit">
</div>
<script>
var app = new Vue({
el:"#app",
methods:{
doit:function(){
//逻辑代码
}
},
})
</script>
简单示例
<div id="app">
<input type="button" value="v-on点击" v-on:click="handle">
<div v-on:click="add">{{ food }}</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
food:"点击"
},
methods: {
handle:function(){
alert("hello")
},
add:function(){
this.food += "点击"
}
},
})
</script>
实例：计数器
实现效果
实现的基本逻辑代码
<div id="app">
<div class="input-num">
<button v-on:click="sub">-</button>
<span>{{num}}</span>
<button v-on:click="add">+</button>
</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
num:0,
},
methods:{
add:function(){
if(this.num<10){
this.num++;
}else{
alert("已经最大了")；
}
},
sub:function(){
if(this.num>0){
this.num--;
}else{
alert("已经最小了")
}
},
}
})
</script>
注
其中的if-else语句
if(判断条件){
//逻辑代码
}else{
//逻辑代码
}
总结
- 创建
Vue实例时：el（挂载点），data（数据），methods（方法）v-on指令的作用是绑定事件。简写为@- 方法中通过
this，关键字获取data中的数据v-text指令的作用是，设置元素的文本值，简写为{{ }}v-html指令的作用是设置元素的innerHTML
v-show
作用：
- 根据表达值的真假，切换元素的显示和隐藏
- 原理是修改元素的
display,实现显示隐藏- 指令后面的内容最终都会解析为布尔值
- 值如果为
true则显示元素，值为flase元素隐藏- 数据改变之后，对应元素的显示状态会同步更新
<!-- Html -->
<div id="app">
<button @click="changeisshow">点击</button>
<div v-show="isshow">hello</div>
</div>
<!-- Vue -->
<script>
var app = new Vue({
el:"#app",
data:{
isshow:false,
},
methods: {
changeisshow:function(){
this.isshow = !this.isshow
}
},
})
</script>
v-if指令
作用
- 根据表达值的真假，切换元素的显示和隐藏（操纵dom元素）
- v-if = "表达式"
- 本质是通过操纵dom元素来进行切换显示
- 表达式的值为true的时候元素存在于dom树中，为false的时候从dom树中移除
<body>
<div id="app">
<input type="button" value="点我切换显示" @click="changeIsShow" />
<p v-if="isShow">hello</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:false
},
methods:{
changeIsShow(){
this.isShow = !this.isShow
}
}
})
</script>
</body>
v-show和v-if的区别
- v-show指令：元素始终被渲染到HTML，它只是简单的伪元素设置css的style属性，当不满足条件的元素被设置style=“display：none”的样，是通过修改元素的的CSS属性(display)来决定实现显示还是隐藏
- v-if指令：满足条件是会渲染到html中，不满足条件时是不会渲染到html中的，是通过操纵dom元素来进行切换显示
应用场景
v-if需要操作dom元素，有更高的切换消耗，v-show只是修改元素的的CSS属性有更高的初始渲染消耗，如果需要非常频繁的切换，建议使用v-show较好，如果在运行时条件很少改变，则使用v-if较好
v-bind指令
作用
- 设置元素属性（比如：scr，title，class）
- 属性绑定的数值为data中的数据
<div id="app">
<img v-bind:src="imgSrc">
</div>
<script>
var app = new Vue({
el:"#app",
data:{
imgSrc="//图片地址"
}
})
</script>
类样式控制示例
.active{
width: 30px;
height: 30px;
background-color: saddlebrown;
}
<div id="app">
<div :class="{active:isactive}" @click="toactive"></div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
isactive:true,
},
methods: {
toactive:function(){
this.isactive = !this.isactive
}
},
})
</script>
实现控制
class属性的功能
实例：图片切换
<style>
.imgs{
width: 300px;
height: 200px;
}
</style>
<body>
<div id="app">
<div @click="pre" v-show="index>0">上一页</div>
<img class="imgs" :src="imgSrc[index]">
<div @click="next" v-show="index<imgSrc.length-1">下一页</div>
</div>
</body>
<script>
var app =new Vue({
el:"#app",
data:{
imgSrc:[
"./img/01.png",
"./img/02.png",
"./img/03.png",
],
index:0,
},
methods: {
pre:function(){
this.index--;
},
next:function(){
this.index++;
}
},
})
</script>
总结
可以直接在v-show中写表达式（如：判断表达式等）
v-for指令
作用
- 根据数据生成列表结构
- 数组经常和v-for结合使用
- 语法是（item，index）in 数据
- item和index可以结合其他指令使用
- 数组长度的更新会同步到页面上，是响应式的。
<body>
<div id="app">
<ul>
<li v-for="arr in arrs">
数组{{arr}}
</li>
</ul>
</div>
</body>
<script>
var app = new Vue({
el:"#app",
data:{
arrs:[0,1,2,3,4]
}
})
</script>
v-on指令的补充
补充内容：
- 事件绑定的方法写成函数调用的形式，可以传入自定义参数
- 定义方法时需要定义形参来接收传入的实参
- 事件的后面跟上。修饰符可以对事件进行限制
- enter可以限制触发的按键为回车
- 事件修饰符有多种
<body>
<div id="app">
<button @click="doit('点击成功')">点击</button> //传参给doit==》pi
<input type="text" @keyup.enter="sayHi">
</div>
</body>
<script>
var app = new Vue({
el:"#app",
methods: {
doit:function(p1){
alert(p1)
},
sayHi:function(){
alert("hi")
}
},
})
</script>
v-model指令
作用
- v-mode指令的作用是便捷的设置和获取表单元素的值
- 绑定的数据会和表单元素值相关联
- 绑定的数据←→表单元素的值
<body>
<div id="app">
<input type="text" v-model="msg">
<div>{{ msg }}</div>
</div>
</body>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"hello",
}
})
</script>
网络应用
网络请求库 axios
导入axios
node install axios --save-dev //node安装axios
<script src="./node_modules/axios/dist/axios.js"></script> //导入包
axios.get语法
axios.get(地址？key=value & key2=value2).then(function(response){},function(err){})
语法解析
形参response可以获取到请求地址返回的内容，
形参err接收请求地址返回错误值
axios.post语法
axios.post(地址，{key:value,key2:value2}).then(function(response){},function(err){})
浙公网安备 33010602011771号