Vue.jsの基本知識-scriptタグに基づいて導入

1、Scriptタグを使ってvueを導入する方法

vue.jsファイルをプロジェクトディレクトリにダウンロードします.デバッグ ではvueを する.js、 はvueを する.min.js 2、コンポーネントにはトップクラスのコンテナが で、Vueの はこのコンテナ にある があります.

   

        ...
    

3、vueコンポーネントの .vueコンポーネントコードは、 のhtmlのscriptタグに もよいし、1つに で もよい.jsファイルではhtmlでscriptタグで します.

    
        var comName=new Vue({
            el:"#myApp,
            data:{
                json     ， 
                msg:"abc"
            },
                ……
            })
    

4、コンテナラベルコンテンツデータのバインド(宣言レンダリング)

    

        
{{msg}}
    

5、コンテナラベル属性データのバインド(属性値レンダリング)

ここで、v-bind:6、フォームラベル値の双方向バインド(双方向データバインド)と略記可能

7、条件、よく異なるビュー間の切り替え

ここで、msgは、コンポーネント定義コードのdata内の変数8、ループであり、データのセットを動的に生成するために使用される.例:

        
2018     
        

            

                {{game.title}}/{{game.price}}
            
        
    
    
        var my = new Vue({
            el: "#myapp",
            data: {
                seen: true,
                games: [
                    { title: "     ", price: 100.00 },
                    { title: "     ", price: 200.00 }
                ]
            }
        })
    

9、ajax技術を使用してバックエンドからデータを取得する.Vue自体はjQueryのようにajaxメソッドを持っていないので、他のajaxプラグインを借りる必要があります.公式の推奨ではaxiosを使用し、対面ページに導入する必要があります.例:

        

            

                {{item.name}}-{{item.age}}-{{item.birth}}
            
        
    

    
        var myApp = new Vue({
            el: "#myApp",
            data:{
                receivedData:[] //                   
            },
            methods:{
                //      ，    ajax      
                getInfo(){ 
                    axios.get('../data.json')
                    .then(res=>{
                        this.receivedData=res.data //                
                    })
                },
                //      ，          a   href   
                genHref(data)
                {
                    return("read.html?id="+data)
                }
            },
            mounted(){ //                
                this.getInfo()
            }
        })
    

まだ終わっていないので、勉強を続ける時間があります.