Vue入门

作者: 韧心222 | 来源:发表于2023-09-13 09:02 被阅读0次

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>