Vue入门

1. 建立Vue项目

npm init vue@latest


% 初始化后执行
cd <项目名>
cnpm install
npm run dev

2. Vue目录详解


node_modules	---	Vue项目运行依赖库
public	---	资源文件夹
src	---	源代码
index.html	---	入口html文件
package.json	---	信息描述文件
README	---	自述文件
vite.config.js	---	Vue配置文件

3. 模板语法

3.1 文本插值

<template>
    <p>{{ msg }}</p>
</template>
<script>
export default{
    data(){
        return {
            msg: "神奇的魔法"
        }
    }
}
</script>

3.2 JS表达式

每个绑定仅支持单一表达式，也就是一段能求值的JS代码。如果一段代码可以放在return后面，即可作为表达式：

<template>
  <p>{{ msg }}</p>
  <p>{{ hello }}</p>
  <p>{{ num + 1 }}</p>
  <p>{{ ok ? 'Yes':'No' }}</p>
  <p>{{ hello.split(' ').reverse().join(' ') }}</p>
</template>
<script>
export default{
    data(){
        return {
            msg: "神奇的魔法",
            hello: "Hello world!",
            num: 100,
            ok: true,
        }
    }
}
</script>

3.3 原始HTML

要想插入html，需要使用v-html指令

<p>{{ rawHtml }}</p>
<p v-html="rawHtml"></p>
<script>
export default{
    data(){
        return {
            rawHtml:"<a href='https://www.baidu.com'>这是一个链接</a>"
        }
    }
}
</script>

4 属性绑定

双大括号不能在HTML的attributes中使用，需要使用v-bind指令

<template>
  <div v-bind:class="dynamicClass" v-bind:id="dynamicId">测试</div>
</template>

<script>
export default {
  data(){
    return {
      dynamicClass: "appclass",
      dynamicId: "appid",
    }
  }
}
</script>

如果属性值被设置为null或undefined，则该属性会从渲染的元素上移除

简写：用冒号代替v-bind:

4.1 Boolean Attribute

4.2 动态绑定多个值


<template>
  <div v-bind="objectOfAttrs">测试</div>
</template>

<script>
export default {
  data(){
    return {
      objectOfAttrs : {
        id   : "appid",
        class: "appclass",
      }
    }
  }
}
</script>

5 条件渲染

类似于条件语句：

v-if
v-else
v-else-if
v-show

<template>
    <h3>条件渲染</h3>
    <div v-if="flag">你能看见我么</div>
    <div v-else>你看不见我</div>
    <div v-if="type === 'A'">A</div>
    <div v-else-if="type === 'B'">B</div>
    <div v-else-if="type === 'C'">C</div>
    <div v-else>Not A/B/C</div>
    <div v-show="flag">你能看见我么</div>
</template>
<script>
export default {
    data() {
        return {
            flag: true,
            type: "D"
        }
    },
}
</script>

v-show与v-if区别：

v-show修改的是display属性，因此具有较高的初始渲染开销
v-if如果最开始设置为false，则元素在最开始就不会被渲染。

6 列表渲染

使用v-for指令

<template>
    <h3>列表渲染</h3>
    <p v-for="item in names">{{item}}</p>
</template>
<script>
export default {
    data(){
        return {
            names:["程序员1", "程序员2", "程序员3"],
        }
    }
}
</script>

也可以使用index来获取位置信息

<template>
    <h3>列表渲染</h3>
    <p v-for="(item, index) in names">{{item}}：{{ index }}</p>
</template>
<script>
export default {
    data(){
        return {
            names:["程序员1", "程序员2", "程序员3"],
        }
    }
}
</script>

可以用of来代替in，更接近js的语法

<div v-for="item of items"></div>

v-for还可以用于遍历对象的属性，顺序分别为（value, key, index）

7 事件处理

使用v-on（或简写为@）来监听DOM时间：

v-on:click="methodName"或@click="handler"

7.1 内联事件处理器

