Vue.js学习的第一天
2022-02-22 14:46:34
Vue.js学习的第一天
官网文档地址: 传送门
一、Vue介绍:
1.Vue.js是什么?
- 作者:2014年2月, 尤雨溪 曾就职于Google Creative Labs和Meteor Development Group。
- Vue (读音 /vjuː/,类似于 view ) 是一套用于构建用户界面的 渐进式框架 。与其它大型框架不同的是, Vue 被设计为可以自底向上逐层应用 。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与 现代化的工具链 以及各种 支持类库 结合使用时, Vue 也完全能够为复杂的单页应用提供驱动 。
2.Vue的特点:
- 简单:在HTML,CSS,JavaScript基础上扩展。
- 易用:渐进式框架,逐层应用,有丰富的第三方库。
- 轻量:开发版大小约为300K,生产版大小约为30K。
3.Vue的功能:
- 解耦视图和数据
- 可重复的组件
- 数据绑定
- 功能插件化
- 虚拟DOM
4.相比于Angular.js、React.js、为何Vue.js要技高一筹?
-
Angular.js
Google公司推出,Java后端程序员开发,将java的MVC模式复刻到前端,在前端设计增加了 模块发开发概念 。 -
React.js:
Facebook公式推出,提出了 虚拟DOM 概念,在内存中模拟DOM操作,提升了前端的渲染效率。 - Vue.js: 渐进式框架 ,综合了Angular.js的特点( 模块化开发 )和React( 虚拟DOM )的优点。相对于Vue.js、Angular.js、React.js后两者学习成本较高。 Vue.js基于MVVM设计模式 ,有着轻量级、数据绑定、响应式和组件化开发等特点。
二、MVC和MVVM设计模式:
1.MVC设计模式:
MVC设计模式基本思想就将项目层次分解为Model(模型层)、View(视图层)、Controller(控制层)。
- Model层:主要负责数据处理和运算
- View层:主要负责显示数据和用户交互
- Controller层:主要负责业务接受数据并控制视图层的跳转
2.MVVM设计模式
MVVM设计模式由Model(模型)、View(视图)、ViewModel(视图模型)三部分组成。是MVC模式的进阶版。
MVVM设计模式和MVC模式一样,主要的目的是分离视图(View)和模型(Model),主要有以4个优点:
-
低耦合:
View可以独立于Model的变化和修改,一个VIew Model可以绑定到不同的View上,当View变化时Model可以不变化,当Model变化时View也可以不用变化。 -
独立开发:
开发人员更加专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于界面的设计。 -
可重复性:
可以把一些视图逻辑放在一个ViewModel中,让更多的View重用这段视图逻辑。 -
可测试:
现在测试人员可以针对ViewMdoel来写。
三、 构建Vue开发环境
方式一:用CND的方式搭建Vue.js开发环境:
- <! – 引入CDN开发版 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- <! – 引入CDN生产版 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
方式二:下载官网Vue.js文件,相对位置引入到项目中
<script src="../XXX/vue.js"></script>
方式三: node .js命令行搭建Vue
在项目文件夹下使用DOS命令
npm install vue
四、你好,Vue
我的第一个Vue项目
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
我的第一个Vue项目</title>
</head>
<div class="app">
<!-- 动态传值写法 {{}} -->
{{message}}
</div>
<!-- 引入CDN开发版 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
var app = new Vue({
el: '.app', //选择要传值的标签
data: {
message: 'Hello Vue!'//给标签内传值
}
})
</script>
</body>
</html>
関連
-
[解決済み] v-if内部の複雑な条件
-
[解決済み] Vue.js Chrome DevtoolsがVue.jsを検出しないのはなぜですか?
-
[解決済み] Vue.jsで12件中1~3件を表示させるには?
-
[解決済み] npm run dev」「npm run watch」はどのようなスクリプトですか?
-
[解決済み] Vue 2.0でコンポーネント自身を削除する方法
-
[解決済み] プロジェクトのvue.jsのバージョンを確認する方法は?
-
[解決済み] Laravel Spark v4.0.9で「Vue packages version mismatch」エラーを修正するにはどうすればいいですか?
-
未定義のプロパティ '0' を読み取ることができません。
-
vue リクエストエラー Uncaught (プロミス内)
-
TypeError: undefinedはオブジェクトではありません('i18n._t'を評価中)。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン