最近在学习前端框架 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
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于