VUEプライマリトライアル1

環境設定

ノードとNPM

NPMは、Nodeが提供するモジュール管理ツールです。Jquery、AngularJS、VueJなどの多くのフロントエンドフレームワークをダウンロードしてインストールすると非常に便利です。後の学習の便宜のために、最初にノードとNPMツールをインストールします。

Node.jsをダウンロード

ダウンロードアドレス：https：//nodejs.org/en/
完成以后，在控制台输入： node -v
ここに画像の説明を挿入

NPM

ノードにはNPMが付属していnpm -vます。コンソールに入力して表示します
ここに画像の説明を挿入
npm install nrm -g

ここに画像の説明を挿入次に、nrm lsコマンドを使用してnpmリポジトリのリストを表示します。*が付いているものは現在選択されているミラーリポジトリです

。passnrm use taobaoを使用して使用するミラーソースを指定します。
ここに画像の説明を挿入次にpassnrm test npmを使用して速度をテストします。

VUEをインストールする

Vueをインストールし、次のコマンドを入力します：npm install vue --save
ここに画像の説明を挿入
単一のバインディングコードの表示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>简单学习一门前端语言，这门语言叫做{
   
   {name}}</h2>
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<!--<script src="node_modules/vue/dist/vue.js"/>这样写VUE无法渲染-->
<script>
    const demo = new Vue({
     
     
        el: "#app",
        data: {
     
     
            name: "VUE"
        }
    });
</script>
</html>

vモデルの双方向バインディング

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input v-model="num"/>
    <h2>简单学习一门前端语言，这门语言叫做{
   
   {name}}</h2>
    <h3>我需要学习更多的语言，与时俱进</h3>
    <h4>{
   
   {num}}加油</h4>
    <button v-on:click="num++" >点我</button>

</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    const demo = new Vue({
     
     
        el: "#app",
        data: {
     
     
            name: "VUE",
            num:1
        }
    });
</script>
</html>

Vue作成インスタンス

コンストラクターでオブジェクトを
渡し、Vueに必要なさまざまなデータとメソッドをオブジェクトで宣言します。これには次のものが含まれます。1.el;
var vueLe = new Vue(le:"#app") <div id="app"></div>
2.dataなどのテンプレート要素を指定する;ビューレンダリングデータ用。例えば：

   <script src="node_modules/vue/dist/vue.js"></script><script>
   const demo = new Vue({
     
     
       el: "#app",
       data: {
     
     
           name: "VUE",
           num:1
       }
   });
</script>   
<div id="app">{
   
   {name}}</div>

			  3.methods:方法；

<script src="node_modules/vue/dist/vue.js"></script><script>
<script>
var vm = new Vue({
     
     
    el:"#app",
    data:{
     
     
        num: 0
    },
    methods:{
     
     
        add:function(){
     
     
            // this代表的当前vue实例
            this.num++;
        }
    }
})
</script>
<div id="app">
    {
   
   {num}}
    <button v-on:click="add">加</button>
</div>