// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
//在这里可以引用第三方模块
import 'bootstrap/dist/css/bootstrap.css'Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#app',components: { App },template: '<App/>'
})

<template><div id="app" class="container"><h1>{{text}}</h1></div>
</template><script>export default{name :'app',data(){return{text:"hello,Vue"}}}
</script>

data(){return{text:"hello,Vue",stus:[{sid:11,name:'小明11',age:21},{sid:12,name:'小明12',age:22},{sid:13,name:'小明13',age:23}, {sid:14,name:'小明14',age:24}, {sid:15,name:'小明15',age:25}, {sid:16,name:'小明16',age:26}, {sid:16,name:'小明16',age:26}, ] } }

 <div v-for="stu in stus" :key="stu"><h4>{{stu.name}}</h4></div>

<div v-for="(stu,index) in stus" :key="stu"><h4>{{index}}  {{stu.name}}</h4></div>

<tr v-for="(p,attr) in person" :key="p"><td>{{attr}}</td><td>{{p}}</td></tr>person:{name:'张三',gender:'男',age:30,height:170,weight:200, }

 <div v-for="(stu,index) in stus" :key="stu"><h4>这是第{{index}}个学生</h4><table class="table table-bordered table-hover"><tr v-for="(p,attr) in stu" :key="p"><td>{{attr}} {{stu.name}}</td></tr></table></div>

<input type="text" class="form-control" v-model="user.name"><h4>{{user.name}}</h4>

user:{name:'',pwd:''
}

 methods:{MyLogin(){if(this.user.name==="admin"&&this.user.pwd==="123456"){alert("登录成功");}}}

<h3 v-if="age<16">少年</h3><h3 v-else-if="age<30">青年</h3><h3 v-else-if="50">中年</h3><h3 v-else>老年</h3>

 <h3 v-show="age<30">小于30岁</h3><h3 v-show="age>30">大于30岁</h3>