簡単な紹介
VUEは、ユーザインタフェースを構築するためのプログレッシブフレームです。他のフレームの差がヴューが層によってボトムアップ層から印加されるように設計されて、大きいです。唯一のビュー層の上にVueのコアライブラリの焦点は、だけでなく、使いやすいだけでなく、簡単なサードパーティ製のライブラリまたは既存のプロジェクトを統合することです。一方、現代のツールチェーンとさまざまなサポートライブラリと組み合わせて使用し、Vueのも複雑な1ページのアプリケーションのためにドライブを提供することが十分に可能。
環境インストール
環境を準備する：
ノード
海抜
ビュー-CLI
ビューデベロッパーツール
NVMインストール：ノードのバージョンを管理します
ダウンロードクロームプラグインアドレス：
https://chrome-extension-downloader.com/
BootCDN：https://www.bootcdn.cn/
テンプレートの構文
VUEファイル構造（テンプレート、スクリプト、スタイル）
補間構文{{MSG}}、データ、JS発現
コマンド（コマンドの短縮形）@click：HREF
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.bg{
color: red;
}
</style>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script></head>
<body>
<div id="app">
<div class="bg" v-bind:id="bg1">
hello world!
{{msg}}
</div>
<div class="bg">
{{msg}}
</div>
{{count}}
{{(count + 1)*10}}
<div v-html="template">
</div>
<a :href="url">百度</a>
<!--v-bind:绑定页面属性, 可以直接缩写 ：-->
<button type="button" @click="submit()">数字加1</button>
<!--v-on:事件 缩写@ -->
</div>
<script>
new Vue({
el:'#app', // .bg
data: {
msg: 'hello vue!!',
count: 1,
template: '<div>hello template</div>',
url: 'https://www.baidu.com/',
bg1: 'app-bind'
},
methods: {
submit: function() {
this.count ++
}
}
})
</script>
</body>
</html>リスナーのプロパティで計算
プロパティの計算：conputed
リスナー：腕時計
リスナー：
<script>
var app = new Vue({
el:'#app', // .bg
data: {
msg: 'hello vue!!',
count: 1,
template: '<div>hello template</div>',
url: 'https://www.baidu.com/',
bg1: 'app-bind'
},
methods: {
submit: function() {
this.count ++
}
},
watch: {
msg: function (newVal, oldVal) {
console.log('newVal is:' + newVal)
console.log('oldVal is:' + oldVal)
}
}
})
</script>Vueのはそうあなたがクロームコンソールにデバッグすることができ、次のウォッチ属性をデバッグするために使用され、変数にオブジェクト：
値app.msgを変更する場合は、対応する機能、時計機能を呼び出して、印刷関連情報
app.msg
"hello vue!!"
app.msg = "new message!!"
index.html:49 newVal is:new message!!
index.html:50 oldVal is:hello vue!!
"new message!!"計算されたプロパティ
MSG1の変更が発生した計算値を関連するすべてのプロパティの値の変化に影響を与えます
モニターの値は、この例では値であり、
watch: {
msg: function (newVal, oldVal) {
console.log('newVal is:' + newVal)
console.log('oldVal is:' + oldVal)
}
},
computed: {
msg1: function () {
return 'computed ' + this.msg + ',' + this.another
}
}リスニングの時計は、一般的に単一の変数や配列である - 非同期のシナリオ
計算されたが、多くの変数を監視することができ、これらの変数は、Vueのでなければなりません - データ連携を
レンダリング条件は、リスト、クラスとスタイルのバインドをレンダリング
V-IF || V-ショーの使い方
<div id="app">
<div v-if="count > 0">
判断1：count大于0,count的值是：{{count}}
</div>
<div v-else-if="count < 0 && count > -5">
判断2：count的值是：{{count}}
</div>
<div v-else>
判断3：count的值是：{{count}}
</div>
<div v-show="count == -1">show: {{count}}</div>
</div>
script>
var app = new Vue({
el:'#app', // .bg
data: {
count: 1
}
})
</script>条件に基づいて関連コンテンツを表示しています
V-用
<div v-for="item in list"> {{item}}</div>
<script>
var app = new Vue({
el:'#app', // .bg
data: {
msg: 'hello vue!!',
count: 1,
list: [1,2,3,4,5]
})
</script> V-のためのV-場合、V-ショーと組み合わせて使用します：
<div v-for="item in list">
<div v-if="item.age > 29">
{{item.name}}
</div>
<div v-else>
{{item.age}}
</div>
<div v-show="item.age > 29">
{{item.name}}
</div>
</div>クラスとスタイルのバインディング
バインディングのスタイル：
<div v-show="item.age > 29" v-bind:style="styleMsg">
{{item.name}}
</div>
<script>
var app = new Vue({
el:'#app', // .bg
data: {
styleMsg:{
color: 'red',
textShadow: '0 0 5px green'
},
msg: 'hello vue!!'
})
</script>
バインディングクラス：
<div v-show="item.age > 29"
:class="['active', 'add', 'more', {'another':item.age < 30}]"
:style="styleMsg">
{{item.name}}
</div>item.age <別が表示されます、30
ビュー-CLI
インストール：
npm install -g @vue/cli
ビューバージョン：
vue --versionプロジェクトを作成する方法：
vue create project若しくは
vue ui // 可视化创建项目VUEプロジェクトのディレクトリ構造：
-- public
-- src
-- package.json思考のコンポーネント
多重達成するためのモジュールアセンブリの主な機能
それは非常に効率的な実行することができ
いくつかの複雑な論理ページが分割することができます
どのように分割するには：
- コードのビジネスラインは、原則の300行を超えていません
- 多重化の原則
成分によって引き起こされる問題：
1.コンポーネント状態管理（vuex）
ミックス2マルチコンポーネント、マルチページ、業務の担当（VUE-ルータ）
コンポーネント、メッセージ、イベント管理（小道具、EMIT /上の間を通過する3パラメータ、バス）
VUEコードスタイル
https://cn.vuejs.org/v2/style-guide/
ビュールータ
- 作成されたファイルを関連VUEビュー
- configureはroute.jsにルーティング関連しました
{
path: '/data',
name: '数据',
icon: 'dashboard',
component: PageLayout,
children: [
{
path: '/data/info',
name: '详情',
icon: 'none',
component: () => import('@/views/data/Info')
}]
}関連ページを表示する3.ローカル構成ファイルVUEの必要性
vuex
シーン：
- 同じ状態に依存して複数のビュー（例えば、メニューナビゲーション）
- あなたは（そのようなコメント弾幕など）と同じ状態の異なるビューの動作を変更する必要があります
状態管理モデルvue.jsを開発
コンポーネントステータスを一元管理
コンポーネントの状態が均一に従ってルールを変更するには
これは、次の手順を使用して行われる必要があります。
- Store.js定義ファイル
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
increase() {
this.state.count ++
}
},
actions: {
}
});
状態：公共状態コンポーネント
変異：定義されたメソッドの状態を変更
2.コンポーネントは、store.jsファイルを導入する必要性を使用しました
import store from '@/store/index'
export default {
name: "About",
store,
methods: {
add() {
console.log("add")
store.commit('increase')
}
}
}
</script>store.commit（）変更をコミット
コンポーネント間3.
別のファイルに状態を使用して
<template>
<div>
<p>{{msg}}</p>
</div>
</template>
<script>
import store from '@/store/index'
export default {
name: "Config",
store,
data () {
return {
msg: store.state.count
}
}
}
</script>
<style scoped>
</style>どのようにデバッグします
クロームプラグインVUEがあります。
デバッグするための書き込みデバッガに必要な場所
クロームコンソールに直接VUE変数の値を表示し、これ。（デバッグモード）変数を書きました
クロムネットワークXHRリクエストを表示
スロー3G |あなたは、インタラクティブなデバッグ高速3Gを使用することができます
これは、現在のコンポーネントのオブジェクトがグローバル変数ウィンドウを行くためにバインドされていることができ
mounted() {
window.vue = this
},
methods: {
add() {
console.log("add")
debugger
store.commit('increase')
},
output() {
console.log("output")
}
}
}これは、クロームコンソールに直接印刷することができます window.vue.output()
vue.jsを統合する方法
- シングルページ、CDN vue.js複数ページの紹介
- テンプレートプロジェクトを作成するために、複雑な単一のページVUEのCLIツール
開発ワークフロー：
- 需要調査（ニーズを特定します）
- インタラクションデザイン、論理設計、インタフェース設計
- コードの実装、テストの実行、デプロイオンライン
ギット：
- プロジェクトgitのクローンを作成し、gitの初期化
- 枝をマージ、ブランチとプッシュブランチを作成
- 削除ブランチ、バージョンのロールバック
git add . # 添加需要提交的文件
git commit -m "first commit" # 提交需要push的文件
git remote -v # 可以看到远程的仓库
git push origin master
git branch -a # 查看所有分支
git checkout -b dev #创建分支
git push origin dev # 提交到dev分支
-- 合并 分支 --
git checkout master
git merge dev
git push origin master
git branch -D dev # 删除dev分支
git push origin :dev # 删除远程分支
git reset --hard head^ # 退回到上一个版本
git log | git reflog #查看之前的git 记录
git reset --hard HEAD@{1} # 回退到任意版本シンプルな1ページのアプリケーション
コード：
<template>
<div>
<p>{{msg}}</p>
<ul>
<li v-for="(item, index) in lists"
:key ="index"
@click="choose(index)"
:class="{active: index === current && current !==''}"
>
{{item}}
</li>
</ul>
<button type="button" @click="add()">添加</button>
<ul>
<li v-for="(item, index) in target"
:key ="index"
>
{{item}}
</li>
</ul>
</div>
</template>
<script>
import store from '@/store/index'
export default {
name: "Config",
store,
data () {
return {
msg: store.state.count,
lists: [1,2,3,4,5],
target: [],
current: ''
}
},
methods: {
choose(index) {
this.current = index
},
add() {
if (this.current==='') {return}
this.target.push(this.lists[this.current])
this.current=''
}
}
}
</script>
<style scoped>
li.active {
background: green;
}
</style>
レンダリング：
どのように高い誰か他のAppの模倣
- Elementはドムの構造を見ることができ点検
- ビューJS、CSSリファレンス、適切なJSライブラリの検索内部ヘッダ、本文
- また、クロムのネットワークを表示することができます|ソースをJS、JS圧縮ファイルのデバッグ抗編、ブレークポイントを使用して、クロムは、フォーマット機能を提供します
パッケージ化され、解放
プロジェクトパッケージ：
npm run buildパッケージは、どこへ行くか、サーバのルートディレクトリにアップロードされたすべてのファイルのdistのフォルダ完了したら、アクセスすることができます
概要
この記事では、ビルドにいくつかの入門知識VUEの枠組みを説明し、デバッグに、今、あなたはいくつかの簡単な1ページのアプリケーションを開発することができますどのようにVUEの開発環境、パッケージ化され、リリースされ、VUEテンプレート構文、開発プロセスとVUE関連コンポーネントを使用し、インストール。