<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 版权协议，转载请附上原文出处链接和本声明。