Vue2框架的使用
一、使用方式
- 使用cdn的方式引用vue源程序
- 使用脚手架搭建项目
二、脚手架搭建项目
- 安装脚手架
//全局安装脚手架命令
npm install -g @vue/cli
- 创建项目
//创建项目的命令 vue create 项目
vue create project1
-
选项(空格选择,回车确认)
- Please pick a preset: (Use arrow keys), 选择一个预加载的模板,我们选择自定义
Vue CLI v5.0.8
? Please pick a preset:
Default ([Vue 3] babel, eslint) --vue3的项目
Default ([Vue 2] babel, eslint) --vue2的项目,里面包含了babel, esling两个插件>
> Manually select features --自定义创建项目,用户自已选择创建的选项
2. 选择要安装的插件
Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and<enter> to proceed)
(*) Babel --编译vue文件用的插件>
( ) TypeScript --使用ts开发vue
( ) Progressive Web App (PWA) Support --技术集合,可以在移动,h5上运行的一系列的技术
( ) Router --vue路由
( ) Vuex --状态机
( ) CSS Pre-processors --sass
( ) Linter / Formatter --语法检查插件
( ) Unit Testing --单元测试插件
( ) E2E Testing --单元测试插件
3. 选择vue的版本
? Choose a version of Vue.js that you want to start the project with
3.x
> 2.x
4. 选择以上插件的配置是否独立一个文件
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files --独立的配置文件
In package.json --所有配置都放在这一个文件中
三、vue组件
1 组件的基本组成
- template-用于编写html的代码
- script-用于编写js代码
- style-用于编写css代码
vscode安装vue插件之后可以使用快捷键vb生成组件结构
2 组件的使用步聚
- 导入组件
<script>
//第一步导入我们要使用的组件
import Hello from '@/components/Hello';
</script>
- 注册组件
<script>
export default {
//设置组件的名称,名称是可以忽略的
name: 'App',
//components 注册组件
components: {
Hello: Hello
}
}
</script>
- 使用组件
<template>
<Hello/>
</template>
四、变量的使用
1 定义变量
<script>
export default {
//data 用于配置页面中使用的数据,且必须是return 一个新对象
data() {
return {
msg: "hello world"
}
}
}
</script>
data 必须return 一个新对象,是为了保证组件被多个地方调用时的数据隔离。
2 使用变量 - mustache语法
<template>
{{ msg }}
</template>
五、指令
1 v-for 循环指令
功能:可以循环一个变量。变量的类型可以是数组、字符串、数字、对象
栗子:
<template>
<div v-for="(item, index) in listMsg" v-bind:key="item">
{{item}}-{{index}}
</div>
</template>
<script>
export default {
data() {
return {
listMsg: ['a', 'b', 'c']
}
}
}
</script>
2 v-bind 绑定属性
功能:v-bind绑定标签的属性
栗子:
<template>
//第一种语法
<img v-bind:src="goods.img" style="max-width:80px;max-height:50px" />
//第二语法 省略 v-bind
<img :src="goods.img" style="max-width:80px;max-height:50px" />
//可以使用变量
<img :src="imgSrc" style="max-width:80px;max-height:50px" />
</template>
实战-动态改变样式
- 动态改变class ,class变量支持字符串、对象、数组形式
<template>
<!-- 字符串 -->
<div class="tab_item" :class="str" >商品</div>
<!-- 对象形式 为true表示生效 -->
<div class="tab_item" :class="{tab_active: true,tab_active2: false}" >商品</div>
<!-- 数组形式 -->
<div class="tab_item" :class="arr" >商品</div>
</template>
<script>
export default {
data() {
return {
str: "tab_active tab_active2",//字符串
arr: ["tab_active","tab_active2"], //数组
}
}
}
</script>
<style>
.tab_active {
color: #1890ff;
}
.tab_active2 {
color: #1890ff;
}
</style>
- 动态改变style ,style变量支持字符串、对象
<template>
<!-- 字符串形式的绑定, tab1为字符串类型 -->
<div class="tab" :style="str">全部</div>
<!-- 对象类型的绑定,tab2为一个对象类型 -->
<div class="tab" :style="obj" >订单</div>
</template>
<script>
export default {
data() {
return {
str: "color:red",//字符串
obj: {color:'red'}, //对象
}
}
}
</script>
3 v-on 绑定事件
功能:v-on绑定标签的事件
栗子:
<template>
//绑定事件
<button class="btn_common" v-on:click="exportData">导出</button>
// @ 绑定事件简写语法
<button class="btn_common" @click="exportData">导出</button>
</template>
<script>
export default {
// methods 编写事件响应函数
methods: {
exportData(e) {
console.log(e)
}
}
}
</script>
4 v-if/v-show 显示控制指令
1 v-if
功能: 可以控制元素节点是否渲染或删除,为true时渲染,为false删除。
<template>
<GroupGoods v-if="curPage == 'GroupGoods'"></GroupGoods>
<StyleSwitch v-else-if="curPage == 'StyleSwitch'"></StyleSwitch>
<ClassSwitch v-else></ClassSwitch>
</template>
2 v-show
v-show的值控制元素的显示与否,为true时显示,为false时不显示。节点一直在,利用css控制是否显示
<template>
<GroupGoods v-show="curPage == 'GroupGoods'"></GroupGoods>
<StyleSwitch v-show="curPage == 'StyleSwitch'"></StyleSwitch>
<ClassSwitch v-show="curPage == 'ClassSwitch'"></ClassSwitch>
</template>
5 使用template解决v-if与v-for的冲突
template可以将一组元素包裹起来,然后统一控制元素的显示与否。并且不会额外给浏览器渲染节点。
<template v-if="showDetail" >
<div v-for="(item, index) in listMsg" v-bind:key="item">
{{item}}-{{index}}
</div>
</template>
6 v-text/v-html 内容渲染指令
<template v-if="showDetail" >
<td>
<span v-text="goods.splusCount + '个'"> </span>
</td>
<td>
<span v-html="goods.limitCount + '个'"></span>
</td>
</template>
7 v-model 表单数据双向绑定
功能:v-model 实现双向绑定的机制是绑定表单的 :value 属性,这样表单就可以接收数据;当表单值改变的时候触发input事件,通过此事件改变数据变量,这便是双向通信。
栗子
<template>
//绑定事件
<input v-model="username" />
</template>
<script>
export default {
data(){
return {
username:'xiaowang'
}
}
}
</script>
六、计算属性
功能:用于计算数据,得到计算结果。
栗子:
<script>
export default {
// computed 编写计算属性
computed: {
sumJoin(){
let total = 0;
for (let goods of this.listGoods) {
total = total + goods.joinCount
}
console.log("sumJoin执行")
return total;
}
}
}
</script>
计算属性拥有缓存机制,计算属性的更新时机为:它所依赖(引用,包含)的变量的值发生改变,计算属性就会触发更新。
七、侦听器
功能:侦听变量的变化,去执行配置的侦听器函数
栗子:
<script>
export default {
data(){
return {
objUser:{name:'xiaozhang'}
}
},
// 对象语法
watch: {
objUser: { //与被侦听的变量名一致
handler(nv, ov) {
console.log("objUser, handler侦听器",nv, ov)
},
deep: true, //深度侦听对象的属性值
immediate: true // 首次加载时,侦听器立即执行
}
}
}
</script>
八、过滤器
功能: 对要显示的数据进行转换或是格式化
栗子:
<template>
<!-- 在mustache语法中使用过滤器 -->
{{ goods.overTime | formartDate('yyyy-MM') }}
</template>
<script>
export default {
filters: {
formartDate(par, formatType) {
let arrDate = par.split("-");
let result = arrDate[0] + "年" + arrDate[1] + "月" + arrDate[2] + "日";
console.log("formatDate", par, formatType)
return result;
}
}
}
</script>
全局filter ,在main.js中注册过滤器
//定义全局的过滤器
Vue.filter("formartDate", (par, formatType) => {
console.log("全局过滤器", par, formatType);
let arrDate = par.split("-");
let result = arrDate[0] + "年" + arrDate[1] + "月" + arrDate[2] + "日";
return result;
})
九、ref标记节点
功能: 通过ref可以获取到dom元素
栗子:
<template>
<!-- 定义ref -->
<input ref="txtDate" style="margin-left: 10px;" />
</template>
<script>
export default {
methods: {
getRef() {
//获取dom元素
//获取文本框的值
let val = this.$refs.txtDate.value;
}
}
}
</script>
十、插槽
插槽分类
- 匿名插槽, slot
- 具名插槽
- 作用域插槽
<!-- 定义匿名插槽 -->
<slot></slot>
<!-- 父组件使用匿名插槽 -->
<template>
<span>hello </span>
<span>5月4号</span>
</template>
<!-- 定义具名插槽 -->
<slot name="tow"></slot>
<!-- 父组件使用具名插槽 -->
<template slot="tow">
<span>hello </span>
<span>5月4号</span>
</template>
<!-- 定义作用域插槽 -->
<!-- 作用域插槽 是子组件向父组件传参使用-->
<slot name="tow" :c="name"></slot>
<!-- 父组件使用作用域插槽 -->
<template slot="tow" slot-scope="gg">
<span>5月4号 {{gg.c}}</span>
</template>