Vue快速上手笔记1 - 使用初体验
本文通过一段简短的代码迅速体验vue中的一些入门功能，只要有前端基础的同学应该能很容易地看明白。如果有理解的内容，可以参考后续文章中的讲解或者查询官方文档。
<!DOCTYPE html> <html lang="zh-hs"> <head> <meta charset="UTF-8"> <title>半时实战vue入门码</title> <!-- 从CDN引入稳定生产版本，生产环境版本，优化了尺寸和速度 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script> --> <!-- 下载发开版到本地自行引入，也可以在官网找到开发版本的地址， 如https://cdn.jsdelivr.net/npm/vue/dist/vue.js --> <script src="vue.js"></script><!--注：我的html和该vue.js已经放在同一目录--> <!-- 引入在Vue中进行AJAX通信的库 --> <!-- <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script> --> <!-- 引入bootstrap在之后演示vue功能时可以用到 --> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> </head> <body> <center><h1>vue的使用</h1></center><hr> <div id="myVueDOM"> <p>姓：{{ lastName }} </p><!--[采用文本插值(Mustache插值语法使用)插入`数据成员data`中的数据]--> <p>名：{{ firstName }} </p><!--[方法同上，也是文本插值]--> <p>全名：{{ fullName }} </p><!--[采用`计算属性computed`来算出要插入的值]--> <p>欢迎辞：{{welcome()}} </p><!--[采用`方法成员methods`来算出要插入的值，这里的方法在此需要加`()`才可以执行]--> <div v-html="htmlAppend"></div><!--[采用html插值方法，即通过`v-html`指令插入data中的数据]--> <hr> <center> <div v-bind:style="myStyle">我是一个演示指令`v-bind`（语法糖为`:`）现实【属性绑定】的DIV，我被绑定的属性是style，我本来没有定义sytle，但你却可以看到我的style。</div><br> <hr> <div v-bind:class="myClass">我是一个演示指令`v-bind`（语法糖为`:`）现实【属性绑定】的DIV，我被绑定的属性是class，我用了bootstrap的类</div><br> <hr> <div v-on:click="myVon">我是一个演示指令`v-on`(语法糖为`@`,如`@click`、`@keyup`)进行事件绑定的div —— 你敢点老子试试！？</div><!--时间函数若不用传参可以不用`()`--><br> <hr> <div style="color: blue; font-size: larger;">以下需要在输入框输入内容时，在控制台查看结果：</div> 使用指定指令`v-on`进行事件绑定时也可以获取到事件对象本身，若不传参可以直接不写()，一旦写了()就必须手动传入时间对象：`($event)`，以下input为案例： <input v-on:keyup="myVon_event($event)"><br> <hr> <div style="color: blue; font-size: larger;">下拉演示`v-for`结果：</div> <select :class="selectClass" style="width: 600px; background-color: antiquewhite;"><!--这里绑定DOM属性class用的是语法糖写法--> <option selected disabled value="0">劳资是来给你们演示`v-for`指令的下拉框！</option> <option v-for="(item, index) in forOptinons">{{item.name}}是{{item.country}}人</option><!--`v-for`指令的两个参数都是位置参数，第一个位置表示该项的值，第二项表示该项的索引，也可以用其它标识符替换--> </select> <br><br> <div style="color: blue; font-size: larger;">点击按钮演示`v-if` 和 `监听器`（侦听器）:被侦听的变量为`changeColorToRed`</div> <div v-if="changeColorToRed==true" style="width: 600px; height: 30px; background-color: red;">我被改成红色的了，看到我的时候changeColorToRed值为true</div> <div v-else="changeColorToRed==false" style="width: 600px; height: 30px; background-color: black; color: rgb(255, 255, 255);">我本来是黑色的，看到我的时候changeColorToRed值为false</div> <button @click="changeColor()">点我修改变量changeColorToRed值为true</button><br><br> <div>如果你取消掉各生命周期函数中代码的注释，你可以查看到该Vue实例各个生命周期在控制台输出的内容</div><br><br><br><br> </center> </div> <script> let app = new Vue({ /* * 节点元素 * 这个是该Vue实例控制的DOM节点。 * 在该节点下的所有子DOM节点将都可以由该Vue对象进行管理 */ el: "#myVueDOM", /* * 数据成员们 * 在这里面可以定义若干个数据对象，就相当于该Vue对象的数据库。 * 这个“数据库”里面的数据也就将成为该Vue实例所拥有的属性，因而之后在该Vue实例中要用 * 它们只需要使用this.XXX即可，其中this指向的是该Vue实例。 */ data:{ firstName: 'Jack', lastName: 'Lee', htmlAppend: 'Jack Lee同学在使用html插值。', myStyle: { 'color':'red', 'font-size': '20', 'background-color': 'blue' }, // 注：myClass也可以直接给出字符串，即：myClass: 'alert alert-primary'，但不推荐这样做，这就不能有效管理 myClass: { // 绑定属性时（这里是绑定类名），只有键值对中值为true的键的字符串才会被添加到属性值中 'alert': true, 'alert-primary': false, 'alert-secondary': false, 'alert-success': true, 'alert-danger': false, 'alert-warning': false, 'alert-info': false, 'alert-light': false, 'alert-dark': false, }, selectClass: { 'form-control': true, 'form-control-lg': true, }, forOptinons: [ { name: 'O巴马', country: '美国' }, { name: 'AB晋三', country: '日本' }, { name: 'CY文', country: 'It seems not' }, ], changeColorToRed: false }, /* * 方法成员们 * 在这里面可以写一些方法对象，就相当于该Vue对象的方法库。 * 这个方法库里面的方法自然是等待着邦定到某个特定的事件下进行触发调用的 */ methods:{ welcome: function(){ return "欢迎你：" + this.firstName + this.lastName; }, myVon: function(){ alert('点了就点了呗，滚！') }, myVon_event: function(event){ console.log(event.key, event) }, changeColor: function(){ this.changeColorToRed = true } }, /* * 侦听器 - 用于响应数据的变化 * 当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。 * 监听器对列出的数据成员进行监听，当某个被监听数据成员发生变化时其对应的方法将被执行 */ watch:{ // 如果 `firstName` 或`lastName`发生改变，它们对应的方法就会被执行 // firstName: function (val) { // this.fullName = val + ' ' + this.lastName // }, // lastName: function (val) { // this.fullName = this.firstName + ' ' + val // } changeColorToRed: function(){ alert('我是监听器`wach派来的，我监听到了变量changeColorToRed值发生了变化`') } }, /* * 计算属性 * 模板内仅仅写简单表达式，如果某些值需要复杂的运算时，推荐在计算属性computed中实现 * 计算属性中定义的方法返回的是一个值，他在使用的时候与methons中的方法不同，它不用写 * 表示方法或函数调用的括号。 */ computed:{ fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } } }, /* * 生命周期函数 */ // 实例初始化之后，数据观测和数据绑定之前被调用 beforeCreated: function(){ // console.log('实例初始化了'); }, //实例初始化完成，但尚未挂载时 created: function(){ //console.log('实例尚未挂载到DOM节点'); }, // 挂载之前，render函数首次被调用时 beforeMont: function(){ //console.log('render函数首次被调用'); }, // 实例挂载到DOM节点上之后 monted: function(){ //console.log('实例挂载到DOM节点'); }, // 数据更新时，虚拟DOM状态变量化之前 beforeUpdates: function(){ //console.log('数据将更新，虚拟DOM尚未状态变量化'); }, // 虚拟DOM重新渲染之后 update: function(){ //console.log('虚拟DOM重新渲染了'); }, // 实例销毁前，此时实例仍然可用 beforeDestroy(){ //console.log('实例将销毁，此时实例仍可用') }, // 实例销毁后，此时Vue实例及其子实例完全解绑 destroy(){ //console.log('实例已经销毁') } }); </script> </body> </html>
大家不妨自己在浏览器中打开尝试以下。
以下是浏览器中的样子：
