Vue去哪网笔记

归纳总结
- vue中组件的用法：
如何运行vue项目（维护他人的项目）
前期学习
项目预热
项目实战-首页开发
城市选择页面
详情页开发
项目的联调、测试与发布上线
总结与后续学习

归纳总结

vue中组件的用法：

1.递归自己的时候

2.取消缓存的时候

3.网页上打开vue调试时用来显示名字方便看结构

1570796228442

插件

swiper3.0是Vue用的

https://3.swiper.com.cn/api/index.html

如何运行vue项目（维护他人的项目）

1：安装cnpm
由于npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，所有我还需要npm的国内镜像---cnpm
在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org

2：安装webpack
npm install webpack -g
webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。 webpack 的核心是依赖分析,把依赖分析出来了，其他都是细枝末节。

3：安装vue-cli
cnpm install vue-cli -g
vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板
，这个过程会耗时十几秒，等走完就好；好了，到此整个环境就搭建好了

4：cd /项目名称
下面就是运行项目了，cd /项目名称，我的文件放在D盘，所以先进入d盘，再进入项目。

5：npm install
进入项目之后安装依赖，安装成功

注意：在这一步可能会出现这样的错误；因为你打开的是别人的项目，项目之中肯定有 node_modules模块，那么先删除掉，在执行npm install命令

如果出现了，请参考这篇文章解决：https://www.jianshu.com/p/5e62d852babc

6：npm run dev
一切准备就绪，启动项目
npm run dev

7：自动启动浏览器就会打开项目了
在浏览器中输入http://localhost:8080/#/；进入项目首页
若是要访问其他页面，直接在#后面加上组件名称即可：例如http://localhost:8080/#/adjustIntegral
原文链接：https://blog.csdn.net/qq_36538012/article/details/81475913

零、简写

v-on:click——@click

v-bind——:bind 我们可以传给 v-bind:class 一个对象，以动态地切换 class

v-on——:on

使用MVVM进行开发时，重点在于建设M层（数据层），jq使用的是MVP（P为控制层）

1568770252312

VUE提供的创建全局组件的方法，前面是名字，后面是内容

1568776564343

定义全局组件及使用（父向子传值的方法）

1568776470647

this.$emit()事件的.$emit()方法去触发事件，第一个参数是事件名称，第二个参数是可携带的一些参数

@clicknow="clicknow" 通过事件绑定的方式执行了clicknow（后面的）这个函数

1568951060145

下面为组件定义的命名方法，上面是组件使用的命名方法

除了定义Vue的实例（根实例），vue中的每个组件也是一个实例

1568961108667

最下为“定义根实例，往上是定义了一个全局组件，--组件名，组件模板template--,当使用这个全局组件的时候，要记住前面是此组件的名字，例如，他的名字是item那么在应用此组件的时候

以$开头说明是vue实例的属性或者方法

1568962122944

销毁实例

1568962253472

前期学习

一、生命周期函数（11个）

定义：生命周期函数就是vue实例在某一个时间点自动执行的函数

注意：

当实例中已经定义了模板，就用模板去渲染，没有template的时候，实例会将el中所指定的范围自动当成template，

1568963439167

例如以下两张图的作用是一样的

1568963186050

1568963190078

生命周期函数不用定义在methods中

找到方法：官网-学习-API-生命周期钩子

二、模板语法：

{{ }} 也叫插值表达式，作用和 v-text 一样，但是v-html会内容进行解析

1568966143176

凡是v-啥的指令后面的内容都是js的表达式，例如 1568966280335 变成 1568966425491

三、计算属性，方法和侦听器

在三种方法同时都可以实现的情况下用computed表现最为优异，代码量少，完成的还好

1.计算属性computed（有缓存机制）

1568967436842

注意：如果计算属性所依赖的值未发生改变，那么调用缓存机制不重新渲染，依赖的值发生改变则重新渲染

2.方法实现：

方法methods也可以同样实现，但是

1568968080622

3.watch侦听器实现

方法：分别对需要变化的变量进行侦听，一旦变化就对当前的进行渲染，但是比较费劲

1568968714422

四、计算属性的setter和getter

1.getter

获取当前值，跟下图未设置作用没区别，计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter

1568970351445

2.setter

下图为获取/设置改变当前值图片

