記事のディレクトリ
DOMシステムにデータをレンダリングするための簡単な宣言構文テンプレートの使用を可能にするコアVue.js。これは、2つの主要コンポーネントがあります：1は、ビュー、1スクリプトです。
まず、最初のアプリケーションのVue
のは、最初のアプリケーションのVueを作成してみましょう：
<!--视图-->
<div id="app">
{{message}}
</div>
//脚本
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
message:'Hello Vue!'
}
});
</script>
以下は、このコードの説明です：
- {{メッセージ}}最も一般的な方法テキスト補間Vue.jsあります
- VARアプリ=アプリケーションオブジェクトのVue.jsの新しいヴュー（）文
- EL：DIVは、モードセレクタにより選択された要素、すなわち、要素の属性、
- データ：データ属性、ビュー層変数を宣言し、変数がデータを初期値に登録する必要があります
Vueのは、VueのVueの機能の新しいインスタンスを作成することである各アプリケーションは、で始まります。
var vm = new Vue({
// 选项
})
完全にMVVMモデルに従いますが、Vueののデザインも、そのインスピレーションを取っていません。だから、多くの場合、我々は、この変数は、ドキュメント内の名前Vueのインスタンスを表し、VM（ビューモデルの略）を使用します。
第二に、データとメソッド
Vueのインスタンスが作成されると、すべてのプロパティは、それがシステムのVueに応答して、データ・オブジェクトに追加されます。これらのプロパティの値を変更すると、ビューが新しい値マッチングに更新され、「応答」を生成します。例えば：
<!--视图-->
<div id="app">
{{a}}
</div>
//脚本
<script type="text/javascript">
var data = {a:1};
var vm = new Vue({
el:"#app",
data:data
});
</script>
以下は、このコードの説明です：
-
可変データは、オブジェクトの形で表されると属性データと可変データは、同じではありません
-
このコードを議論するために、いくつかのケースに分け：
-
値を変更する方法効果応答data.a =背中に「テキスト」によって達成することができます。これらのデータは変更すると、ビューが再描画されます。
-
値bがvm.a =「テキスト」によって変更された場合、data.a == vm.a効果を達成するのに応答するかもしれないが、
-
そのインスタンスがすでに作成されている場合にのみ、データ属性に存在するが、応答のタイプで注目すべきことです。所望の効果の応答タイプの場合は、最初の変数を宣言する必要があります。あなたが知っている場合は、後日プロパティが必要になりますが、それが空であるか、または存在しない場合、あなただけのいくつかの初期値を設定する必要が開始します。例えば：
data: { newTodoText: '', visitCount: 0, hideCompletedTodos: false, todos: [], error: null }
-
-
あなたがObject.freeze（）を使用している場合は、防止には、既存のプロパティを変更するだけでなく、システムが変更を追跡することはもはや対応できることを意味します。
<div id="app">
<p>{{ foo }}</p>
<!-- 这里的 `foo` 不会更新！ -->
<button v-on:click="foo = 'baz'">Change it</button>
</div>
var obj = {
foo: 'bar'
}
Object.freeze(obj)
new Vue({
el: '#app',
data: obj
})
データ属性に加えて、Vueのも有用な方法およびインスタンス属性のいくつかの例を露出します。彼らは、ユーザー定義の属性の面積を区別するために$接頭辞を持っています。例えば：
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data
vm.$el === document.getElementById('example')
第三に、インスタンスデータおよびインスタンス属性の通常の方法
図1に示すように、特性の例
| プロパティ | 説明 |
|---|---|
| VM。$データ | プロパティを取得します |
| VM。$ | 取り付けられた要素のインスタンスを取得し |
| VM。$オプション | カスタムオプション/プロパティ/機能を取得 |
| VM。$、参考文献 | DOMオブジェクトのref属性に登録されます |
コード例：
<div>
<h1>{{msg}}</h1>
<h2 ref='hello'>Hello</h2>
<h2 ref='vue'>Vue</h2>
</div>
<script>
let vm = new Vue({
el : 'div',
data : {
msg : 'sikiedu'
},
username : 'joey',
password : '123',
login(){
console.log("login");
}
});
/*$.data*/
console.log(vm.$data.msg);
console.log(vm.msg);
/*$el*/
console.log(vm.$el);
vm.$el.style.color = 'red';
/*$options*/
console.log(vm.$options.username);
console.log(vm.$options.password);
vm.$options.login();
/*$refs*/
console.log(vm.$refs);
vm.$refs.hello.style.backgroundColor = 'yellow';
</script>
インスタンスデータの2方法
| 方法 | 説明 |
|---|---|
| VM。$腕時計 | 観測データの変更 |
| VM。$削除 | 削除の属性値 |
| VM。$セット | 設定されたプロパティ値 |
例として、削除コードとsetメソッド：
<div>
Id：<span>{{user.id}}</span><br />
用户名：<span>{{user.username}}</span><br />
<button @click="changeUsername">changeUsername</button><br />
<button @click="addId">addId</button><br />
<button @click="delId">delId</button>
</div>
<script>
let vm = new Vue({
el : 'div',
data : {
user : {
username : 'Joey'
}
},
methods : {
changeUsername(){
this.user.username = 'sikiedu-Joey';
},
addId(){
//this.$set(this.user, 'id', 1); 局部的
//Vue.set(this.user, 'id', 1); 全局的
if(this.user.id){
this.user.id++;
}else{
Vue.set(this.user, 'id', 1);
}
console.log(this.user.id);
},
delId(){
if(this.user.id){
//this.$delete(this.user, 'id');
Vue.delete(this.user, 'id');
}
}
}
});
</script>
メソッドの時計のコード例：
<div>
<input type="text" v-model="msg" /><br />
msg : <span>{{msg}}</span><br />
<input type="text" v-model="num" /><br />
num : <span>{{num}}</span><br />
<button οnclick="unWatch()">unWatch</button>
</div>
<script>
let vm = new Vue({
el : 'div',
data : {
msg : 'Joey',
num : 1,
user : {
id : '01',
username : 'sikiedu'
}
},
watch : {
num : function(newValue, oldValue){
console.log("修改了num 旧值= " + oldValue + " 新值= " + newValue);
}
}
});
let unwatch = vm.$watch('msg', function(newValue, oldValue){
console.log("修改了msg 旧值= " + oldValue + " 新值= " + newValue);
});
function unWatch(){
unwatch();
console.log("点击了unwatch按钮")
}
</script>
