1.コンセプト
2.クイックスタート
新しいプロジェクトを作成し、静的Webタイプのプロジェクトを選択します。
2.1vueをインストールする
npmを使用してvue.jsをインストールします。save
は部分的なインストールを表します
2.2双方向バインディングとイベント処理のクイックスタートデモ
プロジェクトディレクトリに直接新しいHTMLファイル01-demo.htmlを作成します。
vue_day1/01_vuedomeo.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue01测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="num"><button v-on:click="num++">点我</button>
<h2>{
{name}} 非常好!</h2><h2> 有{
{num}}个酷炫学科</h2>
</div>
<script type="text/javascript">
var app1=new Vue({
el:"#app", //el即element，要渲染的页面元素
data:{
name:"喜洋洋",
num:1
}
})
</script>
</body>
</html>
実行するアイデアの右側にあるブラウザボタンをクリックします。
最初に新しいVue（）
を介してVueインスタンスを作成し、次にコンストラクターがいくつかの属性を持つオブジェクトを受け取ります
。el：は要素の省略形で、ページ要素を選択してidでレンダリングされ
ます。この例では、div data：dataです。データはオブジェクトです。ビューにレンダリングできる多くの属性があります。name
：これ
はh2要素で指定されたname属性です。ページ上で、{
{name}}を使用して、定義したばかりのname属性をレンダリングします
新しい属性がデータに追加されます。num
にはページ上に入力要素があり、v-modelを介してnumにバインドされています。
同時に、
ページ出力の{ {num}}を介して
、入力ボックスの変更によりデータのnumが変更され、ページ出力も変更されることがわかります。
入力はnumにバインドされ、入力の値が変更されます。これは、データ内のnumの値に影響します。
ページ{
{num}}はデータnumにバインドされるため、numの値が変更され、ページ効果が変化します。
dom操作がない場合、これが双方向バインディングの魅力です。
ここでは、通常のonclickの代わりにv-on命令を使用してクリックイベントをバインドし、numを直接操作します。
通常のonclickはnumを直接操作できません。
3つ、ライフサイクルとフック関数、通常の方法
通常の機能：
クリック直後に「メソッド名」を（）なしで書くだけ
通常の関数とフック関数を示しましょう。
このフック関数を設定してもエラーは報告されません。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>钩子函数</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app2">
<button v-on:click="add">点我</button>
<br>
{
{msg}}
</div>
<script type="text/javascript">
var app1=new Vue({
el:"#app2", //el即element，要渲染的页面元素
data:{
//初始化为空
msg:""
},
//普通函数
methods:{
add:function () {
console.log("点我了，...123")
}
},
//钩子函数
created(){
this.msg="hello vue .created";
}
});
</script>
</body>
</html>
