【VUE】相关目录介绍

Page页面

一般vue项目是单页面程序

 

View视图

一个view对应一个vue文件，一般放在view目录下，一个项目包含多个视图

 

Component组件

自定义的组件，可以被视图引用

 

路由route

视图之间的切换称为路由

 

vue文件结构

 

views目录下包含多个视图，视图之间可以切换，每个view包含三个部分：

template 模板，html

script 数据处理

style 样式表

 

template

 

对于template常常是有bind，on事件绑定，模型绑定，属性绑定

显示变量{{}}：

<span>{{message}}</span>

绑定属性v:bind：

<span v-html="htmlMessage"></span>

<img v-bind:src="userphoto" />
<img :src="userphoto" />

 列表循环v-for：

<template>
  <ul>
    <li v-for="(item, index) in list" v-bind:key="item.id">
        {{index + 1}} : {{item.name}}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      list: [{id:111, name:'Tom'}, {id:112: name:'Jack'}]
    }
  },

 条件渲染v-if：

<template>
  <div>
    <button v-on:click="seeme = !seeme">切换显示</button>
    <div class="panel" v-if="seeme">{{seeme}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      seeme: true
    }
  }
}
</script>

 显示v-show

<div v-show="var">
   Hello, world.
</div>

事件：

<a href="javascript:;" v-on:click="crateNewOne()">新增</a>
<a href="javascript:;" v-on:click="crateNewOneWithParams('blank', 123, varInData)">新增</a>

 

<script>
export default {
  data() {
    return {
    }
  },
  methods: {
    //事件调用的方法写这里
    createnewOne: function(){
    },
    crateNewOneWithParams: function(p1, p2, p3){
    }
  }
}
</script>

 

script

 

import MyComponent from '@/components/MyComponent.vue' //使用的自定义组件，js等需要在这里import进来；@表示src目录；

<script>
export default {
  name: '视图名称', //可省略，建议每个view定义一个不同的名称，方便找错
  components: {MyComponent}, //此view中使用的组件；如果不使用组件，可省略慈航
  data() {
    return {
      // 在这里定义数据结构，有初始值的赋初始值，没有的写null，把结构写完整
    }
  },
  // view生命周期内的钩子事件在这里定义；具体有哪些钩子函数请参考生命周期章节
  created: function(){
    console.log('created')
  },
  beforeDestroy: function(){
    console.log('beforeDestroy')
  }
  methods: {
    //此view内的方法，全部使用this.functionName调用
    //只要能用this的地方都可以调用
    //可以处理数据、访问后台、返回值
    //在模版里也可以调用这里的方法
    addItem1: function(){

    },
    addItem2: function(){
      //也可以有返回值的
      return 1
    }
  }
}
</script>

为数组增加元素push：

<script>
export default {
  data() {
    return {
      array: ['a', 'b', 'c']
    }
  },
  methods: {
    addItem1: function(){
      //这种改变数据的方式，vue不能监测到，因此不会生效
      this.array[this.arry.length] = 'Hello'
    },
    addItem2: function(){
      this.array.push('hi')
      this.array = ary
    }
  }
}
</script>

增加新属性$set：

<script>
export default {
  data() {
    return {
      array: ['a', 'b', 'c'],
      props:{
        propA: null
      }
    }
  },
  methods: {
    changePropA: function(){
      this.props.propA = new Date().getTime()
    },
    changePropB: function(){
      //由于data里没定义propB，不会生效
      this.props.propB = new Date().getTime()
    },
    changePropC: function(){
      this.$set(this.props,'propC', new Date().getTime())
    }
  }
}
</script>

 

页面生命周期

 

在每个view的生命周期中有几个钩子，我们可以在相应的时机进行些程序处理。

• beforeCreate
• created 一般我们在这里做些数据的初始化
• beforeMount
• mounted -- 如果需要获得界面上某个元素的实际占用的宽高(offsetWidth, offsetHeight)等，在这个事件里可以获得
• beforeUpdate
• updated -- 界面发生变化后
• beforeDestroy 如果view内定义了些离开需要销毁的变量，可在这里处理。例如仅本view使用的websocket连接，可以在这里关闭
• destroyed

 

阻止事件冒泡：

<div v-on:click.stop="divClicked">B</div>

更多事件符号：

https://cn.vuejs.org/v2/guide/events.html#事件修饰符   https://cn.vuejs.org/v2/guide/events.html

 

获取某个元素$ref：

 

<template>
  <div>
    <!-- 下面这个input元素增加了ref属性 -->
    <input ref="name" type="text" v-model="name" />
    <button v-on:click="save">Save</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: ''
    }
  },
  methods:{
    save: function(){
      if (this.name == ''){
        // 下面这行通过this.$ref来获取上面template中的input元素
        this.$refs.name.focus() 
        alert('请输入姓名')
      }
    }
  }
}
</script>

 

表单数据的双向绑定v-model

 

<template>
  <div>
    <!-- 下面这个input的v-model属性标示了name需要做双向绑定 -->
    <input type="text" v-model="name" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: ''
    }
  }
}
</script>

 

使用input上传文件

 

获取文件

<template>
  <div>
    <div>
      <input type="file" multiple v-on:change="handleFiles" />
    </div>
    <div v-if="fileList != null">
      <h3>选择的文件</h3>
      <ul>
        <li v-for="file in fileList">
          {{file.name}}  ({{file.size + 'bytes'}})  {{file.type}}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FileObject',
  data() {
    return {
      fileList: null
    }
  },
  methods:{
    handleFiles: function(event){
      console.log(event)
      this.fileList = event.target.files
    }
  }
}
</script>

文件上传

let formData = new FormData()
  //把每个文件都增加进入FormData
  for (var i=0; i < this.fileList.length; i++){
    var f = this.fileList[i]
    formData.append("file", f)
  }
  //增加其它内容
  formData.append("fileType", "myimages")

  this.$http.post('/api/fileupload', formData, {
    headers: {'Content-Type': 'multipart/form-data'}
  }).then(response=>{
    console.log("上传成功", response)
  }, response => {
    console.log("出错了", response)
  })