初识VUE

一、什么是VUE？

以数据驱动的WEB渐进式框架

二、VUE的优点

1、可以完全通过客户端浏览器渲染页面，服务器端只提供数据
2、方便构建单页面应用程序（SPA）

三、引入Vue

<div id="app">
    <p title="p"></p>
    <p v-bind:title='title'></p>
</div>
<script type="text/javascript" src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            title: 'vue-p'
        }
    })
</script>

四、Vue实例

• 实例：el

<div id='app'>
    
</div>
<script>
    new Vue({
        el: '#app'
    })
</script>

• 数据：data

<div id='app'>
    <p v-text='msg1'></p>
    <p>{{ msg2 }}</p>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            msg1: '段落1',
            msg2: '段落2'
        }
    })
</script>

• 方法：methods

<div id='app'>
    <p v-on:click='func'>{{ msg }}</p>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: '段落'
        },
        methods: {
            func: function() {
                alert(this.msg)
            }
        }
    })
</script>

• 计算属性：computed

<div id='app'>
    <div>
        姓：<input type='text' v-model='first_name'>
    </div>
    <div>
        名：<input type='text' v-model='last_name'>
    </div>
    <div>
        全名：<input type='text' v-model='full_name'>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            first_name: '',
            last_name: ''
        },
        computed: {
            full_name: function() {
                return this.first_name + this.last_name
            }
        }
    })
</script>

• 监听器：watch

<div id='app'>
    <div>
        姓名：<input type='text' v-model='full_name'>
    </div>
    <p>姓：{{ first_name }}</p>
    <p>名：{{ last_name }}</p>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            full_name: '',
            first_name: '',
            last_name: ''
        },
        watch: {
            full_name: function() {
                this.first_name = this.full_name.split(' ')[0];
                this.last_name = this.full_name.split(' ')[1];
            }
        }
    })
</script>

• 分隔符：delimiters

<div id='app'>
    ${ msg }
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'message'
        },
        delimiters: ['${', '}']
    })
</script>

• 实例对象使用成员属性与方法

<script>
    var app = new Vue({
        el: '#app',
        data: {
            msg: 'message'
        }
    })
    console.log(app)
    console.log(app.$el)
    console.log(app.$data.msg)
    console.log(app.msg)
</script>