Vue入门笔记

冰镇毛衣

已于 2022-10-19 13:56:31 修改

阅读量201

点赞数

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

于 2022-10-17 20:49:52 首次发布

本文链接：https://blog.csdn.net/sumatray/article/details/127345757

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、vue项目

方式一：引用 vue.js

方式二：使用Vue Cli搭建项目

二、Vue实例

el参数
挂载到某个HTML标签
data参数/属性
存放当前组件所需要的数据，
响应式
methods参数
可以直接通过Vue实例访问的方法
template
模板，如果不指定则使用默认的html模板
可以通过render参数从组建渲染

2.1 data属性与计算属性

使用条件：对于复杂的逻辑，应该使用计算属性
代码结构

computed:{

a(){},

b(){}

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue</title>
    <script src=".\js\vue.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
</head>
<body>
    <div id="app">
        <h3>表单操作</h3>
        {{uname}}
        <input type="text" name="username" v-model="username">
        <input type="button" value="提交"  @click="submit">
        
        <h3>动态加载</h3>
        <input type="button" value="加载" @click="load">
        <ol>
            <li v-for="item in datalist">{{item}}</li>
        </ol>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                username:'admin',
                datalist:[],
            }, 
            computed:{
                uname(){
                    return this.username[0]+"***"
                }
            },
            methods:{
                submit(){
                    console.log('获取表单的值',this.username)
                },
                load(){
                    this.datalist=['北京','上海']
                }
            },
            beforeMount(){
                console.log('beforeMount')
            },
            
        })
    </script>
</body>
</html>

2.2 MVVM架构

生命周期

三、Vue CLI

快速搭建项目
内置Babel、Eslint、PostCSS等插件
基于webpack，可灵活配置
图形化的创建和管理工具

环境要求：Node.js

npm install -g @vue/cli

cnpm install -g @vue.cli

yarn global add @vue.cli

3.1 创建第一个Vue项目

命令行方式创建：

vue create 项目名称

图形化方式创建

vue ui

3.2 项目结构分析：

文件解释：

package.json ----- 项目描述文件（包含一些依赖配置）

vue.config.js ----- 配置文件扩展

src/ ------ 源代码

dist/ ------- 构建后的代码（混合、压缩）

public/ ----- 公共的静态文件

node_modules/ ------ 项目依赖的安装目录

src/main.js ---- 程序的入口文件

public/index.html ---- 模板文件

四、 Vue组件化

4.1 面向组件编程

把一个页面按照模块拆分成N个小块

创建局部组件

Vue.component('my-component-name',{

    //  ...options
})

创建全局组件

步骤一：新建组件vue文件
步骤二：导入该组件
步骤三：注册该组件
步骤四：使用该组件

组件的复用：

data必须是一个函数

五、 Vue中的指令

5.1 模板语法

显示普通文本

<span>消息内容:{{msg}}</span>

javascript表达式

{{ msg.split('').reverse().join('')}}

{{ result >0 ? 'YES':'NO' }}

富文本

<span v-html="rawHtml"></span>

什么是指令

指令是带有v-前缀的特殊属性

5.2 常用的指令

v-bind ：
v-model ：
v-on
v-if/v-else
v-for
v-show

v-bind:响应式的更新HTML属性，设置class,style,href,src等
<a v-bind:href="url">...</a>

<a :href="url">...</a>
v-bind设置class

对象语法:
v-bind:class="{active:isActive,'text-danger':hasError}"
数组语法：
v-bind:class="[{active:isActive},errorClass]"
v-bind 设置style

对象语法
v-bind:style="{color:activeColor,fontSize:fontSize+'px'}"
数组语法
v-bind:style="[baseStyles,overridingStyles]"

v-if:

实例代码
<div v-if="score>=90">A</div>

<div v-else-if="score>=80">B</div>

<div v-else-if="score>=60">C</div>

<div v-else>D</div>
v-else元素必须紧跟在带v-if或者v-else-if的元素后面

v-show

原理：通过切换css的display属性来控制元素的显示与隐藏

示例代码
<h1 v-show="hasError">还有错误</h1>

v-for

基本语法：

<li v-for="item in items" :key="item.id">

<div v-for="item of items" :key="item.id"></div>

渲染数组：

<li v-for="(item,index) in items">

{{index}} - {{item.message}}
</li>

渲染对象

<div v-for="(value,key,index) in object">
{{index}}.{{key}}:{{value}}
</div>

DOM事件监听

使用v-on指令监听DOM事件

基本语法
<button v-on:click="counter += 1">Add 1 </button>

<button @click="counter +=1"> Add 1 </button>
鼠标事件修饰符

1.阻止事件冒泡
<a v-on:click.stop="doThis"></a>
2.阻止默认行为
<a v-on:click.prevent="doThis"></a>
3.点击事件只触发一次
<a v-on:click.once="doThis"></a>
键盘事件
<input v-on:keyup = "submit">
键盘事件修饰符

监听回车键
<input v-on:keyup.enter="submit">
监听删除/退格键
<input v-on:keyup.delete = "submit">

表单输入绑定

基本语法

<input v-model="message">

单选/多选的绑定

修饰符

trim:自动过滤首位输入的空白

number:自动转为数值类型

Vue组件通信

父子组件传递方式

为子组件定义props属性

<template>
<!--景点列表-->

<div class="box-main">
    <a href="" class="sight-item">
        <img v-bind:src="item.img" alt="" />
        <div class="right">
            <h5>{{item.name}}</h5>
            <van-rate v-model="item.score" readonly />
            <div class="tips">4人点评 |100%满意</div>

            <div class="tips">广东-广州</div>
            <div class="line-price">￥89 起</div>
        </div>
    </a>


</div>
</template>


<script>
// 子组件中添加props
export default{
    props:['item']
}

父组件中导入子组件和用v-bind绑定

 <div class="box-main">
            <!--v-bind绑定item-->
            <sight-item v-for="item in dataList" :key="item.id" :item="item"/>

            
        </div>

    </div>
</template>
<script>
import SightItem from '@/components/common/ListSight'

export default{
    components:{
        SightItem
    },
    data(){
        return{
            dataList:dataList
        }
    },
    created(){
        this.dataList = [
            { id: 1, name: '名称', img: '/static/home/hot/h1.jpg', score: 4.5, price: 89 },
            { id: 2, name: '名称', img: '/static/home/hot/h1.jpg', score: 4.5, price: 89 },
            { id: 3, name: '名称', img: '/static/home/hot/h1.jpg', score: 4.5, price: 89 },
            { id: 4, name: '名称', img: '/static/home/hot/h1.jpg', score: 4.5, price: 89 },
            { id: 5, name: '名称', img: '/static/home/hot/h1.jpg', score: 4.5, price: 89 },
        ]
    }
}

</script>

添加数据类型验证

name{
    type:String,
    required:true  
}

设置默认值，如果没有传值时显示

score:{

    type:Number,
    default:100
}

子到父

在子组件触发自定义事件
this.$emit('myEvent')
在父组件监听事件
<my-component v-on:myEvent="doSomething"></my-component>