Vueのフレームワーク
三大フロントエンドフレームワーク：アンギュラリアクトヴュー
ヴュー：JSプログレッシブフレームワーク：ページ全体に、VUEによって制御することができる小型のページ変数に、VUEはまた、プロジェクト全体を制御することができます
学習曲線：コンポーネントのインスタンスメンバーのVUE VUEのプロジェクト開発のVUE VUE命令
ヴューの利点
シングルページ：効率的な
仮想DOM：ページのキャッシュ
双方向データバインディング：データはリスニングのメカニズムであります
データ駆動型：データからではなく、COMから
Vueのを使用してください
VUEを使用するようにHTMLページ内のスクリプトタグによって導入
idで表さhtmlページ構造の書き込みマウントポイント、
大規模な辞書を渡して、オブジェクトVueのカスタムをインスタンス化するスクリプトタグで
ELで、辞書にバインドするデータのためのデータをポイントし、ページ構造をマウント
Vueの知人
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue初识</title>
</head>
<body>
<div id="app">
<!-- {{ vue变量 }} 插值表达式,不传值会报错 -->
<h1>{{ h1_msg }}</h1>
<h2>{{ h2_msg }}</h2>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app', // 挂载点
data: { // 为挂载点的页面结构提供数据
h1_msg: 'h1的内容',
h2_msg: 'h2的内容',
}
})
</script>
</html>
Vueがシンプルなイベントを行います
<div id='app'>
<h1 v-on:click='clickAction'>h1的内容是{{ msg }}</h1>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
msg:'vue渲染的内容'
}，
methods：{ // 为挂载点提供事件函数
clickAction: function(){
alert(123)
}
}
})
</script>
Vueの簡単な操作スタイル
<div id="app">
<p v-on:click="btnClick" v-bind:style="v_style">点击p文字颜色变为绿色</p>
<div v-on:click="btnClick" v-bind:style="v_style">点击div文字颜色变为绿色</div>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
v_style: {
color: 'black'
}
},
methods: {
btnClick: function () {
this.v_style.color = 'green'
}
}
})
</script>
概要
- V- *タグの命令によって制御ヴュー
- Vueが可変ページで駆動します