【b站咸虾米】chapter3_vue基础_新课uniapp零基础入门到项目打包（微信小程序/H5/vue/安卓apk）全掌握

课程地址：【新课uniapp零基础入门到项目打包（微信小程序/H5/vue/安卓apk）全掌握】 https://www.bilibili.com/video/BV1mT411K7nW/?p=12&share_source=copy_web&vd_source=b1cb921b73fe3808550eaf2224d1c155

目录

三、vue基础

3.1 vue介绍与传统js的差异化

 3.2 模板语法

3.3 data属性

3.4 条件渲染 

3.4.1 v-if和v-else

3.4.2 v-show

3.4.3 v-if和v-show的区别

3.5 列表渲染 v-for

3.5.1 对数组进行渲染

3.5.2 对对象进行渲染

3.5.3 key

3.6 vue的常用指令

3.6.1 v-html

3.6.2 v-once

3.6.3 v-bind ※

3.6.4 v-on 事件

 3.7 style绑定及随机色案例练习

3.8 绑定class的多种方法

 3.9 小案例点击导航高亮显示

3.9.1 基础样式

3.9.2 选中高亮显示

 3.11 v-model数据双向绑定

3.12 案例-表单提交-双向绑定与表单配合

3.13 表单组件介绍

3.13.1 @submit

3.13.2 radio-group

3.13.3 底部选择器picker

3.14 计算属性computed

---

三、vue基础

继续回到官网的“教程”。

js语法，这里有ES6引入和导出的一些东西，用到再说。

css语法之前说过，rpx也讲过了。

现在看vue语法。介绍 | uni-app官网

本次课程用的是vue2（vue2可以去看【2021最新Vue从基础到实例高级_vue2_vuecli脚手架博客案例】 https://www.bilibili.com/video/BV1pz4y1S7bC/?share_source=copy_web&vd_source=b1cb921b73fe3808550eaf2224d1c155，也是这个up的）

• 学习vue3也是从vue2开始看起。
  • 原因1 商业项目依然使用vue2进行维护，vue3多是新项目。

3.1 vue介绍与传统js的差异化

• 解释1:：vue是单文件项目
  • 之前html去写多个页面
  • vue单文件项目，在pages里创建了许多页面，最终解析出来就是一个index.html。
  • vue最终通过js编写，编写到一个div上去了，这就是单文件项目，最终项目打包时只有一个index.html。
  • App.vue是一个顶级父组件，其他的vue文件都是子组件，子组件里可以创建更多的子组件。
• 注意1：template里只有一个根标签，否则会报错。
• 解释2：动态数据绑定
  • jQuery：节点绑定，通过控制页面的节点来获取类名，然后在js中控制
  • vue：数据驱动，根据js中的数据进行绑定
• 注意2：一些外部文件引用格式发生变化
• 注意3：js变化
  • 以前是通过操作DOM元素改变DOM元素的属性或值
  • 现在是通过vue的MVVM模型

案例，总结下vue基础知识。

新建一个demo页面，说明vue的一些知识。

• 数据渲染

  • <template>
    	<view>
    		<view>
    			当前标题：{{ title }}
    		</view>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				title: "uniapp学习"
    			};
    		}
    	}
    	
    </script>

    之前修改是document.getElementsByClassName("box").innerHTML = xxx，这里使用vue的模版语法就可以实现数据渲染了。（其实老师具体也没介绍什么是数据渲染）

 3.2 模板语法

介绍 | uni-app官网

插值语法

3.3 data属性

介绍 | uni-app官网

data 必须声明为返回一个初始数据对象的函数。

data里写一个return，return 返回一个对象，然后html就把这个对象的所有属性拿到。

3.4 条件渲染 

3.4.1 v-if和v-else

v-if会读取state的值，是true的话就会显示obj.age，false的话就不显示。

<view v-if="obj.state"> {{obj.age}}</view>

v-else要与v-if连用，且v-else是没有条件的。

<view v-if="obj.state"> {{obj.age}}</view>
<view v-else> {{obj.name}}</view>

且v-if和v-else要挨在一起（加空格或者回车是可以的，加v-else-if也是可以的，加其他的就会报错）

注意这里的obj.state，取值是true /false，是boolean值，而不是“true”/“false”（这是字符串，不是boolean）

3.4.2 v-show

