Vue.js的初学

前端小菜凯

已于 2022-09-19 18:24:48 修改

阅读量227

点赞数 1

文章标签： vue.js javascript 前端

于 2022-09-19 18:21:28 首次发布

本文链接：https://blog.csdn.net/gkx19898993699/article/details/126933748

版权

一、什么是vue.js？

1.定义

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

2.框架和库的区别

（1）框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。
（2）库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。

3.MVC与MVVM的区别

（1）MVC 是后端的分层开发概念;
（2）MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分Model、View、VM ViewModel;

二、vue.js的代码结构

1.引入vue.js
2.写视图层，我们要展示的内容
3.实例化Vue()

（1）el（控制区域）

（2）data（数据）

（3）methods（方法）
例：——
let vm = new Vue（{
        el：“选择器”，
        data：{
         参数名：‘参数值’，
         参数名：‘参数值’，
         参数名：‘参数值’
        } ，
        methods：{
         函数名（）{
          处理代码
         }
       }
}）

三、v-html/v-text/v-cloak

1.v-html：可以解析富文本，可以渲染html界面
2.v-text：会替换掉元素里的内容
3.v-cloak：防止界面闪烁

四、属性绑定、事件绑定

1.属性绑定

v-bind：属性名=‘属性值’
简写—— ：属性名=‘属性值’

2.事件绑定

v-on：事件类型=“方法”
简写—— @事件类型=“方法”

五、事件修饰符（可以进行链式使用）

1.阻止冒泡
@事件类型.stop=“方法”
2.阻止默认事件
@事件类型.prevent=“方法”
3.添加事件侦听器时使用事件捕获模式
@事件类型.capture=“方法”
4.事件只触发一次
@事件类型.once=“方法”
5.只当事件在该元素本身触发时触发回调
@事件类型.self=“方法”

注意！：当.once与.prevent搭配时，第一次会阻止默认但第一次以后就会失效！！

六、v-model数据双向绑定

v-model：value=‘data中value变量’
1.v-model数据双向绑定
2.注意：绑定的是表单控件

七、Vue中样式的使用

1.使用class样式:

（1）数组
：class=“变量”
在data中加入后面的变量，赋值一个类名的数组

（2）三木表达式
：class =“flag? '类名1' :'类名2' ”
在data中给flag赋值true或者false

（3）数组内置对象（对象的键是样式的名字，值是Boolean类型）
：class=“变量”
在data中加入后面的变量，赋值一个类名的数组，数组中包含对象
例如——
数组变量= [{‘类名1’：true/false}，{‘类名2’：true/false}]

（4）直接通过对象
：class=“{‘类名a’：true/false，‘类名b’：true/false}”

2.使用内联样式

（1）直接在元素上通过style 的形式，书写样式对象
<div style="color：red；"></div>
（2）将样式对象，定义到 data 中，并直接引用到 :style 中
a)先在data上定义样式

data {
style1：{color：'red'}
}
b)再在元素中，通过属性绑定的形式，将样式对象应用到元素中
<div :style="style1"></div>

3.在 :style 中通过数组，引用多个 data 上的样式对象

（1）在data上定义样式
data {
style1：{color：'red'},
style2：{'font-size'：'40px'}
}
（2）在元素中，通过属性绑定的形式，将样式对象应用到元素中
<div :style="[style1,style2]"></div>

4.在:style中调用methods中的函数

（1）在methods中定义的函数
getStyle(num) {
let obj = {
color: 'red',
'font-size': '50px'
};
if (num == 1) {
obj.color = 'red'
} else {
obj.color = 'green'
}
return obj
}
（2）在元素中，通过属性绑定的形式，将对应函数应用到元素中
<div :style="getStyle(2)"></div>