vue.js基本语句

  • Post author:
  • Post category:vue



<body>
    <div id="app">
        <!-- 双花括号 里面写的是 js 表达式(有确定返回值的语句) -->
        <h1>{{msg}}</h1>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        // 用vue的构造函数 创建一个对象/ 实例
        // option 选项
        // var vm = new Vue({
        //     template: `<h1>Hello world</h1>`, //模板
        // })
        // vm.$mount('#app')

        // vue可以把自己内部的template编译成标准的html dom 元素
        // var vm = new Vue({
        //     el: '#app',
        //     template: `<h1>Hello world</h1>`,  //模板
        // })

        // 我们要学的是vue中模板语法
        // var vm = new Vue({
        //     el: '#app',
        //     template: `
        //     <div>
        //         <h1>{{msg+'123'}}{{msg1}}</h1>
        //         <h1>{{msg1}}</h1>
        //     </div>`,  //模板
        //     data:{
        //         msg:'Hello Vue',
        //         msg1:'好开心'
        //     }
        // })

        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue'
            }
        })
    </script>
</body>

v-for指令

<body>
    <!-- Vue 中提供的模板 指令 v-xxx -->
    <div id="app">
        <h1>{{msg}}</h1>
        <ul>
            <!-- v-for  循环遍历li 生成6个li标签-->
            <li v-for="item in 6"></li>
        </ul>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                msg:'Hello World'
            }
        })
    </script>
</body>



版权声明:本文为Hulu_god原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。