Vue2入门

廾匸_247

已于 2022-09-01 22:59:53 修改

阅读量162

点赞数

分类专栏：前端文章标签： javascript 前端 vue.js

于 2022-08-21 15:44:38 首次发布

本文链接：https://blog.csdn.net/m0_50960310/article/details/126432765

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue2的基础语法，包括v-for、v-model、v-if/v-show的使用，以及数据和方法的定义。还讲解了计算属性computed与methods的区别，class和style的动态绑定，事件处理和自适应策略。此外，深入探讨了Vue组件的创建、父子组件间的数据传递以及组件间的样式隔离。最后提到了插件的安装与使用，以及样式穿透的解决方案。

摘要由CSDN通过智能技术生成

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

Vue2

渐进式开发框架

js框架慢慢不断壮大

提示

一、基础语法语法

v-for

在这里插入代码片

v-if

在这里插入代码片

v-show

if and show
创建和删除
显示和隐藏

切换的开销谁大：v-if
初次网页加载谁性能好：v-if

v-model 双向绑定

v-bind 单向绑定

<template>
  <div>
      <input type="" name="" v-model='val1'>
      <h1>{{ val1 }}</h1>

      <hr />

      <input type="" name="" :value='val2'>
      <h1>{{ val2 }}</h1>

      <button @click='btn'>按钮</button>

      <hr />
      账号：<input type="" name="" v-model='user.userName'/>
      密码：<input type="" name="" v-model='user.userPwd'/>
  </div>
</template>

<script type="text/javascript">
export default{
  data () {
    return {
      val1:'1',
      val2:'2',
      user:{
        userName:'',
        userPwd:''
      }
    }
  },
  methods:{
    btn(){
      console.log( this.user )
    }
  }
}
</script>

定义数据和方法

1 vue中定义数据是在：data

1.1 定义响应数据

	data(){
		return {
			这里定义的数据是 响应数据
		}
	}

1.2 定义静态数据

	data () {
		this.属性名 = 值;
		return{

		}
	}

2 vue中定义方法是在：methods

methods中的方法，调用几次就执行几次！

3 computed ：计算属性

对于数据进行二次计算（二次计算其实也可以写在template模版中，但是不建议把大量的逻辑写在template模版中，这样会让项目代码很难维护）

3.1 第一种写法

<script type="text/javascript">
		export default{
		  data () {
		    return {
		      msg:'这是一个数据'
		    }
		  },
		  computed:{
		    changeMsg(){
		      return this.msg.slice(-3);
		    }
		  }
		}
		</script>

3.2 第二种写法

<script type="text/javascript">
		export default{
		  data () {
		    return {
		      msg:'这是一个数据'
		    }
		  },
		  computed:{
		    changeMsg:{
		      get(){
		        return this.msg.slice(-3);
		      },
		      set( val ){//为了methods
		        this.msg = val;
		      }
		    }
		  },
		  methods:{
		    btn(){
		      this.changeMsg = '22222';
		    }
		  }
		}
		</script>

*****methods 和 computed的区别

逻辑多次调用：computed是有缓存的，methods没有缓存，调用几次执行几次

4 class and style

class

1.1 对象的写法

	:class='{active:false,on:true}'

1.2 数组的写法

	<div :class='[activeClass,onClass]'></div>

**经常用来各种判断赋值的

	:class=' currentIndex==index ? "active" : ""  '

style

  这是style的写法

</div>

路径src

public

webpack

5 事件处理

5.1监听事件
v-on：事件名称=‘ ‘
简写 @事件名称=‘ ‘

5.2和dom事件一致
click
mouseover 。。。
5.3事件修饰符
。stop
.prevent
.capture
.self
.once
.passive

在这里插入代码片

6 自适应

淘宝自适应文件

二、组件

就是把一个比较大的网页，进行功能模块的拆分

就是vue的一个自定义标签

1.组件的操作

src==》

	App.vue   首页

	assets    静态资源

	mian.js   入口js文件

	components 放入组件

3.1 组件的首字母要大写

3.2 父组件引入子组件
父子关系

3.2.1 script:

			<script>
			import Header from './components/home/Header'
			import Swiper from './components/home/Swiper'
			import Icons from './components/home/Icons'
			export default {
			  components:{
			    Header,
			    Swiper,
			    Icons
			  }
			}
			</script>

3.2.2 template:

			<Header></Header>
   	 		<Swiper></Swiper>
   			<Icons></Icons>

2.组件的传值（高频面试题）

2.1父传子

父组件：

	<Swiper :xxx='parentStr'></Swiper>

	***xxx是一个名称='这里是属性值'

子组件：

	写法1:

		export default{
			props:['a','b','c'],
		}
	写法：
		export default{
			props:{
				a:String,
				b:Number
			}
		}

2.2 子传父

子组件传值给父组件 (自定义事件)

子组件：（定义自定义事件）

this.$emit('changeEvent',this.str);

参数1:自定义事件
参数2:是传递的数据

父组件：

<Child @changeEvent='fn'></Child>

methods:{

  	fn( val ){  ===>这里的val,就是子组件传的数据

  		this.changeStr = val;
  	}
}

2.3 brother

兄弟组件之间的传值 ( bus )

A兄弟：(自定义事件)

bus.$emit(自定义事件名称,值)

B兄弟：$on

bus.$on("changeStr",(res)=>{
	console.log( res );
})

总结

亲父子，亲兄弟
Home.vue 父亲

Header.vue  首页=》子   ===〉上海
Swiper.vue  首页=》子

City.vue 父亲

Header.vue   选择城市=>子
CityName.vue 选择城市=>子			这里存放城市的数据列表

3 组件间的sytle 里scope属性

组件间的css不相互影响
scoped原理

2.1 加入了scoped，就会在节点上添加自定义属性

	data-v-xxx（随机值）

2.2 css选择器 ==> 根据属性选择最终添加样式

4 slot

子组件接收父组件模版片段，并通过子组件想要改属性，渲染片段
app.vue

<template>
  <div id="app">

    <Header title='分类'></Header><!-:是数据前要加->

    <Header>
      
        <input type="" name="" placeholder="请输入您搜索的商品">

    </Header>

  </div>
</template>

<script>
import Header from './components/common/Header'
export default {
  name: 'App',
  components:{
    Header
  }
}
</script>

<style type="text/css">
*{
  margin:0;
  padding:0;
}
</style>

header.vue

<template>
	<header>
		<div>
			<i class="iconfont icon-fanhui"></i>
		</div>

		<slot>
			<div>{{title}}</div>
		</slot>
		
		<div>
			<i class="iconfont icon-fangdajing"></i>
		</div>
	</header>
</template>

<script type="text/javascript">
export default{
	props:{
		title:String
	}
}
</script>

<style scoped>
header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: 60px;
	background: #ccc;
}
header > div{
	padding:0 20px;
}
input{
	padding:10px 20px;
}
</style>

三、其他

插件使用

下载

 npm install vue-awesome-swiper -S 

 	***这种下载方式是最新版

 npm install vue-awesome-swiper@3.1.3 -S

引入

 2.1 全局引入 在 main.js

 	*全局引入*/
 	import VueAwesomeSwiper from 'vue-awesome-swiper'
 	import 'swiper/dist/css/swiper.css'
 	Vue.use(VueAwesomeSwiper)

 2.2 按需引入 [局部引入方式：单个组件引入]

/组件方式引用/

import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
components: {
  swiper,
  swiperSlide
}

3.配置用相关文档

样式穿透

全局引入插件，修改style scope无法覆盖

通用（非常建议使用）

	::v-deep

stylus >>>

sass和less  /deep/