【Vue】Vue基础（1）

最新推荐文章于 2024-07-20 23:54:17 发布

Composition55555

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量106

点赞数

文章标签： vue javascript

本文链接：https://blog.csdn.net/weixin_41619240/article/details/110874750

版权

【笔记】2020入门笔记专栏收录该内容

32 篇文章 4 订阅

订阅专栏

VUE

一、Vue基础（1）

01.基本语法

<!-- 提供用于填充数据的标签 -->
<div id="app">
    <!-- 使用插值表达式{{}}填充数据，这个插值表达式可以支持基本的计算操作 -->
    {{ msg }}
    {{ age > 20 ? "Great" : "Worse"}}
</div>
<!-- 引入vue.js库文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // 创建vue实例
    let vm = new Vue({
        // el属性，用于设置要挂载vue实例的位置，值可以是CSS选择器或者DOM元素
        el: "#app",
        // data属性，用于存储数据，是一个对象，内部的值可以是任意类型
        data: {
            msg: "Hello Vue!",
            age: 24
        }
    });
</script>

02.基本指令

（01）`v-cloak`

搭配插值表达式使用，可以解决插值表达式存在的【闪动】问题
原理：先通过样式隐藏内容，然后周期内存中进行数据的替换，替换好数据后再显示最终的值

语法示例：

<style>
    [v-cloak] {
        display: none;
    }
</style>
 <div id="app">
        <div v-cloak>{{ msg }}</div>
</div>

注意：需要提供[v-cloak]样式

（02）`v-text`

用于填充纯文本，作用同插值表达式，但相比差值表达式更加简洁，且不会有闪动问题

语法：

<div v-text="msg"></div>
<!-- 作用同插值表达式-->
<div>{{ msg }}</div>

（03）`v-html`

用于填充HTML片段，作用同innerHTML，可以解析HTML标签
语法：
```
<div v-html='html'></div>
```

（04）`v-pre`

用于显示原始信息，即跳过VUE的编译过程，直接显示内部的差值表达式原式
语法：
```
<div v-pre>{{ msg }}</div>
```

（05）`v-once`

只渲染元素和组件一次，之后不再具有响应功能，可以提高性能（页面数据不可修改）
语法：
```
<div v-once>{{ msg }}</div>
```

（06）`v-model`

双向数据绑定，通常搭配表单元素使用，数据会随用户输入的变化而变化

语法：

<div>{{ msg }}</div>
<input type="text" v-model='msg'>

底层原理：
- 通过v-bind绑定value属性
- 通过v-on处理数据，实现双向绑定
```
<input v-bind:value="msg" v-on:input="msg=$event.target.value">
```

（07）`v-bind`

用于动态绑定一个或多个元素属性，简写为冒号:

语法：

<a :href='url'>属性绑定简写</a>
<!-- 这里的url是Vue实例中data属性的一个值 -->

样式绑定：

class绑定

<!-- 对象形式：red是样式，isRed是布尔类型的值，true表示应用该样式，false表示移除该样式 -->
<div :class="{ red: isRed }"></div>
<!-- 数组形式: classA和classB都是在data属性中定义好的样式，同样用布尔值来确定是否应用 -->
<div :class="[classA, classB]"></div>
<!-- 数组+对象形式： -->
<div :class="[classA, { classB: isB, classC: isC }]">

style绑定

<!-- 对象形式： -->
<div :style="{ fontSize: size + 'px' }"></div>
<!-- 数组形式：内部是已定义好样式的对象 -->
<div :style="[styleObjectA, styleObjectB]"></div>

（08）`v-on`

用于事件监听，可以简写为@
事件函数写在Vue实例中的methods属性中

语法

<button @click='add'>点击事件{{ num }}</button>
<script>
    let vm = new Vue({
        el: "#app",
        // 属性数据
        data: {
			num: 0
        },
        // 函数方法
        methods: {
            add: function(){
                // 注意在事件函数内部访问Vue实例的数据，需要加this，以指向本Vue实例
                this.num++;
            }
            
        }
    });
</script>

其它的

事件函数的调用方式：
- 绑定函数名称的形式（不加小括号）
- 绑定调用函数的形式（加上小括号）

事件函数的参数传递：

绑定函数名称的形式，会默认传递一个事件对象作为事件函数的参数，在事件函数中可以通过一个参数来接收这个事件对象，并在事件函数内部使用它

<button @click="add">函数名称</button>
<script>
    let vm = new Vue({
        methods: {
            add: function(event){
                // 可以接收默认参数
                console.log(event.target.innerHTML);
            }
        }
    });
</script>

绑定函数调用的形式，如果要传递事件对象，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event

<!-- 1,2,3是其它参数，$event是事件对象参数 -->
<button @click="add(1,2,3,$event)">函数名称</button>
<script>
    let vm = new Vue({
        methods: {
            add: function(a,b,c,event){
                // 可以接收默认参数
                console.log(a);
                console.log(event.target.tagName);
            }
        }
    });
</script>

事件修饰符
- 阻止冒泡事件：<button @click.stop='add'>阻止冒泡</button>
- 阻止默认行为：<a href="" @click.prevent='add'>阻止默认行为</a>
键盘修饰符
- 回车键：<input v-on:keyup.enter='submit'>
- 删除键：<input v-on:keyup.delete='delete()'>
- 可以自定义键盘修饰符：
```
Vue.config.keyCodes.变量 = 键值;
```

（09）`v-if`

根据条件判断来控制元素是否渲染到页面，用法同if，满足条件才渲染元素，否则跳过元素

语法：

<div v-if="num > 5">  num大于5  </div>

（10）`v-else-if`

作用同v-if，前一兄弟元素必须有 v-if 或 v-else-if，用法同if ... else if

语法：

<div v-if="num > 5">  num大于5  </div>
<div v-else-if="num > 3"> num大于3 </div>

（11）`v-else`

作用同v-if，前一兄弟元素必须有 v-if 或 v-else-if，用法同if ... else

语法：

<div v-if="num > 5">  num大于5  </div>
<div v-else-if="num > 3"> num大于3 </div>
<div v-else> num小于3 </div>

（12）`v-show`

用于控制元素是否显示，元素已经渲染到页面，通过表达式的真假来控制元素的display显示状态

语法：

<div v-show='flag'> 该元素现在可见 </div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            flag: true
        }
    });
</script>

与v-if的区别：

v-if的不可见是没有渲染到页面的

v-show的不可见是已经渲染到页面，但是通过元素的display样式设置为不可见

（13）`v-for`

用于遍历数据，基于源数据多次渲染元素或模板块

语法：

<ul>
    <!-- item为数组/对象的数据,colors为data属性中的数组 -->
    <li v-for="item in colors">
        {{ item }}
    </li>
    <!-- item为数组的数据，index为索引值 ，:key可以帮助vue区分不同元素，以提高性能-->
    <li v-for="(item,index) in colors" :key="item.id">
        {{ index + "----" +item }}
    </li>
    <!-- value为对象的value值,person为data属性中的对象 -->
    <li v-for=" value in person">
    	{{ value }}
    </li>
    <!-- value为对象的value值,name为对象的key值,index为索引值 -->
    <li v-for=" (value,name,index) in person">
    	{{ index }}:{{ name }}:{{ value }}
    </li>
</ul>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            colors: ["red", "blue", "yellow"],
            person:{
                name: "Ruovan",
                age: 24,
                sex: "male"
            }
        }
    });
</script>