本文原文鏈接：https://blog.csdn.net/Jack__iT/article/details/88213177
什么是MVVM框架？
View---ViewModel---Model之間的通訊
View:視圖，dom
ViewModel：通訊，觀察者，能監(jiān)聽到數(shù)據(jù)的變化
Model：數(shù)據(jù)，JavaScript對象
常用的MVVM框架有angular.js、react.js、vue.js
MVVM的應用場景：
復雜交互邏輯的前端應用
提供基礎(chǔ)的架構(gòu)抽象
通過Ajax數(shù)據(jù)持久化，保證前端用戶體驗
什么是vue.js ?(核心是：數(shù)據(jù)驅(qū)動+組件化的前端開發(fā))
數(shù)據(jù)驅(qū)動：實現(xiàn)數(shù)據(jù)的雙向綁定，數(shù)據(jù)改變驅(qū)動視圖自動更新
組件化設(shè)計原則：頁面上每個獨立的可視/可交互區(qū)域視為一個組件，每個組件對應一個工程目錄，組件所需要的各種資源在這個目錄下的就進維護，頁面就成了組件的容器，它由組件來組成
Vue.js 是一套構(gòu)建用戶界面的 漸進式框架。使用MVVM架構(gòu)，與其他重量級框架不同的是，Vue 采用自底向上增量開發(fā)的設(shè)計。目標是通過盡可能簡單的 API 實現(xiàn)響應式的數(shù)據(jù)綁定和組合的視圖組件，響應式修改dom元素。
使用Vue，您可以快速編寫應用程序并直接從瀏覽器運行應用程序，或者如果需要，可以使用ES6，JSX，組件，路由，捆綁等構(gòu)建復雜的應用程序。
它可以處理您可能想要使用它的許多不同方式。它也非常靈活，可以適應不同的編寫代碼的方式，例如，可以使用HTML或Javascript編寫模板，也可以使用JSX。可以不觸碰 DOM——所有的 DOM 操作都由 Vue 來處理，你編寫的代碼只需要關(guān)注邏輯層面即可。
Vue.js、Angular.js和React.js的區(qū)別
Vue.js更小更輕量、更易上手、學習快借鑒了angular.js的指令和react的組件化，react有自己的js語法、Angular是java工程師寫的，最難
安裝
Vue.js在項目中的引入方式
直接引入js庫（可以是CDN在線倉庫中的vue.js，也可以是自行下載的vue.js庫）
<script src="js/vue.js"></script>
NPM方式安裝
在用 Vue 構(gòu)建大型應用時推薦使用 NPM 安裝。NPM 能很好地和諸如 webpack 或 Browserify 模塊打包器配合使用。同時 Vue 也提供配套工具來開發(fā)單文件組件
在cmd中直接使用npm來安裝的一些工具的話會比較慢，所以我們使用淘寶的npm鏡像：輸入npm i -g cnpm --registry=https://registry.npm.taobao.org，即可安裝npm鏡像，以后再用到npm的地方直接用cnpm來代替就好了 ，如果權(quán)限不夠，請使用管理員運行命令提示符
調(diào)試工具：
Chrome瀏覽器，安裝vue插件
使用
基礎(chǔ)知識+TodoList+Vue-cli
簡單直接的dom操作
<body>
<div id="root">{{msg}}</div>
<script>
new Vue(
{
el: "#root",
data:{
msg:"vue Demo"
}
}
)
</script>
</body>
掛載點、模板與實例的關(guān)系
掛載點：即Vue對象綁定的元素、需要進行操作的元素，Vue只會對掛載點下的內(nèi)容進行處理。與vue對象的el屬性對應
模板：掛載點內(nèi)的內(nèi)容，vue自動結(jié)合模板和數(shù)據(jù)生成內(nèi)容，然后把內(nèi)容放在掛載點中
<body>
<div id="root"></div>
<div v-text="msg"></div>
<script>
new Vue(
{
el: "#root",
template: '<h4>這也是模板內(nèi)容 {{msg}}</h4>',
data:{
msg:"<h5>vue Demo text</h5>"
}
}
)
</script>
</body>
實例： 所創(chuàng)建的vue實例
數(shù)據(jù)、事件和方法
數(shù)值
插值表達式{{vaule_name}}
v-text和v-html:
Vue-cli：
它是vue的腳手架工具
安裝：
安裝node.js環(huán)境
node -v 查看node.js版本
安裝vue-cli:
Windows下：npm install -g vue-cli
Mac下：sudo npm install -g vue-cli
常用的vue命令:
vue 命令：
vue list 命令：查看列出可以用哪些模板
vue -V ?查看版本
C:\Users\Administrator>vue list
??Available official templates:
??★ ?browserify - A full-featured Browserify + vueify setup with hot-reload, li
nting & unit testing.
??★ ?browserify-simple - A simple Browserify + vueify setup for quick prototypi
ng.
??★ ?pwa - PWA template for vue-cli based on the webpack template
??★ ?simple - The simplest possible Vue setup in a single HTML file
??★ ?webpack - A full-featured Webpack + vue-loader setup with hot reload, lint
ing, testing & css extraction.
??★ ?webpack-simple - A simple Webpack + vue-loader setup for quick prototyping
安裝要使用的模板：
vue init webpack sell
項目名稱，項目描述、作者、單元測試
安裝完成后，Windows下dir可查看當前目錄下文件
進入項目目錄，
npm install
npm run dev?運行項目
vue項目的構(gòu)成和原理
webpack
模板語法：
{{}}里面可以包含表達式
<!DOCTYPE html>
<html lang="en">
<head>
????<meta charset="UTF-8">
????<title>Title</title>
????<script src="lib/vue.js"></script>
????<style>
????????.bg{
????????????color: red;
????????}
????</style>
</head>
<body>
<div id="div1">
????<p>username:{{username}}</p>
???<!-- 變量的調(diào)用-->
????<p>password:{{password}}</p>
????<p>age:{{age*2+5}}</p>
????<!--在{{}}中可使用js表達式語法-->
????<p>age2:{{age}}</p>
????<p>template{{template}}</p>
????<!--調(diào)用模板顯示HTML結(jié)構(gòu)-->
????<p v-html="template"></p>
????<!--調(diào)用末班顯示html內(nèi)容-->
????<p><a v-blind: href="url">百度的超鏈接</a></p>
????<!--將超鏈接作為變量，可用：代替v-blind:-->
????<p><a :href="url">百度的超鏈接</a></p>
????<button type="button" v-on:click="submit()">年齡增長</button>
????<button type="button" @click="submit()">年齡增長</button>
????<!--調(diào)用函數(shù)的兩種方法，可用@代替v-on:-->
</div>
<h5 class="bg">Hello World??！{{msg}}</h5>
<script>
????new Vue(
????????{
????????????el: '.bg',
????????????data: {
????????????????msg: 'hello vue!!',
????????????????username: "zhang"
????????????}
????????}
????);
????new Vue({
????????el: '#div1',
????????data: {
????????????username: 'lisi',
????????????password: '123',
????????????age: 23,
????????????template: '<div>this is a template!</div>',
????????????url: ' http://baidu.com'
????????},
????????methods: {
????????????submit: function () {
????????????????this.age++
????????????}
????????}
????})
</script>
</body>
</html>
計算屬性與偵聽器
計算屬性computed：適合于數(shù)據(jù)聯(lián)動，可監(jiān)聽多個變量，但是監(jiān)聽的變量需要在實例里面
監(jiān)聽器 watch：適合于異步場景，監(jiān)聽一個變量或常量
<!DOCTYPE html>
<html lang="en">
<head>
????<meta charset="UTF-8">
????<title>Title</title>
????<script src="lib/vue.js"></script>
</head>
<body>
??<div id="app">
??????{{msg}}
??????<p>{{msg1}}</p>
??</div>
<script>
????var app=new Vue({
????????el: '#app',
????????data: {
????????????msg: 'vue project',
????????????another: "another msg"
????????},
????????watch:{
????????????msg:function (newval,oldval) {
????????????????console.log('newval:'+newval);
????????????????console.log('oldval:'+oldval)
????????????}
????????},
????????computed: {
????????????msg1: function () {
????????????????return 'computed:'+this.msg+' , '+this.another
????????????}
????????}
????})
</script>
</body>
</html>
條件渲染、列表渲染、class和Style
v-if,v-else,v-else-if,和v-show
<!DOCTYPE html>
<html lang="en">
<head>
????<meta charset="UTF-8">
????<title>Title</title>
????<script src="lib/vue.js"></script>
</head>
<body>
????<div id="app">
????????<div v-if="count<8">判斷1：cout小于8,它的值是：<span>{{count}}</span></div>
????????<div v-else-if="count>=8&&count<10">判斷2：count大于等于8且小于10啦：值為：{{count}}</div>
????????<div v-else>判斷3：其他都不滿足了，它的值是：<span>{{count}}</span></div>
????????<button type="button" @click="submit()">計數(shù)器</button>
????</div>
????<script>
???????var app= new Vue({
????????????el: '#app',
????????????data: {
????????????????msg: 'vue demo3!',
????????????????count: 5
????????????},
????????????methods:{
????????????????submit:function () {
????????????????????this.count++;
????????????????}
????????????}
????????});
????</script>
</body>
</html>
v-for ?列表渲染
<body>
????<div id="app">
????????<div>{{msg}}</div>
????????<div v-for="item in list">
????????????<p v-if="item.age>20">大于20，姓名：{{item.name}}，年齡：{{item.age}}</p>
????????????<p v-if="item.age<=20">小于或等于20，姓名：{{item.name}},年齡：{{item.age}}</p>
????????</div>
????</div>
????<script>
????????new Vue({
????????????el:'#app',
????????????data: {
????????????????msg:'vue demo 4',
????????????????list: [
????????????????????{name: 'zhang',age: 24},
????????????????????{name:'huang',age:20},
????????????????????{name:'luo',age:23},
????????????????????{name:'chen',age:18}
????????????????]
????????????}
????????})
????</script>
</body>
style的綁定
<body>
????<div id="app">
????????<div v-bind:style="mystyle">{{msg}}</div>
????</div>
????<script>
????????new Vue({
????????????el: "#app",
????????????data:{
????????????????msg: 'this is vue demo4',
????????????????mystyle:{
????????????????????color: 'red',
????????????????????textShadow: '0 0 5px green'
????????????????}
????????????}
????????})
????</script>
</body>
vue-cli
C:\Users\Administrator>f:
F:\>cd /vueFiles
F:\vueFiles>vue create vue-project-190201
??vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6.
??You may want to run the following to upgrade to Vue CLI 3:
??npm uninstall -g vue-cli
??npm install -g @vue/cli
F:\vueFiles>
vue的文件結(jié)構(gòu)： template、script、style
模板語法：包含插值、指令（指令縮寫 ）；
創(chuàng)建vue-cli工程項目的方式
進入要創(chuàng)建項目的目錄，使用vue create?工程名 的命令創(chuàng)建
使用vue ui命令，然后打開瀏覽器UI界面創(chuàng)建項目
????預設(shè)：包管理器 npm
功能：路由組件：Router 狀態(tài)管理組件vuex 還有css的預編譯組件CSS Pre-processors ?使用配置文件 勾選使用
配置：預編譯器：Sass/SCSS ，ESLint的配置文件為默認的標準的配置文件：ESLint+Standard ?config
啟動項目：
npm run serve
