Vue基础-Day 01
1.什么是Vue.js
-
Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
-
Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并称为前端三大主流框架！
2.框架和库的区别
-
框架是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。
例如：Node中的express -
库（插件）提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。
例如：从Jquery切换到Zepto
例如：从EJS切换到art-template
3.为什么学习流行框架
-
为了提高开发效率：在企业开发中，效率就是金钱；使用框架，能够提高开发的效率；
-
双向数据绑定的概念能够帮助我们减少不必要的DOM操作，提高渲染效率；通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了
-
使用框架有利有弊（比如兼容IE最多到 IE9），但相对来说市场需求比原生大，易于找工作，提高工资。
4.MVC与MVVM的区别
-
MVC（Model模型—View视图—Controller控制器）是前后端未分离时的分层开发概念。
View视图层是用户能够看到并进行交互的客户端界面，如桌面应用的图形界面、浏览器端渲染的网页等；
Model数据操作层，用于计算、校验、处理和提供数据，但不直接与用户产生交互；
Controller业务逻辑层则负责收集用户输入的数据，向相关模型请求数据并返回相应的视图来完成交互请求。
-
MVVM（Model模型—View视图—ViewModel视图模型或称为调度者）是前后端分离后的前端分层开发概念。
前端中的所有页面都统称为MVC中的View视图层。
其最重要的特性是双向数据绑定，此外还包括依赖注入，路由配置，数据模板等一些特性。
前后端分离的原因是随着技术的发展，市场与行业对前端的要求越来越高。未分离时代的前端理念类似于
“能用就行”…
MVVM中的 M也是数据操作层，即处理页面中需要渲染的数据的部分，这个M和MVC中的M有本质区别，MVC中的Model层是真正的服务的数据库，MVVM中的Model层的数据都是从服务端请求回来的。
MVVM中的 V也是View视图层，即用户能够看到并进行交互的客户端界面。
MVVM中的 VM是MVVM中的核心概念，是一个调度者，它实现了双向数据绑定，可以把Model数据操作层的数据渲染到View视图层，同时View视图层的数据发生改变也可以自动同步到Model层中，VM解放了前端程序员的双手，前端程序员不用再进行不必要的DOM操作了，只需关心前端的业务逻辑即可。
5.Vue的代码结构
- 引入vue.js
<script src="./vue-2.4.0.js"></script>
- 写视图层，我们要展示的内容
<div id="box">
<button @click="start" :disabled="flag">啊动</button>
<button @click="stop" :disabled="!flag">啊停</button>
<h4 id="text">{{msg}}</h4>
</div>
- 实例化Vue()
let vo = new Vue({
//可操作区域
el:"#box",
//视图层需要用的数据
data:{},
//可以用vue语法调用的方法，写方法时要注意this指向问题
methods:{}
})
6.Vue的基础语法
插值表达式 {{}}
- 数据绑定最常见的形式就是使用 “Mustache” 语法 (双大括号) 的文本插值
<span> Message: {{msg}} </span>
Mustache 标签将会被替代为对应数据对象上 msg property 的值。无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。
通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：
<span v-once> 这个将不会改变: {{msg}} </span>
v-cloak
v-cloak 用来防止页面闪烁；
<style>
[v-cloak] {
display: none;
}
</style>
<div v-cloak>{{msg}}</div>
页面闪烁举例：
在HTML结构中使用了插值表达式 {{}} 后，如果引入的是线上的 vue.js ，那么当网络不好时，插值表达式不会被对应的数据对象上的属性值代替，而是会直接以文本形式显示
如上代码：{{msg}}
当引入完成后，会再次被对应数据对象上的属性值代替，造成页面闪烁
随着网速越来越快，一般也不会出现这个问题了。
v-text
v-text 可以将对应数据对象上的属性值以文本的形式展示，但是不可以解析富文本（即不会识别HTML标签），类似于.text()方法。
v-html
v-html 可以解析富文本，如果对应数据对象上的属性值中有完整的HTML标签形式，则会在当前HTML结构中添加，类似于.html()方法。
他们两个的异同：
v-text 和 v-html 都会覆盖原来的内容，但是 v-text 不能解析富文本，而 v-html 可以
v-bind
v-bind 用来将 HTML标签 中的属性进行数据绑定，其属性值为对应的数据对象上的属性值，如果数据对象的属性值发生改变，标签中的属性值也会发生改变。
如果后面跟的还是字符串，就不会和数据对象里的属性值产生联系了，如下代码：
v-bind 的缩写为:
<div>
<a v-bind:href="baidu" :alt="'baidu'" :title="bindVal()">百度</a>
</div>
<!-- vm对象下的方法 -->
methods: {
bindVal() {
return "函数返回值"
}
v-on
v-on 用来监听HTML标签绑定的事件，事件的处理方法写在vue对象的methods属性里。
methods 里的方法可以操作 data 中的属性和 全局变量，写方法时要注意this的指向问题。
如果方法体比较简单，可以直接在标签里内联书写，并且用到的变量不需要加this
v-on 的缩写为@
<!-- v-on 简写@ 绑定事件 -->
<button v-on:click="log1">打印1</button>
<button @click="log2">打印2</button>
<button @click="name='张三'">打印2</button>
事件修饰符
.stop阻止冒泡， 给父级阻止冒泡没有用，因为外面没父级了
<ul @click.stop="logUl">
<li @click.stop="logLiFir">AAAA</li>
<li @click="logLiSec">BBBB</li>
</ul>
.capture开启捕获模式
<ul @click.capture="logUl">
<li @click.capture="logLiFir">捕获AAAA</li>
<li @click.stop="logLiSec">阻止冒泡了还是能打印出ul，因为捕获的时候从外到内</li>
</ul>
.prevent阻止默认事件
<form action="">
<button type="submit" @click.prevent="">提交按钮，取消默认事件，不会刷新咯</button>
</form>
.self冒泡和捕获都不会触发，只有触发元素本身才触发
<ul @click.self="logUl">
只有点了ul本身才会打印ul
<li @click.stop="logLiFir">阻止冒泡AAAA</li>
<li @click.stop="logLiSec">阻止冒泡BBBB</li>
</ul>
.once令事件只触发一次
<button @click.once="log1">打印一次1后失效</button>
- 事件修饰符可以连用，即链式书写，但
.once和.prevent连用会引发一个问题：
<!-- .once 和 .prevent 连用的问题 -->
<form action="">
<button type="submit" @click.prevent.once="log1">打印一次失效后，再按就会刷新页面，然后又可以打印并刷新页面</button>
</form>
v-model数据双向绑定
数据双向绑定：即操作数据对象上的属性时，HTML中也会同步渲染，在HTML中改变其属性值时，数据对象上的属性值也会同步发生变化。
而在HTML中能够改变已渲染数据的，通常只有input输入框，故我们一般在input标签中使用v-model。
下面是一个四则运算的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>双向绑定，四则运算</title>
<script src="./vue-2.4.0.js"></script>
<script src="./jQuery.min.js"></script>
</head>
<body>
<div id="box">
<input type="number" v-model:value="value1">
<select name="" id="" v-model:value="choose">
<option selected>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="number" v-model:value="value2">
<button @click="equal">=</button>
<input type="text" v-model:value="value3">
</div>
</body>
<script>
let vo = new Vue({
el: "#box",
data: {
value1: 0,
value2: 0,
value3: 0,
choose: '+'
},
methods: {
equal() {
switch (this.choose) {
case '+':
this.value3 = Number(this.value1) + Number(this.value2)
break;
case '-':
this.value3 = Number(this.value1) - Number(this.value2)
break;
case '*':
this.value3 = Number(this.value1) * Number(this.value2)
break;
case '/':
this.value3 = Number(this.value1) / Number(this.value2)
break;
default:
break;
}
}
}
})
</script>
</html>
vue操作样式
一、使用class类名操作样式：
1.数组
2.三目表达式
3.数组内置对象（对象的键是样式的名字，值是Boolean类型）
4.直接通过对象
5.字符串
二、使用内联样式
1.直接在元素上通过 :style 的形式，书写样式对象
2.将样式对象定义到 data 中，并直接引用到 :style 中
3.在 :style 中通过数组，引用多个 data 上的样式对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue操作样式</title>
<script src="./vue-2.4.0.js"></script>
</head>
<style>
.csgo {
color: rgb(255 171 15);
font-size: 33px;
}
.normal {
color: rgb(161, 157, 157);
font-size: 20px;
}
.rain {
color: rgb(10, 119, 213);
}
.bigFontSize {
font-size: 50px;
}
</style>
<body>
<div id="vueBox">
<p :class="normal">传说巨龙，金色品质，五十金一个</p>
<p :class="csgo">csgogoogogogogo</p>
<p :class="styleArr">雨一直下下下下下下下</p>
<p :class="flag?csgo:styleArr" @click="changeFlag">我使用了三目运算符，可以点击我</p>
<p :class="[csgo,styleArr]">我使用了数组设置样式</p>
<p :class="[csgo,{bigFontSize:flag}]">数组内置对象设置样式，对象的键是样式，值是布尔类型，表明是否显示该样式</p>
<p :class="{rain:true,bigFontSize:false}">直接使用对象设置样式，键为样式，值为布尔</p>
<h1>---------使用内联样式---------</h1>
<p :style="{'font-size':'30px'}">直接书写，还得加引号，多此一举</p>
<p :style="innerStyle">data里定义一个对象,对象里直接设置样式,像.css()方法</p>
<p :style="[innerStyle,innerStyle2,innerStyle3]">data里定义多个对象,对象里直接设置样式,元素中写一个数组，直接拿到全部对象样式,后面的覆盖前面的</p>
<p :style="setStyle()">用函数的返回值设置样式</p>
</div>
</body>
<script>
let vo = new Vue({
el: "#vueBox",
data: {
flag: true,
csgo: "csgo",
normal: "normal",
bigFontSize: "bigFontSize",
styleArr: ["rain", "bigFontSize"],
innerStyle: {
color: 'red',
fontSize: "25px"
},
innerStyle2: {
color: 'blue',
fontSize: "25px"
},
innerStyle3: {
color: 'hotPink',
fontSize: "30px"
},
},
methods: {
changeFlag() {
this.flag = !this.flag
},
setStyle() {
return { color: "green", fontSize: "25px" }
}
}
})
</script>
</html>
v-for 和 key属性
a)遍历数组，参数(item,index) in list
b)遍历对象，参数(value,key,index) in list
c)遍历数字，num in 10 (1~10)
d)key在使用v-for的时候都需要去设置key
1.让界面元素和数组里的每个记录进行绑定
2.key只能是字符串或者数字
3.key必须是唯一的
key起到提高重排效率的作用，在2.2.0+ 的版本里，当在组件中使用 v-for 时，key 是必须的。
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，
Vue将不是移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。
v-if 和 v-show
a)区别：
i.v-if 删除dom元素
ii.v-show 给元素设置 display:none
b)应用场景：
i. v-if 只修改一次的时候可以使用v-if，比如登录时
ii. v-show 元素显示与隐藏频繁切换的时候可以使用v-show
iii. v-if 有它的好兄弟可以配合使用，即 v-else、v-else-if，而v-show没有
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>V-for和key属性和v-if、v-show</title>
<script src="./vue-2.4.0.js"></script>
</head>
<body>
<ul id="box">
<!-- v-for循环 -->
<li v-for="(item,index) in list">下标：{{index}}；值：{{item}}</li>
<li v-for="(val,key,index) in obj">书写的顺序：{{index}}，值为：{{val}}，键为：{{key}}</li>
<li v-for="num in 9">重复九次，第{{num}}次</li>
<!-- key属性，属性值必须是字符串或数字，属性值唯一 低版本不写可能不报错，高版本不行，必须写 -->
<li v-for="(item,key,index) in keyObj" :key="index">{{item}}</li>
<!-- v-for循环嵌套 -->
<div v-for="(item,key,index) in keyObj">
------{{index}}-----
<li v-for="(item,key,index) in keyObj">
{{item}}
</li>
</div>
<button @click="hide">点击显示/隐藏元素</button>
<p v-if="flag">v-if直接删除，并加了个注释</p>
<p v-if="flag">v-if直接删除，并加了个注释</p>
<p v-show="flag">v-show只是隐藏，display:none</p>
<p v-show="flag">v-show只是隐藏，display:none</p>
</ul>
</body>
<script>
let vo = new Vue({
el: "#box",
data: {
list: [1, 2, 3, 4, 5, 6, 7, 8, 9],
obj: { age: 18, name: "张三" },
keyObj: {
name1: "张三",
name2: "李四",
name3: "王五",
name4: "赵六",
name5: "柳七",
},
flag: true
},
methods: {
hide() {
this.flag = !this.flag
}
}
})
</script>
</html>
1542
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
