学習資料
慕課網-vue 2.5はじめに
基礎文法
サンプルコード1

    
hello {{msg}}


    new Vue({
        el: "#root",
        template: '<h1>hello {{msg}}</h1>',
        data: {
            msg: "world"
        }
    })

マウントポイント:vueインスタンスバインドdomノードvueインスタンスバインドdomノード
テンプレート:マウントポイント出力の内容は、マウントポイント内部で直接記述したり、templateプロパティで実現したりすることができます.
サンプルコード1のdivタグ内部の hello {{msg}}とvueのtemplate: '

hello {{msg}}

'の効果は一致する
例:マウントポイントの指定、テンプレートの指定、データのバインド後、テンプレートとデータを自動的に結合して最終的に表示するコンテンツを生成し、マウントポイントに配置できます.
補間式:2つのカッコで1つの変数をラップ
{msg}}は補間式です
サンプルコード2

    



    new Vue({
        el: "#root",
        data: {
            msg: "<h1>hello</h1>"
        },
        methods: {
            handleClick: function () {
                this.msg = 'world'
            }
        }
    })

指令

• v-html: 以html格式解析变量
• v-text: 以文本格式输出变量
• v-on: 事件绑定，简写为@
• v-bind: 属性绑定，简写为:
• v-model: 双向数据绑定
• v-if: 不符合条件时整个元素dom都清除，符合条件时再重新创建该dom
• v-show: 不符合条件时，dom元素增加display:nonecss属性，
• v-for: 用法(item, index) in/of list，item是元素列表每个元素值，index是每个元素的索引值

事件

click就是一个点击事件, v-on:click表示绑定一个点击事件，简写方式为@click

示例代码3

    

    
    
{{content}}



    new Vue({
        el: "#app",
        data: {
            msg: 'hello world',
            title1: 'this is a title',
            content: 'this is content'
        },
        methods: {
            handleClick: function () {
                this.msg = 'ready to learn'
            }
        }
    })

双方向データバインド:ページデータが変化すると、変数の値も同時に変化します.
サンプルコード4

      
      
    
{{fullName}}



    new Vue({
        el: "#app",
        data: {
            firstName: '',
            lastName: '',
        },
        //     
        computed: {
            fullName : function () {
                return this.firstName + ' ' + this.lastName
            }
        },
        //    
        watch: {
            firstName: function () {
                this.count ++
            },
            lastName: function () {
                this.count ++
            },
            //   
            fullName: function () {
                this.count ++
            },
        }
    })

計算プロパティ:1つのプロパティの値は、他のプロパティによって計算されます.
リスナー:プロパティの変更をリスニングしてデータ処理
サンプルコード5

      
    

         {{item}}
    

new Vue({
el: "#app",
data: {
todo: '',
todoList: []
},
methods: {
submit: function () {
this.todoList.push(this.todo)
this.todo = ''
}
},
})
効果図

リストに要素を追加する:push()

コンポーネント
ページの一部
≪グローバル・コンポーネント｜Global Components｜ldap≫:マウント・ポイントで直接使用可能

Vue.component('todo-item', {
    template: "
item
"
})

ローカルコンポーネント:マウントポイントで使用するには、インスタンスで宣言する必要があります.

var TodoItem = {
    template: "
item
"
}
new Vue({
    // ...
    //       
    components: {
        'todo-item': todoItem
    },
    // ...
})

コンポーネント値:外部から渡された属性値を受信
がいぶでんち

コンポーネント受信

Vue.component('todo-item', {
    props: ["content"],
    template: "
{{content}}
"
})

親子コンポーネント通信:
子コンポーネント=>親コンポーネント:子コンポーネントはサブスクリプション・モードをパブリッシュして親コンポーネントにデータを渡します.
親コンポーネント=>子コンポーネント:親コンポーネントのテンプレートに属性を追加し、子コンポーネントに属性を受信します.
親コンポーネントのテンプレートでサブコンポーネントテンプレートを使用するには、次の手順に従います.

サブアセンブリ:

Vue.component('todo-item', {
    //      
    props: ["content", "index"],
    template: "
{{content}}
",
    methods: {
        //        checkout  
        checkout: function () {
            //       ,   delete  
            this.$emit('delete', this.index)
        }
    }
})

親コンポーネント:

new Vue({
    el: "#app",
    data: {
        todo: '',
        todoList: []
    },
    methods: {
        submit: function () {
            this.todoList.push(this.todo)
            this.todo = ''
        },
        checkout: function (index) {
            this.todoList.splice(index, 1)
        }
    },
})