vue的基础知识-vue基础入门

1. Vue简介

工欲善其事,必先利其器

1.1 Vue是什么?

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

对于渐进式的理解:

  • vue弱主张(对比其他框架,)

  • 可在原有项目的基础上使用 script 标签引入,如JQ

  • 也可用vue全家桶构建完整项目(v-cli、v-router、vuex、axios

  • 需先安装node.js、npm 、v-cli

下图是使用v-cli,创建项目shareProject

vue init webpack shareProject

hxq

2.1 Vue的特点是什么?

1.组件化,清晰的文档结构
在这里插入图片描述

2.声明式渲染,双向数据绑定(v-model),数据更新视图(页面)

在这里插入图片描述

3.虚拟dom,开发者可以不再需要操作dom,把重心放在处理业务逻辑上

2.Vue常用指令

与vue聊天的暗号

2.1 条件判断:v-if、v-else-if、v-else

判断条件是否成立,按条件渲染页面元素;相近的指令v-show

v-if和v-show的区别:

v-show:使用该指令的元素会始终渲染在dom中,通过改变该元素的display值来实现是否显示在页面上,不需要操作js,开销相比较小
v-if:真正的条件渲染,当满足条件时才将元素添加到dom中并渲染到页面,反之销毁元素。因此性能开销大。
在这里插入图片描述
在这里插入图片描述

2.2 列表遍历、渲染:v-for

使用v-for指令可以很方便地遍历数组或对象并将其数据展示到页面上。

在这里插入图片描述
在这里插入图片描述在这里插入图片描述

2.3 事件处理:v-on (简写@)

使用v-on可以很简便地监听dom事件,如focus、click、dblclick、mousedown等,同时vue允许在v-on指令中添加js代码并执行

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.4 表单输入绑定:v-model

在一些常用的表单元素如、、,使用v-model实现双向数据绑定
在这里插入图片描述
在这里插入图片描述

2.5 属性绑定:v-bind ( 简写 :)

v-bind指令用于为元素绑定属性并能在其使用表达式,对于 class 和 style 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。

在这里插入图片描述

3. V-router路由系统

3.1 路由配置&&路由嵌套

v-router通过在router文件夹中的index.js配置路由表,可很方便的切换组件展示内容,使用路由嵌套则可很方便地实现页面菜单切换,层次分明易维护。

index.js
在这里插入图片描述
HelloWorld.vue

<template>
  <div class="hello">
    <router-link to="//a">A</router-link>
    <router-link to="/b">B</router-link>
    <router-link to="/c">C</router-link>

    <router-view></router-view>
  </div>
</template>

a.vue

<template>
  <div class="A">
    <p>This is page A</p>
    <router-link to="/a/a-1">A-1</router-link>
    <router-link to="/a/a-2">A-2</router-link>
    <router-link to="/a/a-3">A-3</router-link>

    <router-view></router-view>
  </div>
</template>

b.vue

<template>
  <div class="B">
    <p>This is page B</p>

  </div>
</template>

a-1.vue

<template>
  <div class="A-1">
    <p>This is page a-1</p>

  </div>
</template>

在线例子

界面展示

此时路径为:http://localhost:8082/a(a未使用 redirect 重定向时)
在这里插入图片描述
(a使用 redirect 重定向时)
此时路径为:http://localhost:8082/a
b.vue界面
在这里插入图片描述
3.2 路由跳转的几种方式

  1. router-link
	<router-link to="/a/a-1">A-1</router-link>
    <router-link to="{path:"/a/a-2",query:{id:1}}">A-2</router-link>
    <router-link to="/a/a-3">A-3</router-link>
  1. this.$router.push() (在函数里面调用)
if (this.$route.query.from == 'bindCorp') {
              this.$router.push({
                  path: '/clue/index'//以query传参是,可用/name:'xxxxx'
                  query: {id:'1'}  //以params传参时只能用name
               })
   }
   //取参时用 let id = this.$route.params.id
  1. this.$router.replace() (用法同push)

两者区别:

this.$router.push 跳转到指定url路径,并向history栈中添加一个记录,点击后退会返回到上一个页面

this.$router.replace 跳转到指定url路径,但是history栈中不会有记录,点击返回会跳转到上上个页面 (就是直接替换了当前页面)

  1. this.$router.go(n)

向前或者向后跳转n个页面,n可为正整数或负整数

3.3 动态路由的使用

动态路由可实现不同的路由能访问同一个组件,这能提高组件的复用率,且一定程度上优化程序响应时间。

动态路由的参数以 :parameter的形式定义,下面例子中定义的path,会匹配所有诸如此类的路径: /c/123/abc 、/c/huhu/1234

		{
          path: "/b/:id",
          name: "b",
          component: pageB
        },
        {
          path: "/c/:id/:name",  //  "/c/:id/user/:name"
          name: "c",
          component: pageC
        },

在组件中获取参数

<template>
  <div class="C">
    <p>This is page C</p>
    <p v-if="$route.params">获取到的id:{{$route.params.id}}</p>
    <p v-if="$route.params">获取到的name:{{$route.params.name}}</p>
  </div>
</template>

4. Vue生命周期

4.1 vue 2.xxx 生命周期流程图

在这里插入图片描述
钩子函数:

  • 1.beforeCreate:vue实例化之前
  • 2.created:实例化完毕,此时已能读取到data里面的数据,以及vue实例的方法,此时页面还没渲染
  • 3.beforeMount:组件挂载前,页面仍未显示,但虚拟dom已经配置
  • 4.mounted:组件挂载后,此时页面已渲染到浏览器
  • 5.beforeUpdate:组件更新前
  • 6.updated:组件更新后
  • 7.beforeDestory:销毁前
  • 8.destroyed:销毁

例子:

  created () {
    this.getIndustryList()
    this.getIndustryData()
    console.log(this.data.msg)
  },
  mounted () {
    if (this.$route.query.type == 2) {
      this.getClueDetail(this.$route.query.clueId, this.$route.query.status)
    }
  },

五、组件传值

5.1、父组件传值给子组件

在父组件中引入子组件,并在子组件标签上绑定自定义属性 msg 并赋值:
<template>
	<div>
		<son msg='春天来了' @sonData='getSonData'></son>
	</div>
</template>

<script>
import son from './son.vue
export default {
	component: { son },
	data() {
		return{}
	}
}
</script>
在子组件中,使用props选项来接收值:
<template>
	<div>父组件传来的值是: {{msg}}</div>
</template>

<script>
export default {
	props: [ 'msg' ], // props: { msg: String }
	data() {
		return{}
	}
}
</script>

5.2、子组件传值给父组件
在子组件中,使用$emit()函数来传递事件名和参数,在父组件中监听该事件并获取参数:

<!-- 子组件 -->
<template>
	<div>父组件传来的值是: {{msg}}</div>
	<button @click='sendData'>点击</button>
</template>

<script>
export default {
	props: [ 'msg' ], // props: { msg: String }
	data() {
		return{}
	},
	methods: {
		sendData() {
			this.$emit('sonData', '爸爸好')
		}
	}
}
</script>

<!-- 父组件 -->
	<son msg='春天来了' @sonData='getSonData'></son>
<script>
export default{
	methods: {
		getSonData(data) {
			console.log('子组件传来的值:', data)
		}
	}
}
</script>
  • 6
    点赞
  • 39
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值