vue2基础

喝奶只喝酸牛奶

已于 2023-08-13 20:53:36 修改

阅读量54

点赞数

分类专栏： vue 文章标签： vue

于 2023-08-09 22:54:35 首次发布

本文链接：https://blog.csdn.net/qq_39373985/article/details/132199285

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Vue2框架的使用

一、使用方式

使用cdn的方式引用vue源程序
使用脚手架搭建项目

二、脚手架搭建项目

安装脚手架

//全局安装脚手架命令
npm install -g @vue/cli

创建项目

//创建项目的命令 vue create 项目
vue create project1

选项（空格选择，回车确认）
1. 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>