vue是一个渐进式框架，让前端开发人员从dom操作解放出来，变为操纵数据即可，然后dom的操作Vue内部帮我们实现了，用了Vue之后不建议再去人为的操作dom。那下面说说Vue的一些基本指令
首先学习第一个 v-text指令：这个是用来渲染文本的，可以简写：{{ message}} 切记!!!{{message}}要写在id为app的div中
<div id="app"> {{message}} </div> //这里我导入的是本地Vue.js <script src="../lib/vue.js"></script> //这里的Vue是网络的Vue.js <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>
好了，今天就这样把。写的不好望大佬指出错误，感谢！！再补一个Vue官网地址，https://cn.vuejs.org/v2/guide/