基于webpack+vue2+iview技术管理后台简明开发教程(二)

    vue基础语法

    vue工程目录介绍

    1、build目录,主要存放工程发布时的配置信息
    2、config目录,项目配置文件,包括运行环境,静态文件目录,发布目录以及代理等相关信息
    3、node_modules目录,依赖的插件的存放目录
    4、src目录,源文件目录,功能开发的Html,js,vue等相关文件在该目录
    5、static目录,静态文件目录
    6、index.html,入口文件,相关vue文件会被该文件引入。
    7、package.json,打包配置文件
    8、README.md,说明文档

    基础语法

    打开src目录下的App.vue文件,修改文件内容为

    <template>
      <div id="app">
        {{message}}
      </div>
    </template>
    
    <script>
    export default {
      name: 'app',
      data () {
        return {
            message: 'hello world'
        }
      }
    }
    </script>
    

    查看页面,显示为hello world,像所有语言教程一样,这里也把输出”hello world”作为入门。

    数据绑定

    1、文本

    {{message}}
    

    2、html插入

    <div v-html="testHtml"></div>
    

    3、属性绑定

    <button v-bind:disabled="isButtonDisabled">Button</button>
    

    4、model值绑定

    <input v-model="inputValue"></input>值:{{inputValue}}</br>
    

    5、下拉列表

        <select v-model="selected">
            <option disabled value="">请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>Selected: {{ selected }}</span>
    

    以上使用到的数据,需在data ()中定义

    testHtml: '<span>测试插入html</span>',
    isButtonDisabled: true,
    inputValue: '',
    selected: '',
    
    指令

    1、if else判断

    <h1 v-if="ok">Yes</h1>
    <div v-if="Math.random() > 0.5">
      Now you see me
    </div>
    <div v-else>
      Now you don't
    </div>
    

    2、列表

    <ul id="example-1">
          <li v-for="item in items">
            {{ item.message }}
          </li>
    </ul>
    

    3、显示v-show

    <h1 v-show="ok">Hello!</h1>
    

    以上代码数据需在data()中定义

    ok: true,
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ],
    
    响应事件

    1、click事件

    <div id="example-1">
            <button v-on:click="counter += 1">增加 1</button>
            <p>这个按钮被点击了 {{ counter }} 次。</p>
    </div>
    

    2、click调用方法

    <div>
          <!-- greet为定义的方法 -->
          <button v-on:click="greet">Greet</button>
    </div>
    

    以上测试的vue页面内容如下

    <template>
      <div id="app">
        {{message}}
        <div v-html="testHtml"></div>
        <button v-bind:disabled="isButtonDisabled">Button</button></br>
        <input v-model="inputValue"></input>值:{{inputValue}}</br>
        <select v-model="selected">
            <option disabled value="">请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>Selected: {{ selected }}</span>
        <h1 v-if="ok">Yes</h1>
        <div v-if="Math.random() > 0.5">
          Now you see me
        </div>
        <div v-else>
          Now you don't
        </div>
        <ul id="example-1">
          <li v-for="item in items">
            {{ item.message }}
          </li>
        </ul>
        <h1 v-show="ok">Hello!</h1>
        <div id="example-1">
            <button v-on:click="counter += 1">增加 1</button>
            <p>这个按钮被点击了 {{ counter }} 次。</p>
        </div>
        <div>
          <button v-on:click="greet">Greet</button>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'app',
      data () {
        return {
            message: 'hello world',
            testHtml: '<span>测试插入html</span>',
            isButtonDisabled: true,
            inputValue: '',
            selected: '',
            ok: true,
            items: [
              { message: 'Foo' },
              { message: 'Bar' }
            ],
            isActive: true,
            hasError: false,
            counter: 0
        }
      },
      methods: {
        greet: function (event) {
          alert(this.message + '!')
          if (event) {
            alert(event.target.tagName)
          }
        }
      }
    }
    </script>
    

    页面切换router路由

    router的引入

    在src/main.js文件中使用引入router相关的配置文件

    import router from './router'
    
    new Vue({
      el: '#app',
      router,
      template: '<App/>',
      components: { App }
    })
    

    src/router/index.js具体内容如下:

    import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'Hello',
          component: HelloWorld
        }
      ]
    })
    

    src/components/HelloWorld.vue具体内容如下:

    <template>
        <div>
            this is a index
        </div>
    </template>
    

    通过在App.vue中添加router-view标签,把HelloWorld.vue引入主页

    <div id="app">
        <router-view></router-view></div>
    

    修改App.vue,添加router-link

    <template>
      <div id="app">
        <router-view></router-view>
        <router-link to="/table/1">表格</router-link>
        <router-link to="/form">表单</router-link></div>
    </template>
    

    当点击表格或者表单时/table或者/form对应的页面会在router-view位置显示
    src/router/index.js文件内容更新为

    import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    import form from '@/components/form'
    import table from '@/components/table'
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'Hello',
          component: HelloWorld
        },
        {
          path: '/form',
          name: 'form',
          component: form
        },
        {
          path: '/table/:id',
          name: 'table',
          component: table
        }
      ]
    })
    

    src/components添加页面table.vue和form.vue对应的内容如下:
    table页面

    <template>
        <div>
            this is a table
            {{$route.params.id}}
        </div>
    </template>
    

    form页面

    <template>
        <div>
            this is a form
        </div>
    </template>
    

    其中table为动态路由实现的一种方式,映射 path: ‘/table/:id’中对应路径为id参数,并在table.vue页面中通过{{$route.params.id}}使用该参数,实现页面的动态效果。

    以上部分是关于vue框架的基础知识,涵盖日常开发常用的数据绑定,指令,事件响应和页面路由等。接下来的教程我们会使用以上功能。

    iview组件引入

    安装iview插件,

    在命令行模式下,cd 到项目所在目录,执行以下命令

    npm install iview --save
    

    在src/main.js中添加以下代码,引入iview

    import iView from 'iview';
    import 'iview/dist/styles/iview.css';    // 使用 CSS
    
    Vue.use(iView);
    
    使用iview组件

    在App.vue中添加按钮

    在methods中添加方法greet2

    greet2: function () {
        this.$Message.success('Hello World');
    }
    

    点击”问候”按钮

    5
    无论是按钮还是消息提示炫了很多。
    iview组件包括了,框架,表单,表格,提示,按钮等常用标签,使用非常方面,下一节我们会用iview创建常用的form和table页面

    转载请注明:孙豪杰的博客 » 基于webpack+vue2+iview技术管理后台简明开发教程(二)

    喜欢 0
上一篇: 下一篇: