## Vue的了解:
是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。(核心是数据)
vue 特点
Ø 数据驱动,数据(模型层)、视图层和模型层分离 m v c(model view controller)
Ø 双向数据绑定:MVVM (viewmodel) model view (viewmodel)
Ø SPA(Single Page Application)单页面应用 (所有页面都是同一路径,唯一变化就是锚点,不利于seo)
Ø 组件化、模块化 - (代码封装 复用 有利于后期代码维护) export import
Ø 国人开发 文档通俗 学习成本低
前端渲染 (拿到数据自己组装) vs 后台渲染(直接返回需要的数据) 降低服务器负担、带宽压力小 SEO、兼容性好、安全性高(后台数据不可见) 用户体验好
》
SPA 单页应用的优缺点
一次性请求所有的 html js css资源 跳转时候不再请求资源
优点
1 页面之间切换 跳转迅速
2 资源只请求一次 减少对于服务器的压力 (10w)
缺点
1 第一次加载慢 (懒加载,压缩,elemetui )
2 url不会发生变化 不太利于seo搜索引擎的收录 seo 为了百度,谷歌,收录排名。
directives
自定义属性 带有v-前缀,用于给HTML元素添加特殊的行为,Directives可以动态地绑定数据到HTML元素,控制DOM元素的显示和隐藏,监听事件等。Vue提供了一些内置指令,比如v-if、v-show、v-for、v-bind、v-on等,我们也可以自定义指令来实现特定的功能。
vue语法
所有指令后面跟的都是变量
<script>
new Vue({
el: "该盒子的id名",
data() {
return {
btn: 1,
};
},
});
</script>
v-model:双向绑定 例:
在Vue中,当我们需要双向绑定表单元素的值到组件的数据属性时,通常需要使用v-model指令。具体来说,如果我们需要实现以下功能之一,就需要使用v-model:
1将表单输入元素(如input、textarea、select等)的值与组件内部的数据属性进行双向绑定。
2处理复选框和单选框的值,并将值与组件内部的数据属性进行双向绑定。
3例如,如果我们需要在一个表单中输入用户的姓名和年龄,并将这些数据保存到组件的data对象中,可以通过v-model指令来实现:
v-model=“ ”
<div id="app">
<img v-bind:src="imgarr" alt=""><br>
<input type="text" v-model="num">+
<input type="text" v-model="num1">={
{parseInt(num)+parseInt(num1)}}
<div v-html="app2">
</div>
js代码
<script>
new Vue({
el: '#app',
data: {
num:1,
num1:2,
imgarr:"田1.jpg",
app2:'<h1>qwertyuio</h1>',
}
})
</script>
v-bind:
可以用于任何属性,有两个属性有另外的写法class、style
绑定标签中的所有属性
class 把这个类名变为动态 静态时 也不需要
动态情况下:其中一方改变 另一方也改变
将数据项绑定到属性上,例:img的src属性、a标签的href属性
,样式相关的属性绑定 class 属性,(v-bind:可以省略用 :代替)
:class属性值(v-bind) 表达式 对象 都可
当我们需要实现以下功能之一时,就需要使用v-bind指令:
1将组件的属性与父组件的数据属性进行双向绑定。
2在组件内部通过计算属性或方法实时更新属性的值,并将其反映到模板中。
css代码
<style>
.sss2{
color: #fff;
font-size: 20px;
font-weight: bold;
width: 20px;
height: 50px;
background-color: rgb(201, 0, 0);
}
.sss4{
color: rgb(255, 4, 4);
font-size: 20px;
}
</style>
(部分代码)
<ul id="uuu">
<li><span v-bind:class="sss1">{
{sss2}}</span><br><br><br><span v-bind:class="sss5">{
{sss6}}</span><br><br> <br><span v-bind:class="sss3">{
{sss4}}</span><img v-bind:src="imgarr1" class="tu" alt=""><br></li>
<li><span v-bind:class="sss11">{
{sss12}}</span>灵境行者 <span v-bind:class="sss13">{
{sss14}}</span></li>
<li><span v-bind:class="sss21">{
{sss22}}</span>宿命之环 <span v-bind:class="sss13">{
{sss14}}</span></li>
<li><span v-bind:class="sss31">{
{sss32}}</span>道诡异仙 <span v-bind:class="sss13">{
{sss14}}</span></li>
<li><span v-bind:class="sss41">{
{sss42}}</span>诡秘之主 <span v-bind:class="sss13">{
{sss14}}</span></li>
</ul>
js代码
<script>
new Vue({
el: '#uuu',
data: {
sss2:'NO.1',
sss1:'sss2',
sss4:'销量冠军',
sss3:'sss4',
sss6:"深空彼岸",
sss5:'sss6',
sss12:'2',
sss11:'sss12',
sss14:'--',
sss13:'sss14',
sss22:'3',
sss21:'sss22',
sss32:'4',
sss31:'sss32',
sss42:'5',
sss41:'sss42',
imgarr1:"1.png",
}
})
</script>
v-bind和v-model
区别:
v-bind指令用于将组件的属性与表达式进行绑定,实现动态更新。通常情况下,我们使用v-bind来绑定HTML元素的属性值,比如class、style、src等。例如,我们可以使用v-bind:class来动态地控制元素的样式
v-model指令用于在表单元素(如input、textarea、select等)与组件内部的数据属性之间创建双向数据绑定。当我们需要处理表单输入或选择等交互行为时,通常需要使用v-model指令。例如,在下面的代码中,我们使用v-model指令实现了表单输入的双向数据绑定。
总之,v-bind和v-model都是用来绑定数据到HTML元素上的指令,但它们的作用略有不同。v-bind用于动态地绑定HTML元素的属性值,而v-model用于在表单元素与组件内部的数据属性之间创建双向数据绑定。
v-if,V-show:隐藏盒子
v-if (显示隐藏是将dom元素整个添加或删除) v-else-if v-else,v-show
V-show 显示隐藏(css--display:none)
例:
<!-- 该盒子需要隐藏 -->
<div v-show="showB