<view v-show="obj.state">{{obj.name}}</view>

3.4.3 v-if和v-show的区别

v-if取值为false，则标签在页面上不存在，v-show取值为false，标签在页面上存在，但是display为none，是由css控制的，性能更好些。

当v-if取值从false改为true，相当于对DOM体重新进行了一次渲染，所以性能低。

不过差异也不是很大，所以都可以使用，但是注意区别。v-show不显示，但是DOM体存在。

3.5 列表渲染 v-for

对js数据里的数组或对象进行渲染。

3.5.1 对数组进行渲染

		<view v-for="(item, index) in arr">
			{{arr[index]}}
		</view>

arr是个数组，定义为arr: ['123','str','456','桃七']。

v-for里只写一个参数，则是item，即数组里的每一项。

		<view v-for="item in arr">
			{{ item }}
		</view>

3.5.2 对对象进行渲染

v-for还可以循环打印对象，但是用的不多。

		<view v-for="(value, name, index) in arr">
			{{ index }} - {{ name }} - {{ value }}
		</view>

index是索引，name是对象的属性名，value是对象的属性值。

3.5.3 key

key，唯一标识符，在对一些变化的数据处理时，可以表示唯一辨识符。

不写key的时候，一些编译器会报错，比如vs code。

给key赋值选择数据里唯一的值，比如id等。

写法（注意，index要出现过，才可给key赋值）

<view v-for="(item, index) in arr" :key="index">
	{{index}}
</view>

3.6 vue的常用指令

3.6.1 v-html

第1行和第2行效果都是一样的。

<view>{{title}}</view>
<view v-html="title"></view>

区别在于

当变量是含标签内容的字符串时，写法1插值语法不能解析html标签，而写法2v-html可以解析html标签。

效果

之前说，对于<hx>标签，h5可以解析显示正确的样式，但是小程序不能。

v-html可以在小程序上正常渲染html标签。原理是直接写成了支持html标签的nodes，可以在uniapp官网的组件里的rich-text的nodes属性里查看。

3.6.2 v-once

H5和微信小程序均不支持。

v-once只渲染一次。

3.6.3 v-bind ※

动态绑定标签的属性。

场景：图片的路径src可能需要动态获取。

例如：通过添加v-bind，使得src可以读取data中的img变量内容。

v-bind: 可以简写为 : 

动态显示3张不同的图，图片路径相同，图片title分别为png1、png2和png3。

<image :src="'../../static/images/png'+item+'.png'" mode="" v-for="item in 3">
</image>

3.6.4 v-on 事件

原始写法：div里写个onClick（其实我已经忘记了）。

methods是一个对象，里面的属性就是函数。

data是个函数，return一个对象。

写法

①v-on指令，绑定了click事件（还有其他事件）。

②发生click事件时，执行onClick方法。

③onClick方法的定义。注意对data中的数据处理时前面要加this，因为是vue实例对象的属性。

指令简写：v-on简写为@

事件处理函数的简写，: 和 function去掉

data就是一个简写后的函数。

 3.7 style绑定及随机色案例练习

（可以直接去看④）

案例，点击盒子可以改变盒子颜色

① 基础知识：行内样式：<view class="box" style="background: blue"></view>

② 绑定style样式的写法

等号右边的字符串里面放了一个对象，里面有属性background和对应属性值‘blue’，注意属性值是字符串。

<view class="box" :style="{background: 'blue'}"></view>

③ 将属性值改为变量，

变量命名，注意，变量也是字符串。

如此便实现了style样式的绑定。

④ 添加绑定事件

事件处理函数

注意1 是将number变为string类型；2 产生随机小数；3 截取字符串的方法。

3.8 绑定class的多种方法

上节课的style绑定，适合样式少的情况。

当要绑定的样式过多的时候，3.7节的方法就不再适用了。

步骤① 提前写好一个样式

步骤② 绑定样式，等号右边是一个对象（与3.7相似），属性是步骤①里定义的类名，属性值是boolean值，由点击事件控制，boolean值变化在点击事件的处理函数里。

步骤③ 绑定点击事件，对应的事件处理函数如下（isActive要在data里定义）

注意：当isActive为true时，第5行代码的view的class为“block myActive”。

一般不怎么用上面的方法。

写法② 三元表达式。

（只改变了template里的写法，其他写法是一样的）