<template>
    <h3>内联事件处理器</h3>
    <button @click="count++">Add</button>
    <p>{{ count }}</p>
</template>
<script>
export default {
    data() {
        return {
            count: 0,
        }
    }
}  
</script>

7.2 方法事件处理器

<template>
    <h3>内联事件处理器</h3>
    <button @click="addCount">Add</button>
    <p>{{ count }}</p>
</template>
<script>
export default {
    data() {
        return {
            count: 0,
        }
    }, 
    methods:{
        addCount(){
            this.count+=1
        }
    }
}  
</script>

8 事件参数

需要在内联事件处理器中访问原生 DOM 事件，可以向该处理器方法传入一个特殊的 $event 变量

<template>
    <h3>内联事件处理器</h3>
    <button @click="addCount('hello',$event)">Add</button>
    <p>{{ count }}</p>
</template>
<script>
export default {
    data() {
        return {
            count: 0,
        }
    }, 
    methods:{
        addCount(input, e){
            e.target.innerHTML = input + this.count
            this.count+=1
        }
    }
}  
</script>

9 事件修饰符

在处理事件时调用 event.preventDefault() 或 event.stopPropagation() 是很常见的。尽管我们可以直接在方法内调用，但如果方法能更专注于数据逻辑而不用去处理 DOM 事件的细节会更好。

为解决这一问题，Vue 为 v-on 提供了事件修饰符。修饰符是用 . 表示的指令后缀，包含以下这些：

.stop阻止事件冒泡
.prevent阻止默认事件
.self
.capture
.once事件只被处理一次
.passive

<template>
    <h3>事件修饰符</h3>
    <a href="https://www.baidu.com" @click.prevent="clickHandle">你好vue</a>
    <div @click="clickDiv">
        <p @click.stop="clickP">
            点我
        </p>
    </div>
</template>
<script>
export  default {
    methods:{
        clickHandle(e){
            console.log("click this!")
        },
        clickDiv(e){
            console.log("click div!")
        },
        clickP(e){
            console.log("click p!")
        }
    },
}
</script>

10. 数组变化监测

10.1 变更方法

当使用如下方法变更数组内容时，Vue可以自动更新UI：

push
pop
shift
unshift
splice
sort
reverse

10.2 替换数组

filter()、concat()和slice()等g发不会变更原数组，而是返回一个新数组，因此当数组调用这些方法时不会自动更新UI

<template>
    <h3>数组变化侦听</h3>
    <button @click="addListHandle">变更数组</button>
    <button @click="addListHandle1">不会变更数组</button>
    <ul>
        <li v-for="(name, index) in names" :key="index">{{ name }}</li>
    </ul>
</template>
<script>
export default {
    data() {
        return {
            //
            names : ['a','b','c'],

        }
    },
    methods: {
        //
        addListHandle(){
            // 数组变化侦听
            this.names.push('d')
            
        },
        addListHandle1(){
            // 数组变化不会引起UI自动更新
            this.names.concat(['e','f'])
            console.log(this.names)
        }
    }
}
</script>

11 计算属性

模板中的表达式虽然方便，但也只能用来做简单的操作。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护。因此，可以使用计算属性。

<template>
    <h3>计算属性</h3>
    <p>{{ computedData }}</p>
</template>
<script>
export default {
    data() {
        return {
            mydata:{
                name: "计算属性",
                content: ['Python', 'Java', 'Vue'],
            }
        }
    },
    computed: {
        // 计算属性
        computedData() {
            return this.mydata.content.length > 0 ? 'Yes' : 'No'
        }
    }
}
</script>

计算属性值会基于其响应式依赖被缓存

12 Class绑定和Style绑定

<template>
    <h3>Class绑定</h3>
    <p :class="{'activate': isActivate, 'err':isError}">Class样式绑定</p>
    <p :class="classObj">Class样式绑定2</p>
    <p :class="[arrActivate, arrError]">Class样式绑定3</p>
    <p :class="[isActivate?'activate':'err']">Class样式绑定4</p>
    <button @click="clickHandler">去掉警告</button>
