Vue入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入js，使用CDN方式-->
    <script src=" https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!--{{ }} 用于输出对象属性和函数返回值-->
        <p>{{ message }}</p>
        <p>{{ myFun() }}</p>

        <!--v-html 指令用于输出 html 代码-->
        <div v-html="message"></div>

        <!--v-model数据绑定-->
        <input type="text" v-model="message"/>

        <!--v-bind 指令被用来响应地更新 HTML 属性-->
        <input type="text" v-bind:placeholder="message"/>
        <!--v-bind 缩写-->
        <input type="text" :placeholder="message"/>

        <!--v-if：指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素-->
        <p v-if="seen">seen的值为true</p>
        <p v-else="seen">seen的值为false</p>
        <!--v-show-->
        <h1 v-show="show">show Hello!</h1>

        <!-- v-on 指令，它用于监听 DOM 事件-->
        <button v-on:click="add">点我+1</button>
        <!-- v-on 缩写-->
        <button @click="sub">点我-1</button>
        <span>{{count}}</span>

        <!--v-for循环： site in sites -->
        <ol>
            <li v-for="site in sites">
                {{ site.name }}
            </li>
        </ol>
        <!--v-for循环对象-->
        <ul>
            <li v-for="(value, key, index) in object">
                {{ index }}. {{ key }} : {{ value }}
            </li>
        </ul>
        <ul>
            <li v-for="n in 5">
                {{ n }}
            </li>
        </ul>
    </div>

    <script>
        var vm = new Vue({//实例化 Vue
            el:‘#app‘,//el: DOM 元素中的 id
            data:{//data 用于定义属性
                message:‘hello vue‘,
                seen: false,
                count:0,
                show:true,
                sites: [
                    { name: ‘Runoob‘ },
                    { name: ‘Google‘ },
                    { name: ‘Taobao‘ }
                ],
                object: {
                    name: ‘菜鸟教程‘,
                    url: ‘http://www.runoob.com‘,
                    slogan: ‘学的不仅是技术，更是梦想！‘
                }
            },
            methods:{//methods 用于定义的函数，可以通过 return 来返回函数值
                myFun:function () {
                    return ‘function test‘;
                },
                add:function () {
                    return vm.count++;
                },
                sub:function () {
                    return vm.count--;
                }
            }
        });
        console.log(vm.message);//vm.data对象中的属性
        console.log(vm.$data);//vm.$data,Vue实例的属性data对象
        console.log(vm.$el);//vm.$el,获取DOM
    </script>
</body>
</html>