up用三元表达式的方式（这个方法就够用了）。

写法③ 数组形式

up没怎么讲，有需要可以自己看看。

适合绑定多个class的场景。

 3.9 小案例点击导航高亮显示

点击导航，高亮显示，使用jQuery操作DOM，还是比较麻烦的。这里使用数据绑定来实现。

3.9.1 基础样式

template代码

导航栏数据

样式

显示效果

3.9.2 选中高亮显示

绑定点击事件，通过index传值

设置标记值，用于标记当前高亮的导航

当标记值等于当前item的index时，绑定active类，否则不绑定

当发生点击事件时，标记值变化

45行可以去掉。

实现效果

点击导航可以高亮

 3.11 v-model数据双向绑定

v-bind通过js控制DOM体。

v-model可以通过DOM体控制js变化，js变化也可以控制DOM体，此为双向绑定。

双向绑定只能作用于表单上，最常见的就是input标签。

input要额外加个样式

效果

简写形式：

v-model绑定的值是value的时候，:value可以省略。

3.12 案例-表单提交-双向绑定与表单配合

案例：收集用户名称、电话和留言。

对对象里的属性进行双向数据绑定。

代码：

对象定义

样式

效果

对于单选、底部选择器picker，无法直接使用v-model的，需要自定义组件。

3.13 表单组件介绍

form组件

3.13.1 @submit

绑定提交事件。

当点击鼠标提交表单时，触发onSubmit事件处理函数，打印数据，即表单收集的数据。

onSubmit事件处理函数，入参就是表单收集的input和textarea的值。

打印的值在detail的value里。

对应content与username。这在表单的input和textarea的name里定义了。

总结：表单提交条件

1. 给button添加form-type为submit；
2. 给标签添加name；
3. 给form标签绑定submit事件。

3.13.2 radio-group

在表单中加一组radio-group单选框。

添加name属性。

checked表示默认选择。

提交表单，表单的gender信息为保密。

还有复选框，checkbox-group，这里就不描述了。checkbox-group | uni-app官网

3.13.3 底部选择器picker

picker | uni-app官网

案例

range是可选择的选项内容，name是用于收集picker最终选择的内容。

效果

表单收集的值

① 设置默认固定的选项

添加value，

selectValue初始值为2，打开，学历就留在索引为2的内容上了。

② 选择学历后，要在页面上显示出来。

value改变时触发change事件

事件处理函数

入参e里的detail的value就是picker被选择变化后的value。

将这个value赋值给selectValue，那么当前页面显示的学历就会是用户选择的学历了。

效果

选择大专后，页面的本科变为大专。

这一节有点长，完整代码如下

<template>
	<view>
		<form @submit="onSubmit">
			<view class="row">
				<input type="text" name="username"/>
			</view>
			<view class="row">
				<textarea name="content"></textarea>
			</view>
			<view class="">
				<radio-group name='gender'>
					<radio value='女'>女</radio>
					<radio value='男'>男</radio>
					<radio value='保密' checked>保密</radio>
				</radio-group>
			</view>
			<view class="row">
				<picker :range="options" name="school" :value="selectValue" @change="pickerChange">
					<view>点击选择学历：{{options[selectValue]}}</view>
				</picker>
				
			</view>
			<view class="row">
				<button form-type="submit" type="primary">提交表单</button>
				<button form-type="reset">重置表单</button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				options: ["高中","大专","本科","博士"],
				selectValue: 2,
			}
		},
		methods: {
			onSubmit(e) {
				console.log(e);//e就是input和textarea输入的值
			},
			pickerChange(e) {
				console.log(e);
				this.selectValue = e.detail.value;
			}
		}
	}
</script>

<style>
	input, textarea {
		border: 1px solid #eee;
	}
		
	.row {
		padding: 20rpx 0;
		
	}
</style>

3.14 计算属性computed

介绍 | uni-app官网

计算属性可以理解是data里的值。

案例

changeTitle是计算属性。

定义如下，对input框里输入的title转大写。

注意

① computed与methods同级；

② 字母转大写的方法时toUpperCase();

③ 计算属性使用时不用加().

④ methods方法在template中调用，要加 ()，  事件处理函数不需要加括号()

⑤ 计算属性与方法的区别，介绍 | uni-app官网

尽管计算属性在性能上可能要优于方法，但其实还是methods用的多。