vue是一个渐进式框架,让前端开发人员从dom操作解放出来,变为操纵数据即可,然后dom的操作Vue内部帮我们实现了,用了Vue之后不建议再去人为的操作dom。那下面说说Vue的一些基本指令
首先学习第一个 v-text指令:这个是用来渲染文本的,可以简写:{{ message}} 切记!!!{{message}}要写在id为app的div中
<div id="app">
{{message}}
</div>
//这里我导入的是本得Vue
<script src="../lib/vue.js"></script>
//这里的Vue是网络的
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!开始学习Vue',
}
})
</script>
v-html指令,跟上面的是一样的,都是渲染文本的。区别是:这个可以解析html,!!!这个没有简写!!!
<div id="app">
<div v-html="message"></div>
</div>
<script src="./lib/vue.js"></script>
<script>
let app= new Vue({
el:'#app',
data:{
message:"<h1>我是H1</h1>"
}
})
</script>
v-on 事件绑定 v-on:click="xxx" 简写: @click="xx" 来来来!废话不多说,上代码! @click="可以调用方法"
<div id="app">
<h4>{{message}}</h4>
<input type="button" value="点我!" v-on:click="message='lahu'">
<input type="button" value="点我!" v-on:click="info">
<!-- @click="可以用方法" -->
<input type="button" value="点我!" @click="info1">
</div>
<script src="../lib/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: "出日头啦",
},
// 方法
methods: {
info(){
this.message="好好好"
},
info1(){
this.message="简写"
}
},
})
</script>
v-bind指令 属性绑定 例如 v-bind:stely="red" 绑定这个style的颜色,还有 v-bind:src="xxx" src也可以,简单明白上代码
<div id="app">
<!-- 这个是固定死的颜色值 -->
<h4 style="color:pink">再见</h4>
<!-- 这个根据seTColor变化 -->
<h4 :style="'color:'+setColor">再见</h4>
<!-- 这个绑定属性且还绑定事件来改变setColor颜色 -->
<h4 :style="'color:'+setColor" @click='gaiBian'>再见</h4>
</div>
<script src="../lib/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
setColor:'red'
},
methods: {
gaiBian(){
this.setColor='green'
}
},
})
</script>
说了辣么多,来个小demo来试试水。这个就是用绑定来实现的一个图片切换,类似小轮播图。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width= , initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>图片切换</title>
<style>
.title {
background-color: skyblue;
color: white;
}
img {
width: 200px;
height: 200px;
box-shadow: 0 0 20px hotpink;
}
</style>
</head>
<body>
<!-- 模板 -->
<div id="app">
<h2 class="title">图片切换</h2>
<img :src="imgList[index]" alt="" />
<br />
<input type="button" value="上一张" @click="pre" /> //这里的pre是一个方法
<input type="button" value="下一张" @click="next" /> //next也是方法
</div>
</body>
</html>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 编码 -->
<script>
/*
1.点击上一张 下一张 切换图片 切换下标
2.使用数组保存多张图片,增加一个下标 用来选择指定的图片
*/
var app = new Vue({
el: '#app',
data: {
// 图片数组
imgList: ['./img/1.png', './img/2.png', './img/3.png', './img/4.png'],
// 索引
index: 0
},
methods: {//这里定义了两个方法
pre() {
this.index--
if (this.index < 0) {
this.index = this.imgList.length - 1
}
},
next() {
this.index++
if (this.index > this.imgList.length - 1) {
this.index = 0
}
}
}
})
</script>
好了,今天就这样把。写的不好望大佬指出错误,感谢