测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div> 定义一个app方法
<script src="js/vue.js"> 定义vue路径
new Vue({ 定义一个函数方法
el: "#app",
})
</script>
</body>
</html>
第一步准备好三要素
第二注意组件中的函数必须是一个匿名函数
简单的调用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<demo></demo> 调用方法
</div>
<script src="js/vue.js"></script>
<script>
Vue.component('demo',{
template:"<div>{{ msg }}</div>",
methods:{
},
data:function () {
return {
msg:"msg组件",
}
}
})
new Vue({
el: "#app",
})
</script>
</body>
</html>
转换后的代码前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="js/index.css">
</head>
<body>
<div id="app">
<div>
<el-form :inline="true" :model="searchFrom" class="demo-form-inline">
<el-form-item >
<el-input v-model="searchFrom.search" placeholder="请输入搜索内容"></el-input>
</el-form-item>
<!--<el-select v-model="formInline.region" placeholder="活动区域">-->
<!--<el-option label="区域一" value="shanghai"></el-option>-->
<!--<el-option label="区域二" value="beijing"></el-option>-->
<!--</el-select>-->
<el-form-item>
<el-button type="primary" @click="search">查询</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="add">添加</el-button>
</el-form-item>
</el-form>
</div>
<div></div>
<div></div>
</div>
<script src="js/vue.js"></script>
<script src="js/index.js"></script>
<!--写我们自己的java js代码-->
<script>
new Vue({
el: '#app',
data: {
searchFrom: {
search: '',
}
},
methods: {
search(){
console.log('search!');
},
add(){
console.log('add');
}
}
})
</script>
</body>
</html>
根据需求写一个前端页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="js/index.css">
</head>
<body>
<div id="app">
<div>
<el-form :inline="true" :model="searchFrom" class="demo-form-inline">
<el-form-item >
<el-input v-model="searchFrom.search" placeholder="请输入搜索内容"></el-input>
</el-form-item>
<!--<el-select v-model="formInline.region" placeholder="活动区域">-->
<!--<el-option label="区域一" value="shanghai"></el-option>-->
<!--<el-option label="区域二" value="beijing"></el-option>-->
<!--</el-select>-->
<el-form-item>
<el-button type="primary" @click="search">查询</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="add">添加</el-button>
</el-form-item>
</el-form>
</div>
<div>
<el-table
:data="tableData"
style=" 100%">
<el-table-column
label="id"
prop="id">
</el-table-column>
<el-table-column
label="参数名称">
<template slot-scope="scope">
<span>{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column
label="描述"
prop="desc">
</el-table-column>
<el-table-column
label="参数值"
prop="value">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">编辑
</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div></div>
</div>
<script src="js/vue.js"></script>
<script src="js/index.js"></script>
<!--写我们自己的java js代码-->
<script>
new Vue({
el: '#app',
data: {
searchFrom: {
search: '',
},
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
id: '2016-05-01',
name: '王小虎',
value: '上海市普陀区金沙江路 1519 弄',
desc:'cdssad'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
},
methods: {
search(){
console.log('search!');
},
add(){
console.log('add');
},
handleEdit(index, row) {
console.log(index, row);
},
handleDelete(index, row) {
console.log(index, row);
}
}
})
</script>
</body>
</html>
