Vue的学习

首先先放一个基本的简单的实例vue对象：

<div id="app">
    <p>{{msg}}</p>
</div>
<script>
    //创建一个Vue是咧
    //当我们导入包之后，在浏览器的内存中，就多了一个vue构造 函数
    //注意 ：我们new 出来的这个vm对象，就是我们MVVM中的VM调度者
    var vn = new Vue({
        el: '#app',  //表示我们new的这个vue实例 要控制页面上的哪个区域
        //这里的data就是MVVM中的M 专门用来保存每个页面的数据
        data: {  //data属性中，存放的是el中要用到的数据
            msg: '欢饮学习Vue'  //通过vue提供的指令，很方便的就能把数据渲染到页面上，程序员不用手动操作DOM元素了
            //【前端的vue之类的框架，不提倡我们去手动操作DOM元素了】
        }
    })
</script>

通过 el 中的元素查找来实现对内容的填写。

v-cloak v-html v-bind（绑定）v-text:

<div id="app">
    <!--使用v-cloak能够解决 插值表达式闪烁问题-->
    <p v-cloak>{{msg}}</p>
    <!--默认v-text 没有闪烁问题-->
    <!--v-text会覆盖元素中原本的内容，但是插值表达式 只会替换自己的占位符不会吧整个元素替换  -->
    <h4 v-text="msg"></h4>
    <div v-html="msg2"></div>
    <!--v-bind:是vue中，提供的用于绑定的属性的指令-->
    <!--注意： v-bind: 可以简写为 : 要绑定的属性-->
    <!--v-bind 可以写合法的js表达式-->
    <input type="button" value="fox" v-bind:title="mytitle"/>
</div>
<script src="../js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'fox123',
            msg2: '<h1>哈哈 我是一个大大的h1</h1>',
            /**
             * 使用了一个v-bind 绑定属性
             */
            mytitle:'这是自己定义的属性'
        }
    })
</script>

v-on 事件的绑定(缩写是@)

 <div id="app">
        <!--使用v-cloak能够解决 插值表达式闪烁问题-->
        <p v-cloak>{{msg}}</p>
        <!--默认v-text 没有闪烁问题-->
        <!--v-text会覆盖元素中原本的内容，但是插值表达式 只会替换自己的占位符不会吧整个元素替换  -->
        <h4 v-text="msg"></h4>
        <div v-html="msg2"></div>
        <!--v-bind:是vue中，提供的用于绑定的属性的指令-->
        <!--注意： v-bind: 可以简写为 : 要绑定的属性-->
        <!--v-bind 可以写合法的js表达式-->
        <!--vue中提供了v-on：时间绑定机制-->
        <!--<input type="button" value="fox" v-bind:title="mytitle"/>-->
        <input type="button" value="按钮" v-on:click="show"/>
    </div>
<script src="../js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'fox123',
            msg2: '<h1>哈哈 我是一个大大的h1</h1>',
            /**
             * 使用了一个v-bind 绑定属性
             */
            mytitle:'这是自己定义的属性'
        },
        methods: {  //这个methods属性中定义了当前vue实例所有可用的方法
            show: function() {
                alert('Hello');
            }

        }
    })
</script>