</template>
<script>
export default {
    data() {
        return {
            isActivate: true,
            isError: true,
            classObj: {
                'activate': true,
                'err': false
            },
            arrActivate:'activate',
            arrError:'err',
        }
    },
    methods: {
        clickHandler() {
            this.isError = false;
        }
    }
}
</script>
<style>
.activate {
    font-size: 30px;
}
.err {
    color: red;
}
</style>

样式绑定时，只能数组里嵌套对象，不能反其道而行之。

<template>
    <h3>Style绑定</h3>
    <p :style="{color:activateColor, fontSize:fontsize + 'px'}">Style绑定1</p>
    <p :style="styleObj">Style绑定2</p>
    <p :style="[styleObj]">Style绑定3</p>
</template>
<script>
export default {
    data() {
        return {
            // 绑定style
            activateColor: 'green',
            fontsize: 20,
            // 绑定style对象
            styleObj: {
                color: 'red',
                fontSize: '30px'
            }
            // 绑定style数组

        }
    }
}
</script>

13 侦听器

<template>
    <h3>侦听器</h3>
    <p> {{msg}}</p>
    <button @click="updateHandle">改变侦听器</button>
</template>
<script>
export default {
    data(){
        return {
            msg: '侦听器'
        }
    },
    methods:{
        updateHandle(){
            this.msg = '侦听器改变'
        }
    },
    //侦听器
    watch:{
        // newValue: 新的值
        // oldValue: 旧的值
        // 函数名必须与侦听的数据名称一致
        msg(newValue, oldValue){
            // 数据发生变化时，会回调该函数
            console.log(newValue, oldValue)
        },
    }
}
</script>

14 表单输入绑定

在前端处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦。v-model 指令帮我们简化了这一步：

<template>
    <h3>表单输入绑定</h3>
    <form>
        <input type="text" v-model="message">
        <p>{{ message }}</p>
        <input type="checkbox" id="cb_test" v-model="checked" />
        <label for="cb_test">{{ checked }}</label>
    </form>
</template>
<script>
export default {
    data() {
        return {
            // 表单双向绑定
            message: 'hello',
            checked: true,
        }
    },
    methods: {
    }
}
</script>

修饰符

`.lazy`

默认情况下，v-model 会在每次 input 事件后更新数据，有时为了一些不需要那么及时的响应，可以添加 lazy 修饰符来改为在每次 change 事件后更新数据：

`.number`

可以在 v-model 后添加 .number 修饰符来管理输入，使用户输入自动转换为数字，如果该值无法被 parseFloat() 处理，那么将返回原始值。

`.trim`

自动去除用户输入内容中两端的空格

15 模板引用

虽然 Vue 的声明性渲染模型为你抽象了大部分对 DOM 的直接操作，但在某些情况下，仍然需要直接访问底层 DOM 元素。要实现这一点，可以使用特殊的 ref attribute：

<template>
    <h3>模板引用</h3>
    <div ref="container" class="container">{{ content }}</div>
    <button @click="btnClick">获取元素</button>
</template>
<script>
// 内容改变：{{}}
// 属性改变：v-bind(:)
// 事件改变：v-on(@)
export default {
    data() {
        return {
            content: "hello world"
        };
    },
    methods: {
        btnClick() {
            console.log(this.$refs.container);
            // 获取元素
            this.$refs.container.style.color = "red";
        }
    }
};
</script>

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 159,835评论 4赞 364
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,598评论 1赞 295
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 109,569评论 0赞 244
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 44,159评论 0赞 213
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,533评论 3赞 287
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,710评论 1赞 222
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,923评论 2赞 313
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,674评论 0赞 203
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,421评论 1赞 246
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,622评论 2赞 245
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,115评论 1赞 260
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,428评论 2赞 254
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,114评论 3赞 238
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,097评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,875评论 0赞 197
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,753评论 2赞 276
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,649评论 2赞 271