vue学习记录 coderwhy d2

大胡子语法

v-once一次性绑定
v-html
text会覆盖所原来的数据
v-clock 避免抖动与{{ }}一起使用 原理：







数组语法，可以把class放进function进行return

<div id="app">

        总价是:{{getallprice}}
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                books: [{
                    id: 111,
                    name: 'test',
                    price: 120
                }, {
                    id: 112,
                    name: 'test1',
                    price: 122
                }, {
                    id: 113,
                    name: 'test2',
                    price: 123
                }],
                isRed: false,
                ccolor: '17px'
            },
            computed: {
                getallprice: function() {
                    let result = 0;
                    for (let i = 0; i < this.books.length; i++) {
                        result += this.books[i].price
                    }
                    return result
                }

            },
            methods: {
                bianse: function() {
                    this.movies[index].isRed = !this.movies[index].isRed;
                }

            }
        })

计算属性性能比方法更好（有数据缓存，不会重复计算

const cpn = Vue.extend({
template:` `
})
//注册
View.componet('cpn',cpn)
//注册
components:{
cpn:cpn,
cpn1:cpn1
}

props不要使用驼峰标识

默认插槽