一、Vue.js的基础介绍
1.什么是Vue.js
Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App,Vue语法也是可以用于进行手机App开发的,需要借助于Weex)
Vue.js是前端的主流框架之一,和Angular.js、React.js一起,并成为前端三大主流框架!
Vue.js是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。(Nue有配套的第三方类库,可以整合起来做大型项目的开发)
前端的主要工作?主要负责MNC中的V这一层;主要工作就是和界面打交道,来制作前端页面效果;
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
2.Vue.js的特点
轻量级, 体积小是一个重要指标。Vue.js压缩后有只有20多kb(Angular压缩后56kb+,React压缩后44kb+)
移动优先。更适合移动端, 比如移动端的Touch事件
易上手,学习曲线平稳,文档齐全
吸取了Angular(模块化) 和React(虚拟DOM) 的长处, 并拥有自己独特的功能,如:计算属性
开源,社区活跃度高
二、Vue的优缺点
优点
1. 轻量级
Vue作为一款轻量级前端框架,大小只有18–21KB,工程搭建简单,只需要几行命令符。因为Vue使用的主体语言为JS,开发者可以灵活地将其他框架(如React和Angular)的项目迁移到Vue,具有很高的集成能力。Vue提供的router路由可以便捷地搭建一个多界面应用。
2. 高性能
虚拟DOM和响应式避免了不必要的全局重新渲染,提升了用户体验,使用户操作更加流畅。
3. 好上手
与面向对象编程性质类似,组件化更符合人类思维。打个比方,我们在设计网页时,通常会把一个界面分成一块一块的、用于某功能的特定样式模块。Vue的组件化使前端开发更加容易理解,同时MVVM可以更便捷地实现交互,对新手十分友好。
4. 插件化
由于Vue框架的流行性,目前有许多基于Vue的npm扩展包和开发工具(如Vuex)。Vue可以在一个文件下统一管理所有外部插件的全局使用。
5. 便于测试
组件化利于开发者对于单一组件进行测试,很少发生在整个页面下找不到是哪个地方报错的情况。
缺点
1. 生态环境不够完善
虽然Vue五年以来的发展寻索,生态环境不如React和Angular规范。Vue开发的讨论社区较小。
2. 国外市场小
Vue是由中国尤大神开发的,主要有阿里巴巴、饿了么等国内大公司作为主流框架,国外大部分使用React和Angular。
三、Vue的安装和使用
1. 直接引用script
<script src="https://unpkg.com/vue@next"></script>
2. 安装脚手架
npm install -g @vue/cli
3.创建应用实例
const app = Vue.createApp({
data() { return { count: 4 }
} })
const vm = app.mount('#app')
console.log(vm.count) // => 4
四、常用的vue的指令
v-text <div v-text="msg"> {{msg}}</div> 不能识别标签
v-html <div v-text="msg"> {{msg}}</div> 能识别标签
v-on 绑定事件 v-on:事件名=“方法名” 可以简写维 @事件名=“方法名”
v-model 实现的是表单元素的数据双向绑定
v-if 根据条件显示或者删除元素和组件
v-show 根据条件显示或者隐藏元素和组件
v-bind 给元素绑定属性 title="sdsd" v-bind:属性名=“变量” 简写 :属性名="值"
v-cloak 解决差值表达式闪烁问题 用法:给标签添加此指令,然后给这个指令设置样式
五、组件
(1)、什么是组件
组件(Component)是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素,封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树:
组件是可复用的Vue
实例, 说白了就是一组可以重复使用的模板, 跟JSTL
的自定义标签、Thymeleal
的th:fragment
等框架有着异曲同工之妙,通常一个应用会以一棵嵌套的组件树的形式来组织:
(2)、组件基础
创建组件格式:
Vue.component(tagName, options)
tagName 为组件名,options 为配置选项。注册后,我们可以使用以下方式来调用组件:
<tagName></tagName>
例子:
<div id="app">
<pan></pan>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script type="text/javascript">
//先注册组件
Vue.component("pan",{
template:'<li>Hello</li>'
});
//再实例化Vue
var vm = new Vue({
el:"#app",
});
</script>
说明:
Vue.component():注册组件
pan:自定义组件的名字
template:组件的模板
(3)、传递参数
在组件我们是需要传递参数到组件的,此时就需要使用props属性了!
prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。
父组件的数据需要通过 props 把数据传给子组件,子组件需要显式地用 props 选项声明 "prop":
注意:默认规则下props属性里的值不能为大写;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--组件:传递给组件中的值:props-->
<pan v-for="item in items" v-bind:panh="item"></pan>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
//定义组件
Vue.component("pan",{
props:['panh'],
template:'<li>{{panh}}</li>'
});
var vm = new Vue({
el:"#app",
data:{
items:["java","Linux","前端"]
}
});
</script>
</body>
</html>
https://blog.csdn.net/ranran0306/article/details/125236637?ops_request_misc=&request_id=&biz_id=102&utm_term=vue.js&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-1-125236637.nonecase&spm=1018.2226.3001.4187
以下可以查看视频
vue.js完整版教程,入门到项目