第一步:构建一个简单的 vue 项目,老规矩直接在命令行输入 vue init webpack myproject cd my vue cnpm/npm install cnpm/npm run dev 执行结果如下 然后你会在 8080 端口看到 vue 的标志页面 第二步:分析目录结构 主要是组件入口 app.vue 和 main.js 第三步:写页面 我们在 app.vue 下这样写
- <template>
- <div id="wrapper">
- <router-view></router-view>
- </div>
- </template>
- <script>
- export default {
- data () {
- return {
- }
- },
- components: {
- }
- }
- </script>
在 main.js 中这样写
- import Vue from 'vue'
- import App from './App'
- import Home from './pages/Home.vue'
- import VueRouter from 'vue-router'
- import 'bootstrap/dist/CSS/bootstrap.css'
- Vue.use(VueRouter)
- const routes = [{
- path: '/',
- component: Home
- }]
- const router = new VueRouter({
- routes
- })
- /* eslint-disable no-new */
- new Vue({
- el: '#app',
- router,
- template: '<App/>',
- components: { App }
- })
main.js 主要包括模块导入以及组件导入和注册,路由配置,当然路由配置可以单独写出来。 由上面的路由配置可以知道当 path 为'/'时候,我们渲染到 app.vue 中的页面为 home.vue 页面,如下
- <template>
- <div class="jumbotron">
- <h1>
- 这个是路由对应的页面,下面就是一个表格组件
- </h1>
- <table-com/>
- </div>
- </template>
- <script>
- import table from '../components/Hello.vue'export
- default {
- data() {
- return {}
- },
- components: {
- tableCom: table
- }
- }
- </script>
其中 import table from '../components/Hello.vue'表示导入这个 table 组件到 home.vue 页面 但是只导入而没有注册这个组件是无效的,就好像定义了一个函数而没有执行。所以我们需要注册这个组件 也就是 components:{tableCom: table} 意思是自定义一个 tableCom 标签来映射这个组件,但是 vue 规定但标签名过长的时候,需要以分开方式去写比如 tableCom 要写成 table-com. 这样就完成了一个组件的导入和注册,下面我们来完成这个组件 table.vue 界面如下
- <template>
- <div style="padding:20px;" id="app">
- <div class="panel panel-primary">
- <div class="panel-heading">
- 用户管理
- </div>
- <table class="table table-bordered table-striped text-center">
- <thead>
- <tr>
- <th>
- 序号
- </th>
- <th>
- 用户名
- </th>
- <th>
- 年龄
- </th>
- <th>
- 毕业学校
- </th>
- <th>
- 操作
- </th>
- </tr>
- </thead>
- <tbody>
- <tr v-for="(user,index) in users">
- <td>
- {{index+1}}
- </td>
- <td>
- {{user.name}}
- </td>
- <td>
- {{user.age}}
- </td>
- <td>
- {{user.school}}
- </td>
- <td>
- <button v-on:click="remove(index)">
- remove
- </button>
- </td>
- </tr>
- <tr>
- <td>
- </td>
- <td>
- <input type="text" id="name" v-model="user.name" />
- </td>
- <td>
- <input type="text" id="age" v-model="user.age" />
- </td>
- <td>
- <input type="text" id="school" v-model="user.school" />
- </td>
- <td>
- <button @click="insert">
- insert
- </button>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- </template>
- <script>
- export
- default {
- name:
- 'hello',
- data() {
- return {
- user: {
- 'name': '',
- 'age': '',
- 'school': ''
- },
- users: [{
- 'name': '李磊',
- 'age': '25',
- 'school': '洛阳理工'
- },
- {
- 'name': '张成',
- 'age': '23',
- 'school': '桂林电子科技'
- },
- {
- 'name': '炼心',
- 'age': '22',
- 'school': '江西电子科技'
- }]
- }
- },
- methods: {
- insert: function() {
- this.users.push(this.user)
- },
- remove: function(index) {
- this.users.splice(index, 1)
- }
- }
- }
- </script>
- <!-- Add "scoped" attribute to limit CSS to this component only -->
- <style scoped>
- h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0;
- } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } tr,th{
- text-align:center; }
- </style>
这个组件实现了简单的增删功能,主要是对 data 数据的修改,我们要明白,我们平常使用的 jquery 只是对 dom 节点的操作,比如我们要改变一个数据我们就要首先获取 dom 然后通过 jquery 的方法来获取值,而 vue 则不然它是对 data 数据进行操作,数据双向绑定,数据改变则视图改变,同样视图改变则数据改变。 到最后我们看到的效果是这样的 大家有什么问题可以联系我,或者留言 大家也许也发现了这样操作 data 太繁琐,有没有简单的方式呢,有,那就是 vuex 就像一个仓库提供你需要的数据。下一章节我会开始对 vuex 的使用做个总结,希望想了解更多的朋友关注我,谢谢你们的支持。
来源: http://www.cnblogs.com/dreamsboy/p/6718218.html