解读Vue实例的属性及模板渲染

<div id="xxx"></div>
<script>
    var vm = new Vue({
        el: "#xxx" // xxx为id名
    })
</script>

<div id="xxx"></div>
<script>
    var vm = new Vue({
        el: "#xxx",
        data: {
        	健: 值
        }
    })
</script>

<div id="app">
    <h2>{{message}}</h2>
    <input type="text" v-model="message">
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "橘猫吃不胖"
        }
    })
</script>

<div id="xxx"></div>
<script>
    var vm = new Vue({
        el: "#xxx",
        computed: {
        	方法名: function () {}
        }
    })
</script>

<div id="app">
    <table>
        <tr>
            <td>姓名：</td>
            <td>{{name}}</td>
        </tr>
        <tr>
            <td>生日：</td>
            <td>{{getBirthday}}</td>
        </tr>
    </table>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            name: "橘猫吃不胖",
            birthday: 1014228510514 // 传了一个毫秒数
        },
        computed: { // 计算属性，对data中的数据进行处理
            getBirthday: function () { // getBirthday就是表格中的{{getBirthday}}，其本质是一个属性
                let date = new Date(this.birthday);
                return date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日";
            }
        }
    })
</script>

<div id="app">
    姓：<input type="text" v-model="xing"><br><br>
    名：<input type="text" v-model="ming"><br><br>
    你的姓名是：{{fullName}}
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            xing: "", // 初始值为空
            ming: ""
        },
        computed: {
            fullName: {
                get() {
                    return this.xing + "-" + this.ming; // 返回值为全名
                },
                set(value) {
                    let arr = value.split("-");
                    this.xing = arr[0];
                    this.ming = arr[1];
                }
            }
        }
    })
</script>

<div id="xxx"></div>
<script>
    var vm = new Vue({
        el: '#xxx',
        methods: {
            方法名: function () { }
        }
    })
</script>

<div id="app">
    <p>原始字符串："{{ message }}"</p>
    <p>反向字符串："{{ reversedMessage()}}"</p>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: '橘猫吃不胖'
        },
        methods: {
            reversedMessage: function () {
                return this.message.split('').reverse().join('')
            }
        }
    })
</script>

    <div id="wrap">
        <p>你的名字是{{list.name}}</p>
    </div>
    <script>
        var list = {
            name: "donna",
            age: 20
        }
        var vm = new Vue({
            el: "#wrap",
            data: { list }
        });
    </script>

    <div id="app"></div>
    <script>
        let obj = {
            content: "橘猫吃不胖"
        }
        let str = `<div>Hello {{content}}</div>`;
        new Vue({
            el: "#app",
            data: obj,
            template: str
        })
    </script>

    <div id="app"></div>
    <script type="x-template" id="test">
        <div>
            <p>姓名：{{obj.name}}</p>
        </div>
    </script>
    <script>
        let obj = {
            name: "张三"
        }
        new Vue({
            el: "#app",
            data: { obj },
            template: "#test"
        })
    </script>

render(createElement){ 
	createElement(标签名,[数据对象],子元素)//子元素为数组或对象
}

class:{ }, //绑定class
style:{ }, //绑定样式，
attrs:{ }, //添加行间属性
domProps:{ }, //DOM元素属性
on:{ }, //绑定事件

    <div id="app"></div>
    <style>
        .bg {
            background-color: pink;
        }
    </style>
    <script>
        new Vue({
            el: "#app",
            render(createElement) {
                return createElement(
                    "ul",
                    {
                        class: { bg: true },
                        style: { listStyle: "none" },
                        attrs: {
                            name: "tt"
                        }
                    },
                    [
                        createElement("li", "苹果"),
                        createElement("li", "香蕉"),
                        createElement("li", "橘子")
                    ]
                )
            }
        })
    </script>

new Vue({
	...
    watch: {
    	// 值为回调函数形式，newVal表示新的值，oldVal表示旧的值
        要监视的数据: function (newVal, oldVal) { }
        // 值为方法名形式：
        要监视的数据: "methods中声明的方法名"
        // 值为包含额外选项的对象：
        要监视的数据: {
        	immediate: xxx,
        	handler(newVal, oldVal) {},
        	deep: xxx,
        }
    }
})

<div id="app">
    <button @click="a--">减1</button>
    <p>{{message}}</p>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            a: 10,
            message: " ",
        },
        watch: {
            a: function (val, oldVal) {
                this.message = "a的原值是：" + oldVal + "，a的新值是：" + val;
            }
        }
    })
</script>

// 完整形式
const vm = new Vue({ })
// unwatch：取消观察函数
let unwatch = vm.$watch("要监视的对象", {
    immediate: true, // 配置一些属性
    ...
    handler(newVal, oldVal) { // 回调函数
    	unwatch(); // 停止监听对象
    }
})
// 简写形式
const vm = new Vue({ })
// unwatch：取消观察函数
let unwatch = vm.$watch("要监视的对象", function (newVal, oldVal) {}
})

<div id="app">
    <button @click="a--">减1</button>
    <p>{{message}}</p>
</div>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            a: 10,
            message: " ",
        }
    })
    let unwatch = vm.$watch("a", {
        handler(val, oldVal) {
            if (val === 5) {
                unwatch();
            }
            this.message = "a的原值是：" + oldVal + "，a的新值是：" + val;
        }
    })
</script>

    <div id="app">
        <template v-if="yes">
            <h2>vue</h2>
        </template>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                yes: true
            }
        })
    </script>

<div class="app">
    <ul>
        <li v-for="item in items">{{item.text}}</li>
    </ul>
</div>
<script>
    new Vue({
        el: '.app',
        data: {
            items: [
                { text: 'Name'},
                { text: 'Age'},
                { text: 'Like'}
            ]
        }
    })
</script>

<div class="app">
    <ul>
        <li v-for="item in obj">{{item}}</li>
    </ul>
</div>
<script>
    new Vue({
        el: '.app',
        data: {
            obj: {
                firstname: '欧阳',
                lastname: '静静',
                age:18
            }
        }
    })
</script>