1.インポートvue.js、特定のコードやチュートリアルhttps://learning.dcloud.io/、HBuilderはコードに直接導入することができる、研究のために非常に便利です。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
</body>
</html>
図2は、最初に導入vue.jsに続く、Vueのは、2つの例として、測位のための1つのEL素子が存在する、インスタンスを作成するクラスセレクタであれば、とその「クラスセレクタ名」;場合IDセレクタは、次に使用され、「#IDセレクタ」を 値、すなわち、キー：値のデータは、データおよび変数を記憶するために、一般に変数名であり、別のです。
次いで、{{}}中括弧補間用いて補間されます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app2">
{{ msg }} {{name}}
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',//元素
data: {//数据，变量
message: 'Hello Vue!',
name : "Vue"
}
});
var app2=new Vue({
el:'#app2',//元素用于定位
data:{//数据变量
msg:'hello world',
name:"Fuck"
}
})
</script>
</body>
</html>
3.データとメソッド、時計（「観察対象」、関数（新しい値、古い値））を使用して
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{a}}
</div>
<script type="text/javascript">
var data = { a : 1 };//data是一个变量，值是1
var vm = new Vue({
el : "#app",//ID选择器
data : data//data是变量
});
vm.$watch('a', function(newVal, oldVal){//watch('观察的对象'，function(newWal,oldVal))
console.log(newVal, oldVal);//watch观察变量的变化
})
vm.$data.a = "test...."//用于区分
</script>
</body>
</html>
4.beforeCreate：関数（）{}データ観測及びイベント/時計設定呼び出し、作成する前に初期化Vueのインスタンスの後：関数（）{}のインスタンスが作成された後、この工程では、直ちに呼び出され、完了インスタンスデータの観察、操作、監視/イベントコールバックイベントのプロパティとメソッドは、その後、マウントステージはまだ始まっていません、 成功したコールのBeforeUpdate実装時ELはまた、：関数（）{}ときにデータの更新と呼ばれるが、更新された：関数（）{}関数はDOMコンポーネントに更新され、コンポーネントは、コールの後に更新します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{msg}}
</div>
<script type="text/javascript">
//生命周期钩子需要写在声明vue里面
var vm = new Vue({
el : "#app",
data : {
msg : "hi vue",
},
//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
beforeCreate:function(){
console.log('beforeCreate');
},
/* 在实例创建完成后被立即调用。
在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。
然而，挂载阶段还没开始，$el 属性目前不可见。 */
created :function(){
console.log('created');
},
//在挂载开始之前被调用：相关的渲染函数首次被调用
beforeMount : function(){
console.log('beforeMount');
},
//el 被新创建的 vm.$el 替换, 挂在成功
mounted : function(){
console.log('mounted');
},
//数据更新时调用
beforeUpdate : function(){
console.log('beforeUpdate');
},
//组件 DOM 已经更新, 组件更新完毕
updated : function(){
console.log('updated');
}
});
setTimeout(function(){
vm.msg = "change ......";
}, 3000);
</script>
</body>
</html>
変数名テキスト補間{{}}
ページには、次のような「タグに」V-HTML =を必要とする<p v-html="rawHtml"></p>
クラスまたはID =「クラス名またはIDセレクタ」：動的に値を変更Vバインド。
V-バインド：HREF =「URL "： ページへのジャンプ
、V-IF = ""
V-ELSE-IF = ""
V-ELSE =は""裁き
クリック@ = ""に対応したイベント機能をクリックし
@ click.stop =" 「：親は、自分自身の唯一の実装を実行されません。
Vue实例中有el,data,还有一个就是methods，用于定义函数，比如下面的点击事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<p v-if="seen">现在你看到我了</p>
<a v-bind:href="url">...</a>
<div @click.stop="click1">
<div @click="click2">
click me
</div>
</div>
<div @click="click3">
Don't click me or you will shadow the side
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
seen : true,
url : "https://cn.vuejs.org/v2/guide/syntax.html#%E6%8C%87%E4%BB%A4"
},
methods:{
click1 : function () {
console.log('click1......');
},
click2 : function () {
console.log('click2......');
},
click3:function(){
console.log('clickmmmmmm');
}
}
});
</script>
<style type="text/css">
</style>
</body>
</html>
6.レンダリングアレイ
V-ため=「項目は、インデックス中の配列名の定義」：キー=「インデックス」
V-ため=「アレイキー名で定義された値、」：属性抽出サイクル値の名前+
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item,index in items" :key="index">
{{index}}{{ item.message }}
</li>
</ul>
<ul>
<li v-for="value, key in object">
{{key}} : {{ value }}
</li>
</ul>
<ul>
<li v-for="value,key in lesson">
{{value}}
</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
items : [
{ message: 'Foo' },
{ message: 'Bar' },
{ message:'too far'}
],
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
},
lesson:{
titile:"高等数学",
author:"汪红"
}
}
});
</script>
</body>
</html>
