Vue.jsの初歩的な理解
12209 ワード
Vue.js紹介
Vueはユーザーインタフェースを構築するためのセットです
プログレッシブフレーム.他の大型フレームワークとは異なり,Vueは底から上へ層毎に適用できるように設計されている.Vueのコアライブラリは、ビューレイヤのみに注目し、使いやすいだけでなく、サードパーティのライブラリや既存のプロジェクトとの統合も容易です.一方、Vueは、近代的なツールチェーンやさまざまなサポートクラスライブラリと組み合わせて使用される場合、複雑な単一ページアプリケーションを駆動することができます.
Vue導入
または、
vueバージョン
vue 1.0 2014年vue 2.0 2016年 vue 3.0【試用版】2019年国慶節 vueソース【思考】
匿名関数
メリットグローバルドメイン の防止ネーミング競合の防止 いくつかのスクリプトの攻撃を防止する パッケージjsライブラリは基本的に を完了するために使用されます.
データ駆動ビュー
意味:データが変更されると、ビューもに変更されます.
私たちは今からvの変化に注目していません.data に注目しています.
双方向バインド
新Vue()で得られた結果を,ルートインスタンスコンポーネントと呼ぶラベル化で示した.
Vueケース:
Vueはユーザーインタフェースを構築するためのセットです
プログレッシブフレーム.他の大型フレームワークとは異なり,Vueは底から上へ層毎に適用できるように設計されている.Vueのコアライブラリは、ビューレイヤのみに注目し、使いやすいだけでなく、サードパーティのライブラリや既存のプロジェクトとの統合も容易です.一方、Vueは、近代的なツールチェーンやさまざまなサポートクラスライブラリと組み合わせて使用される場合、複雑な単一ページアプリケーションを駆動することができます.
Vue導入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>または、
<script src="https://cdn.jsdelivr.net/npm/vue">script>vueバージョン
vue 1.0 2014年vue 2.0 2016年
匿名関数
(function ( 1， 2) {
/* */
})( 1， 2)メリット
データ駆動ビュー
意味:データが変更されると、ビューもに変更されます.
私たちは今からvの変化に注目していません.data に注目しています.
双方向バインド
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<div id="app">
<input type="text" v-model = "msg">
<p> {{ msg }} p>
div>
body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello Vue'
}
})
script>
html>新Vue()で得られた結果を,ルートインスタンスコンポーネントと呼ぶラベル化で示した.
Vueケース:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> Hello Vue title>
head>
<body>
<div id="app">
{{ this.msg }}
<p> {{ msg }} p>
div>
body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
/*
* script vue.js ， Vue ，
*/
// console.log(" : Vue", Vue)
// new Vue( options ) // options
var vm = new Vue({
el: '#app',// ： DOM , vue
data: {
msg: 'Hello Vue'
}
})
console.log(" : vm", vm)
script>
html>