vue.js学習(一)

vue.js学習:
1、vue.jsは何ですか.
私たちは新しい技術を学ぶには、まずそれが何なのかを明らかにしなければなりません.vue.jsの著者は彼をこう紹介した:Vue.jsはユーザインタフェースを構築する漸進的なフレームワークである.vueのコアライブラリは、ビューレイヤのみに注目します.vue.jsの目標は,応答のデータバインドと組合せのビューコンポーネントを可能な限り簡単なAPIにより実現することである.
2、vue.jsの使用
まず私たちが知っているのはvueです.jsの互換性は、vueのため、IE 8と以下のバージョンをサポートしていません.jsは、IE 8ではシミュレーションできないECMAScript 5の特性を使用するので、vue.jsはECMAScript 5対応のすべてのブラウザをサポート
http://cn.vuejs.org/v2/guide/installation.htmlここでvueをダウンロードできます.jsファイルは、開発バージョンと生産バージョンに分けられます.両者の違いは、開発時に開発バージョンを使ったほうがいいということです.このように誤ったヒントがあり、生産上に置くと生産バージョンがコンパクトになります.
このようにhtmlページでjsライブラリを使用するようにvueを導入するだけです.jsファイル:<scriptsrc="vue.js">script>

次にvueを用いて開発できる

3、コンストラクタ

各vue.jsアプリケーションは、コンストラクション関数VueによってVueのルートインスタンスを作成することによって開始される

内で開始:

 window.onload=function(){ var v=new Vue({ //操作}) }  
  
4、属性与方法
 
  
在上面构造器的内部我们一般会用到几个部分分别是el data methods filters
 
  
data指的是数据部分，methods指的是方法部分，filters指的是过滤器，具体的写法如下：
 
  


    window.onload= function () {
        new Vue({
            el:'#box',
            data:{
                myData:[],
                t1:'',
                now:-1
            },
            methods:{
                get: function (ev) {
                  
                },
                changeDown: function () {
                  
                },
                changeUp: function () {
                   
                }
            }，
            filters:{
            }
        })
    }


        new Vue({
            el:'#box',
            data:{
                myData:[],
                t1:'',
                now:-1
            },
            methods:{
                get: function (ev) {
                  
                },
                changeDown: function () {
                  
                },
                changeUp: function () {
                   
                }
            }，
            filters:{
            }
        })
    }
  
5、テンプレート構文

私たちの上のdataデータに関連しているのはテンプレートです.vue.jsはHTMLベースのテンプレート構文を使用し、開発者がDOMを最下位のVueインスタンスを指すデータにバインドすることを宣言します.
 
データバインディングの最も一般的な形式は「Mustache"構文は二重括弧のテキスト補間であり、使い方は以下の通りである:

dataでmsgデータ
を定義したとします.
data:{msg:"helloworld!"}
  
htmlには
と書くことができます
msg   ：{{msg}}
  
括弧でmsgを包むとhtmlのmsgがdataのmsgにバインドされ、dataのmsgが対応するhtmlのmsg値を変えると変化します.
 
もちろん、dataのデータが変更されたときにhtmlのデータが変更されないのは初めてです.v-onceコマンドを追加する必要があります.
msg   ：{{msg}}
  
また、私たちのmsgにはhtmlコンテンツが保存されることもあります.例えば、
helloworld!このとき,ページに正確な解析があることを望んでいる.しかし、私たちが直接{{msg}}を使うと、ページ上の結果はhelloworld!私たちが望むように表示されていませんvue.jsはv-htmlコマンドは、h 1のフォーマットでhelloworldを表示できます!使用コードは以下の


    {{msg}}
    



    window.onload= function () {
        new Vue({
            el:'#box',
            data:{
                msg:'<h1>hello world</h1>'
            }
        })
    }




    {{msg}}
    



    window.onload= function () {
        new Vue({
            el:'#box',
            data:{
                msg:'<h1>hello world</h1>'
            }
        })
    }