vue笔记

目录

1.搭建vue环境

2.全局引用js

3.新建一个vue文件需求做什么？

 4. vue文件的最外层的只能有一个div？

5.引入子组件

6. vue的两种跳转带参区别

7.判断为空

---

1.搭建vue环境

https://mp.weixin.qq.com/s/ookJSyAxRjWl62B-yViGwQ

安装node环境、安装vue/node_modules

总结：
下载：https://nodejs.org/en/
安装node
npm install -g cnpm –registry=https://registry.npm.taobao.org
安装脚手架：npm install --global vue-cli
创建一个基于 webpack 模板的新项目: vue init webpack 项目名

常见目录/文件：

src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：

　　　　1）assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建；

　　　　2）components：组件目录，我们写的组件就放在这个目录里面；

　　　　3）router：前端路由，我们需要配置的路由路径写在index.js里面；

　　　　4）App.vue：根组件；

　　　　5）main.js：入口js文件；

static：静态资源目录，如图片、字体等。不会被webpack构建

index.html：首页入口文件，可以添加一些 meta 信息等

package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息

2.全局引用js

main.js

import utils from './utils/commonUtils';
Vue.prototype.$utils = utils;

commonUtils

export default class commonUtils {
    static getIpAndPort(){
        return window.location.protocol + '//' + window.location.host;
    }
}

使用

let rootUrl = this.$utils.getIpAndPort()

3.新建一个vue文件需求做什么？

IDEA ，new一个vue文件

One.vue

<template>
  <p>Hello World!!!</p>
</template>
<script>
  export default {
        name: "One",
    }
</script>
<style scoped>
</style>

 router/index.js  加一个One.vue的路由

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/test',
      name: 'test',
      component: () => import('@/views/test.vue'),
      meta: {title: '测试'},
    },
    {
      path: '/one',
      name: 'one',
      component: () => import('@/views/components/One.vue'),
      meta: {title: '一'},
    }
  ]
})

 

 4. vue文件的最外层的只能有一个div？

    是的

5.引入子组件

One.vue(父组件)

<template>
  <div>
    <p>Hello World!!!</p>
    <two ref="two" :nextOperatorObj="nextOperatorObj"></two>
  </div>
</template>

<script>
  import two from './Two'

  export default {
    name: "One",
    components: {two},
    data() {
      return {
        nextOperatorObj:{}
      }
    },created(){
     this.nextOperatorObj={tacheName:"#44444444444"}
    },
    methods:{}
  }
</script>
<style scoped>
</style>

说明：

 :nextOperatorObj="nextOperatorObj"  用到的是v-bind动态绑定，缩写":"

data()里定义 nextOperatorObj，初始化一个空对象

Two.vue

<template>
  <div>
    <el-form
      :model="data"
      ref="nextOperatorForm"
      label-width="140px"
      :rules="rule"
    >
      <el-col>
        <el-form-item
          label="下一环节名称：" prop="tacheName">
          <el-input
            style="width: 230px"
            v-model="nextOperatorObj.tacheName"
            size="small"
            clearable
          />
        </el-form-item>
  </div>
</template>
<script>
    export default {
        name: "Two",
      props:{
        nextOperatorObj:{
          type:Object,
          default:() => {}
        }
      },
      data(){
          return{
            data:{},
            rule:{
              tacheName: [{required: true, message: '请选择下一环节名称', trigger: 'blur'},],
            },
            nextOperatorForm:{},
            // nextOperatorData:{}
          }
      },
      created(){
      }
    }
</script>
<style scoped>
</style>

说明：

v-model="nextOperatorObj.tacheName"  可以直接获取动态绑定的值

props 定义父组件传来的值

这样子组件就会得到值

6. vue的两种跳转带参区别

（1）params传参，缺点：刷新后就取不到数据了

  <el-button type="primary" @click="jumpThree">跳转带params</el-button>

  jumpThree(){
        this.$router.push({
          name: 'three',
          params:{
            t:'123'
          }
        })
      },



目标页面：
 let a = this.$route.params;

注意，这里只能是params

（2）用query带参，优点：页面刷新值还在，因为参数在地址栏上

    <el-button type="primary" @click="jumpThree2">跳转带query</el-button>

  jumpThree2(){
        this.$router.push({
          name: 'three',
          query:{
            t:'123'
          }
        })
      },


目标页面：
let   a = this.$route.query;

7.判断为空
 

if(a!=undefined)

if(a=='')

if(!!a)//相当于以上两个结合

if(JSON.stringify(a) !="{}")//判断对象等于空