vue.js
ユーザーインターフェイスを構築するためのプログレッシブフレームワーク。
公式チュートリアル：https://cn.vuejs.org/v2/guide/
オンライン編集：https://codepen.io/pen
このブログは様々な文法を数えていますが、読みやすくするために短いコードしかありませんので、詳しく学ぶ必要がある場合は公式サイトのチュートリアルをご覧になることをお勧めします〜実際には非常に簡単です。
Vue.jsの中核は、簡潔なテンプレート構文を使用して宣言的にデータをDOMにレンダリングできるシステムです。
最初に、基本的な文法を予兆として紹介します
宣言的レンダリング
vバインド機能は命令と呼ばれます。手順の前にはv-が付いており、Vueが提供する特別な機能であることを示します。
<div id='div1'>
<span v-bind:title="titleContent">鼠标悬停查看title</span>
{
{ name }}
</div>
var vueObj = new Vue({
el:"#div1",
data:{
name:"飞机",
titleContent:"这里是Vue实例中动态的内容。"
}
})
ページ効果：
条件とサイクル
<div id="div1">
<ol v-if="flag">
<li v-for="entity in entitys">
{
{entity.id}}--{
{entity.name}}
</li>
</ol>
</div>
var div1 = new Vue({
el:'#div1',
data:{
flag:true,
entitys:[
{id:5234524,name:'三笠' },
{id:2345241,name:'艾伦' },
{id:2345345,name:'利维' },
{id:3243435,name:'艾尔敏' }
]
}
})
ページ効果：
Vueが要素を挿入/更新/削除すると、遷移効果が自動的に適用されます。
ユーザー入力を処理する
イベントリスナーを追加するv-onコマンド
<div id="div1">
<p>{
{mess}}</p>
<button v-on:click="reverseStr">反转字符串</button>
<p>{
{inputData}}</p>
<input v-model="inputData">
</div>
var div1 = new Vue({
el:'#div1',
data:{
mess:'进击的巨人1',
inputData:''
},
methods:{
reverseStr:function(){
this.mess = this.mess.split('').reverse().join('')
}
}
})
ページ効果：
コンポーネント化されたアプリケーションの構築
コンポーネントシステムは、Vueのもう1つの重要な概念です。これは、小さな独立した一般的に再利用可能なコンポーネントを使用して大きなアプリケーションを構築できるようにする抽象化であるためです。
<div id="div1">
<ol>
<comp-li
v-for="valItem valList"
v-bind:comp="valItem.val"
></comp-li>
</ol>
</div>
Vue.component('comp-li',{
props: ['comp'],
template: '<li >{
{ comp }}</li>'
})
var div1 = new Vue({
el:'#div1',
data:{
valList:[
{id:'0',val:'吃饭'},
{id:'1',val:'喝水'},
{id:'2',val:'睡觉'}
]
}
})
ここで説明する必要があります。componentキーワードは、コンポーネントとそのプロパティを宣言することです。v-bind：comp =“ valItem”、props：compが取得すると、対応するラベル要素でv-bind：compを確認できますこれはvalItem {id： '0'、val： 'eat'}全体です。
Vueインスタンス
すべてのVueアプリケーションは、Vue関数を使用して新しいVueインスタンスを作成することから始まります。Vue
のデータは「応答」します。プロパティの値が変更されると、ビューレイヤーも変更されますが、これらの値は宣言する必要がありますVueインスタンスが存在する場合。
公式説明を引用すると：
// 我们的数据对象
var data = { a: 1 }
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
data: data
})
// 获得这个实例上的属性
// 返回源数据中对应的字段
vm.a == data.a // => true
// 设置属性也会影响到原始数据
vm.a = 2
data.a // => 2
// ……反之亦然
data.a = 3
vm.a // => 3
ただし、data.b = 1を設定するとビューは変更されないため、実際の開発では、後で割り当てる属性を事前に宣言する必要があります。
さらに、この応答を拒否する場合は、Vueがデータを追跡しないようにする特別な関数Object.freeze（）があります。
<div id="div1">
<p>{
{ address }}</p>
<button v-on:click="address = 'guangzhou' ">Change it</button>
</div>
var obj = {
address: 'guangdong'
}
Object.freeze(obj)
new Vue({
el: '#div1',
data: obj
})
ここをクリックすると、コンソールにVueエラーが表示されます
さらに、Vueインスタンスを宣言した後、次の属性を介してVueインスタンスのメンバーにアクセスすることもできます：vm。$ data、vm。$ el
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
// 这个回调将在 `vm.a` 改变后调用
})
Vueライフサイクル
すべてのオブジェクトにはライフサイクルがあり、完全な各フレームには対応するイベントコールバックがあります。
栗をあげる
new Vue({
el: '#div1',
data: obj,
created:function(){
console.log('艾尔敏，前面就能看到海了');
}
})
Vueインスタンスが読み込まれた後に作成、実行されます。公式ウェブサイトでは、タイプミス「ライフサイクルドッグ」と呼ばれています。これは実際にはライフサイクルのコールバック関数であるフックです。
次に、Vueライフサイクル図
を配置します。大まかに見て、使用するときに確認します。
続行するには...
著作権について：記事の内容はインターネットで要約されています。元の作成者の権利を侵害している場合は、削除または承認について連絡してください