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页面