Vue学习——简介、插值表达式、指令
简介
- 前端框架
- 三大主流框架:React,Vue,Angular
- 简介:Vue.js是前端的主流框架之一,它是一套构建用户界面的框架,
只关注视图层,
,它容易上手并且便于与第三方库和其他项目整合,官方介绍:Vue.js是一套构建用户界面的渐进式框架。其目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组 - 优点:
- 减少不必要的DOM操作,增加对业务逻辑的关注
- 提高渲染效率
- 双向数据绑定(通过框架提供的指令,只需要关心数据的业务逻辑,不再关心DOM的渲染过程)
- 框架和库的区别
- 框架:是一套完整的解决方案:对项目侵入性比较大项目如果需要更换框架,就需要重新架构整个项目
- 库:提供某一个小功能,某些库无法完成的可以切换到其他库
- MVC和 MVVM(三部分,model view view model)
第二个图可以看到MVVM 相比于MVC提供了数据的双向绑定机制
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue/dist/vue.js">//引入vue</script>
</head>
<body>
<div id="app">
<!--创建一个容器将来使用vue就可以控制该容器中的所有DOM元素-->
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',//指定当前要创建的vm实例,要控制页面上哪个区域(app) element
data: {
message: '开心'//data是一个对象表示我们要渲染的一些数据,不用操作dom
}
})
</script>
</body>
</html>
例子解析:例子中的data就是M(也就是视图数据层),el属性制定的元素就是V,new Vue()实例就是MVVM中的核心——VM(提供数据双向绑定的能力)
Vue的指令:(以v-开头)
- 插值表达式和指令
- 插值表达式:{{}},在插值表达式中可以写一些简单的判断
- 使用插值表达式存在内容闪烁问题,而v-text没有,体验感可以比较(不过可以用v-cloak解决)
- 插值表达式只会插入内容,不会清楚其余内容,----{{msg}}----,用插件表达式----继续保留
- 指令:
- 使用 v-html 指令用于输出 html 代码
- HTML 属性中的值应使用 v-bind 指令
- 插值表达式:{{}},在插值表达式中可以写一些简单的判断
<style>
.class1{
background: black;
color: #fff;
}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="app">
<label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
<br><br>
<div v-bind:class="{'class1': use}">
</div>
</div>
<script>
new Vue({
el: '#app',
data:{
use: true
}
});
</script>
</body>
- v-on 指令,用于监听 DOM 事件(参数是监听的事件名)
<a v-on:click="doSomething">
- 使用 v-model 实现双向数据绑定(在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素的值)
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
el: '#app',
data: {
message: '开心'
}
})
</script>
</body>
</html>
- v-if/v-else/v-else-if条件判断
<body>
<div id="app">
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
type: 'C'
}
})
</script>
</body>
- v-for循环(以 site in sites 形式的特殊语法, sites 是源数据数组, site 是数组元素迭代的别名)
- 可以绑定数据到数组来渲染一个列表
<body>
<div id="app">
<ol>
<li v-for="site in sites">
{{ site.name }}
</li>
</ol>
</div>
<script>
new Vue({
el: '#app',
data: {
sites: [
{ name: '苹果' },
{ name: '西瓜' },
{ name: '梨' }
]
}
})
</script>
</body>
- 用于迭代整数
<body>
<div id="app">
<ul>
<li v-for="n in 10">
{{ n }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app'
})
</script>
</body>