第一章遇见vue.js
一.MVX模式
1.MVC:Model(模型),Controller(控制器),View(视图)。
View一般都是通过Controller来和Model进行联系。
Controller是Model和View的协调者,View和Model不直接联系。
基本联系都是单向的。
用户通过Controller来操作Model以达到View的变化。
2.MVP(代表Riot.js)
MVP是从MVC模式演变而来,Controller/Presenter负责逻辑的处理,Model提供数据,View负责显示
二.vue是什么?
1.定义:vue.js不是框架+只是聚焦视图层,是一个构建数据驱动的web界面的库。vue通过简单的api提供高效的数据绑定和灵活的组件系统。
2.vue特性
①轻量
②数据绑定
③指令
④插件化(vue核心库不包含Router、ajax、表单验证等功能,但可以方便加载对应的插件)
3.与AngularJS的区别
相同点:
- 都支持指令(内置指令、自定义指令)。
- 都支持过滤器(内置过滤器和自定义过滤器)
- 都支持双向绑定
- 都不支持低端浏览器
不同点:
- AngularJS的学习成本高,而vue本身提供api都是比较简单、直观。
- 性能上,AngularJS依赖对数据做脏检查,所以watcher越多越慢。vue使用基于依赖追踪的观察并且使用异步队列更新,所有数据都是独立触发。对于庞大的应用来说这个优化差异还是比较明显。
4.与react的区别:
相同点:
- 都需要编译后使用
- 中心思想相同:一切都是组件,组件实例之间可以嵌套。
- 都提供合理的钩子函数,让开发者定制化的处理需求
- 都不内置类似ajax、router等功能到核心包,而是以其他方式(插件)加载
- 在组件开发中都支持mixins的特性
不同点
- react依赖virtual DOM,vue使用的是DOM模板
- vue在模板中提供指令、过滤器,方便操作DOM
5.如何使用vue
①安装:1-1 script: 通过script加载CDN<script src="https://cdn.jsdelivr.net/npm/vue"></script>
1-2 npm:基于npm管理依赖,使用npm来安装vue,执行指令$ npm i vue --save-dev
1-3 bower:基于bower管理,安装vue,执行命令$ bower i vue --save-dev
6.第一个HelloWorld程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="box">
<ul>
<li v-for="tab in tabs">{
{tab.text}}</li>
</ul>
</div>
<script>
new Vue({
el:'#box',
data:{
tabs:[{
text:'巴士'},
{
text:'快车'},
{
text:'专车'},
{
text:'代驾'},
{
text:'顺风车'},
{
text:'出租车'},
{
text:'汽车'}]
}
})
</script>
</body>
</html>
第二章
数据绑定是将数据和视图相关联,当数据变化时刻自动更新视图。
一.语法
1.插值
基本形式{
{}}
<span>Text:{
{text}}</span>
text改变,文本中的值也会联动变化。有时候只需渲染一次,后续数据变化不关心的时候可以通过*
实现,写法:{
{*text}}
大括号标签会把里面的值全部当做字符串来处理,如果值是HTML片段,则可以使用三个大括号绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue解析带html标签的字符串为dom</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
.red{
font-weight: bold;
font-size: 1.2rem;
color: #fff;
background-color: #e94826;
}
</style>
</head>
<body>
<div id="box">
<p v-html="name"></p>
<p>{
{logo}}</p>
</div>
<script>
new Vue({
el:'#box',
data() {
return{
logo:'<span class="red">HelloWorld</span>',
name: '<span class="red">前一部分<br/>后一部分</span>'
}
}
})
</script>
</body>
</html>
vue提供一系列文本渲染方式,vue指令和自身特性内是不可以插值的,用错会报错!
2.表达式
表达式是各种数值、变量、运算符的综合体。简答的表达式可以是常量或变量名称。表达式的值是其运算结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表达式</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="box">
<p>{
{cents/10}}</p>
<p>{
{true?1:0}}</p>
<!--切分-->
<p>{
{example.split("")}}</p>
<!--原过滤器写法,注意在vue2.0中已经去除内置过滤器写法-->
<!--过滤器:小写变大写-->
<p>{
{example | toUpperCase}}</p>
<!--过滤器:首字母大写-->
<p>{
{example | capitalize}}</p>
<!--现在 小写变大写的写法-->
<p>{
{example.toUpperCase()}}</p>
</div>
<script>
new Vue({
el:'#box',
data:{
cents:90,
true:'ddd',
example:'apple'
}
})
</script>
</body>
</html>
3.指令
指令的作用是当表达式的值发生变化时,将这个变化也反映到DOM上
v-if
中的内容为true
则显示,false
则隐藏- 在指令和表达式之间插入一个参数,用
冒号
分隔,如v-bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>指令</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="box">
<!--v-if中的内容为true则显示,false则隐藏-->
<p v-if="beautiful">beautiful girl</p>
<p v-if="ugly">ugly girl</p>
<!--在指令和表达式之间插入一个参数,用冒号分隔,如v-bind-->
<a v-bind:href="url">点击百度一下!</a>
</div>
<script>
new Vue({
el:'#box',
data:{
beautiful:true,
ugly:false,
url:'https://www.baidu.com/'
}
})
</script>
</body>
</html>
二.分隔符
1.vue数据绑定的语法被设计为可配置的,可以修改
Vue.config.delimiters = {
"<%","%>"}
文本插值的语法由{
{
example}}变更为 <$example$>