split( )函数的作用是：将函数传入的value值以空格分割赋值给数组arr，下面是将分割出的每个想分别传回给firstname和lastname

1568970502201

五、VUE的样式绑定

方案一：class的对象绑定

在class中定义activated，并在中定义.activated状态

在函数中使当前状态取反做到来回切换

1569027561178

方案二：用数组[acivated]，先置空

减少冗余用三元： 1569028839159

注意：通过class中添加数组可以放入多个类，可以实现效果的变更

<div id="root">
		
			<div @click="handleDivClick"
				:class="[activated]"
			>
				hello world
				</div>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#root",
				data:{
					activated :''
				},
				methods:{
					handleDivClick:function(){
						// if(this.activated === "activated"){
						// 	this.activated = ""
						// }else{
						// 	this.activated = "activated"
						// }
						this.activated=this.activated === "activated" ? "" : "activated"
					}
				}
			})
		</script>

方案三：内联样式，以对象的形式

1569034570559

方案四：以数组的形式

好处是可以更加灵活

六、VUE中的条件渲染

1.v-if 和 v-show 的区别?

v-show性能更高，执行后相当于display = none ，而 v-if 会直接删除dom元素，使之不存在

1569035687870

2. v-if和 v-else-if 和 v-else？

注意：中间不能隔断

	<div id="root">
			<div v-if="show === 'a'">this is a</div>
			<div v-else-if="show === 'b'">this is b</div>
			<div v-else>this is other</div>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#root",
				data:{
					show:"a"
				}
			})

3.key值的应用

只有标记不通过的key值，vue才会重新渲染，否则有默认留用一样的东西的机制，不标注key值会遇到bug

图解：先显示邮箱名和输入框，进行vm.show=true后只显示用户名和输入框，但是上一次在邮箱名中输入的内容仍然在

1569037324944

七、VUE的列表渲染

1.key值

真实项目中用数据库中返回的id传给key值作为标识，以此来提高性能，不建议用index作为key值标识

2.数组方法

方法：push , pop , shift , unshift , splice , sort , reverse

注意：只有通过这些方法遍历数组才能直接在页面上改变数据，否则直接操作下标只能数据变化页面不变

例子：vm.list.splice(1,1,{id="333",text:"Dell"})

splice用法

（3个参数）：第一个是起始位置，第二个是删除项数，第三个是要添加的项到删除位置（与删除项数不必一致）

（2个参数）：splice(n,m) 从索引n开始删除m个，返回删除项组成新数组

改变数组的第二个方法是改变地址重新建立引用

1569050163646

3.template的妙用

如果此处用div页面会显示进行渲染，但是用template不会占位

1569050308201

4.对象的形式遍历key

注意：遍历对象时，v-for里面可以有三个参数（item,key,index）而遍历数组时只有（item,index）:key需要自己指定

1569051286541

5.set

1。除了在页面上将整个对象重新建立引用，更好用的是set法,下面是利用全局set

1569051889926

2。通过vm实例方法vm.$set

1569052360742

3。通过set方法改变数组中的数据

注意：到此处改变数组中的数据已是第三种，第一种是直接修改引用，第二种是利用.push方法

1569052689353

1569053029520 1569053072340

八、组件使用细节

1.is属性

解决在tbody中无法直接应用组件，需要将组件名给属性is才能识别。

定义灵活的组件内容时，在组件里再设“data”进行return

1569208943692

2.ref的使用

复杂特效时，需要用ref来操作dom,ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例

获取dom
获取组件引用

注意：ref的引用方式与子组件传递参数父组件进行监听的方式

子组件：$emit('what') 父组件：@what='方法'

九、父子组件的数据传递

1.父组件向子组件传值

通过属性名传递有：为表达式无为字符串子组件用props接收属性名

1569226864410

1569226955079

<div id="root">
			<counter :count='1'></counter>
			<counter :count='2'></counter>
		</div>
		
		<script type="text/javascript">
			var counter = {
				props:['count'],
				template : '<div>{{count}}</div>'
			}
			var vm = new Vue({
				el:"#root",
				components:{
					counter:counter
				}
			})
		</script>

1569206902593

注意：父组件传递过来的值子组件不能修改，只能通过data对象赋值一个副本给子组件再进行使用

1569230169738