Vue
介绍
快速入门
入门详解
小结
指令介绍
指令演示
文本插值
绑定属性
条件渲染
列表渲染
事件绑定
表单绑定
小结
Element
介绍
快速入门
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<body>
<div id="div">
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
</div>
</body>
<script>
new Vue({
el: "#div"
})
</script> 基本使用
基础布局
容器布局
表单组件
表格组件
导航栏组件
小结
Vue高级使用
<body>
<div id="div">
<my-button>
</my-button>
</div>
</body>
<script>
Vue.component("my-button",{
data:function(){
return{
msg:"sdf"
}
},
template:"<button style='color:red'>{{msg}}</button>"
})
new Vue({
el:"#div"
})
</script> <body>
<div id="div">
<span>
{{name}}
</span>
<el-button @click="funget()" type="primary">
get()
</el-button>
<el-button @click="funpost()" type="primary">
post()
</el-button>
</div>
</body>
<script>
new Vue({
el:"#div",
data:{
name:"李四"
},
methods:{
funget(){
axios.get("testServlet?name="+this.name)
.then(resp =>{
alert(resp.data)
})
.chatch(error =>{
alert(error)
})
},
funpost(){
axios.post("testServlet","name="+this.name)
.then(resp =>{
alert(resp.data)
})
.chatch(error =>{
alert(error)
})
}
}
})
</script>
