最近在学习前端框架 Vue，会陆续写一些 Vue 的学习记录。
这篇文章主要写一些 Vue 的基本指令。
参考： Vue 官方文档 https://cn.vuejs.org/v2/guide/
1. 前端分层开发—MVVM
MVVM 是前端视图层的分层开发思想，主要把每个页面分成了 M、V 和 VM，下图介绍了这三者之间的关系：
其中，VM 是 M 和 V 之间的调度者，提供了数据的双向绑定。
2. 创建一个 Vue 实例
在页面中首先导入本地的 vue.js，也可以使用 https://www.bootcdn.cn/all/ 提供的 CDN 加速服务，直接写
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<html> <head> <meta charset="utf-8" /> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> </head> <body> <div id="app"> <!--使用插值表达式把vue实例中的数据显示出来--> {{msg}} </div> <script> //创建一个Vue的实例 var vm = new Vue({ el: '#app', //el:表示控制的页面区域 data: { //data属性: 存放数据 msg: '欢迎学习Vue' //通过Vue能够把数据直接渲染到页面上 } }) </script> </body> </html>
运行后的页面如下：
3. v-text 和 v-html 的基本使用
<html> <head> <meta charset="utf-8" /> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> </head> <body> <div id="app"> <!-- 对比之下 插值表达式作为一个占位符 不会清空元素内容，但是v-text、v-html会清空元素内容 --> <p>我是原本的数据 {{msg}}</p> <!-- v-text: 相当于插入一个纯文本 --> <P v-text="msg2">我是原本的数据</P> <!-- v-html: html内容会被解析出来 --> <p v-html="msg2">我是原本的数据</p> </div> <script> //创建一个Vue的实例 var vm = new Vue({ el: '#app', //el:表示控制的页面区域 data: { //data属性: 存放数据 msg: '欢迎学习Vue', //通过Vue能够把数据直接渲染到页面上 msg2: '<h1>我是msg2</h2>' } }) </script> </body> </html>
运行后的页面如下：
4. v-bind 指令的使用
<html> <head> <meta charset="utf-8" /> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> </head> <body> <div id="app"> <!-- v-bind: 用于为元素绑定实例中的属性 也可以被简写为 : --> <input type="text" v-bind:value="msg"> <br/><br/> <input type="text" :value="msg"> <br/><br/> <!-- 注意: v-bind中的值 可以是一个合法的JS表达式 --> <input type="text" :value="msg + ',我是被添加的QAQ'"> </div> <script> //创建一个Vue的实例 var vm = new Vue({ el: '#app', //el:表示控制的页面区域 data: { //data属性: 存放数据 msg: '欢迎学习Vue', //通过Vue能够把数据直接渲染到页面上 } }) </script> </body> </html>
运行后的页面如下：
5. v-on 指令的使用
<html> <head> <meta charset="utf-8" /> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> </head> <body> <div id="app"> <input type="text" v-bind:value="msg"> <br/><br/> <!-- v-on: 用于事件绑定, 可以简写为 @ --> <input type="button" v-on:click="show1" value="我已经被 v-on: 绑定"> <br/><br/> <input type="button" @click="show2" value="我已经被 @ 绑定"> </div> <script> //创建一个Vue的实例 var vm = new Vue({ el: '#app', //el:表示控制的页面区域 data: { //data属性: 存放数据 msg: '欢迎学习Vue', //通过Vue能够把数据直接渲染到页面上 }, methods: { show1() { this.msg = 'v-bind:我已经被点击后更换了文字' }, show2() { this.msg = '@我已经被点击后更换了文字' } } }) </script> </body> </html>
运行后的页面如下：
点击第一个按钮：
点击第二个按钮：
6. 事件修饰符
事件修饰符可以使用在事件绑定后面，例如 @click.stop 可以阻止冒泡
.stop阻止冒泡 (冒泡: 从里到外执行).prevent阻止默认事件.capture添加事件监听器时使用事件捕获模式 (从外到里执行).self只当事件在该元素本身触发时触发回调.once事件只触发一次
7. v-mode 指令的使用
<html> <head> <meta charset="utf-8" /> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> </head> <body> <div id="app"> <p>{{msg}}</p> <!-- v-model: 可以实现 表单元素 和 实例中的数据 双向绑定 --> <!-- 注意： v-model只能运用在 表单元素 中--> <input type="text" v-model="msg" style="width: 50%;"> </div> <script> //创建一个Vue的实例 var vm = new Vue({ el: '#app', data: { msg: '欢迎学习Vue' }, methods: { } }) </script> </body> </html>
运行后的页面如下：
修改输入框中的值导致 vm 中的 msg 这个数据被修改，所以显示在上面的值也会随之更改。
8. 通过属性绑定设置 class 类
<html> <head> <meta charset="utf-8" /> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> <style> .red { color: red; } .italic { font-style: italic; } </style> </head> <body> <div id="app"> <!-- 1.直接使用数组 --> <p :class="['red', 'italic']">{{msg}}</p> <!-- 2.数组中可以使用三元表达式 --> <p :class="[flag?'red':'', 'italic']">{{msg}}</p> <!-- 3.数组中可以嵌套对象--> <p :class="['red', {'italic': flag}]">{{msg}}</p> <!-- 4.直接使用对象--> <p :class="classObj">{{msg}}</p> </div> <script> //创建一个Vue的实例 var vm = new Vue({ el: '#app', data: { msg: '欢迎学习Vue', flag: false, classObj: {red:true, italic:true} }, methods: { } }) </script> </body> </html>
运行后的页面如下：
9. 通过属性绑定设置 style 样式
<html> <head> <meta charset="utf-8" /> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> </head> <body> <div id="app"> <!-- 1.直接使用对象--> <p :style="styleObj">{{msg}}</p> <!-- 2.引用多个对象 --> <p :style="[styleObj, styleObj2]">{{msg}}</p> </div> <script> //创建一个Vue的实例 var vm = new Vue({ el: '#app', data: { msg: '欢迎学习Vue', styleObj: {color:'red', 'font-style':'italic'}, styleObj2: {'text-decoration': 'underline'} }, methods: { } }) </script> </body> </html>
运行后的页面如下：
10. v-for 指令的使用
<html> <head> <meta charset="utf-8" /> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> </head> <body> <div id="app"> v-for循环普通数组： <p v-for="(item,i) in arr">---索引:{{i}}---值:{{item}} </p> <hr/> v-for循环对象数组: <p v-for="(user,i) in list">---索引:{{i}}---姓名:{{user.name}}---描述:{{user.des}}</p> <hr/> v-for循环对象: <p v-for="(val, key, i) in user">---索引:{{i}}---键:{{key}}---值:{{val}}</p> <hr/> v-for循环数字： <br/> 注意:迭代数字的值是从1开始的，而索引是从0开始的，这个要区分开来 <p v-for="count in 3">循环的第{{count}}次</p> </div> <script> //创建一个Vue的实例 var vm = new Vue({ el: '#app', data: { arr: [1,2,3], list: [ {name: 'name1', des: 'des1'}, {name: 'name2', des: 'des2'}, {name: 'name3', des: 'des3'} ], user: {name: 'honeybee', des: 'bloger'}, }, methods: { } }) </script> </body> </html>
运行后的页面如下：
注意：在组件中使用 v-for 循环的时候，必须指定唯一的 字符串/数字 类型的 ;key 值
11. v-if 和 v-show 的使用
<html> <head> <meta charset="utf-8" /> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> </head> <body> <div id="app"> <!--v-if: 每次都会删除或者创建元素 --> <p v-if="flag">用 v-if 控制的元素</p> <!--v-show： 每次只是切换了元素的 display:none的样式--> <p v-show="flag">用 v-show 控制的元素</p> </div> <script> //创建一个Vue的实例 var vm = new Vue({ el: '#app', data: { flag: true }, methods: { } }) </script> </body> </html>
运行后的页面如下：
当 flag 的值为 false 的时候，元素会被隐藏起来。
版权声明：本文为原创文章，转载请注明出处: http://www.honeybee.top/articles/2018/09/26/1537931405445.html
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于