Vue基础

进朱者赤

已于 2023-04-25 14:00:59 修改

阅读量339

点赞数

文章标签： vue.js javascript 前端

于 2023-04-25 11:42:02 首次发布

本文链接：https://blog.csdn.net/qq_30757161/article/details/130361498

版权

一.Vue介绍

1.什么是Vue？

HelloWorld

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>Helloworld</title>
</head>
<body>
    <h1>Hello World</h1>
    <hr>
    <div id="app">
        {{message}}
    </div>
 
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                message:'hello Vue!'
            }
        })
    </script>
</body>
</html>

看起来这跟单单渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被绑定在一起，所有的元素都是响应式的。我们如何知道？
打开你的浏览器的控制台（就在这个页面打开），并修改 app.message，你将看到上例相应地更新。

2.组件化构建

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：
在这里插入图片描述

二.基础应用

1.Vue实例

每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例启动的：
var vm = new Vue({
// 选项
})
，在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。

2.属性和方法

每个 Vue 实例都会代理其 data 对象里所有的属性。
注意只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

3.实例生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。在这个过程中，实例也会调用一些生命周期钩子，这就给我们提供了执行自定义逻辑的机会。
##4.常用指令:##
指令 (Directives) 是特殊的带有前缀 v- 的特性。指令的值限定为绑定表达式，指令的职责就是当其表达式的值改变时把某些特殊的行为应用到 DOM 上。

1.v-if v-else v-show 指令

注意：
v-else 元素必须紧跟在 v-if 或者 v-else-if 元素的后面——否则它将不会被识别。
用于根据条件展示元素的选项是 v-show 指令,不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 是简单地切换元素的 CSS 属性 display 。
注意， v-show 不支持语法，也不支持 v-else。

<h1 v-show="ok">Hello!</h1>

2.v-for指令

 <ul>
  <li v-for="(student,index) in students">
    {{index}}：{{student.name}} - {{student.age}}
  </li>
</ul>

3.v-text & v-html指令

如果在javascript中写有html标签，用v-text是输出不出来的，这时候我们就需要用v-html标签了：

注意：在生产环境中动态渲染HTML是非常危险的，因为容易导致XSS攻击。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用。

4.v-model指令

<input type="text" v-model="message">

5.v-bind指令

<input type="text" v-model="message">

5.1、直接绑定class样式

<div :class="className">1、绑定classA</div>

5.2、绑定classA并进行判断，在isOK为true时显示样式，在isOk为false时不显示样式。

<div :class="{classA:isOk}">2、绑定class中的判断</div>

5.3、绑定class中的数组

<div :class="[classA,classB]">3、绑定class中的数组</div>

5.4、绑定class中使用三元表达式判断

<div :class="isOk?classA:classB">4、绑定class中的三元表达式判断</div>

5.5、绑定style

<div :style="{color:red,fontSize:font}">5、绑定style</div>

5.6、用对象绑定style样式

<div :style="styleObject">6、用对象绑定style样式</div>

5.7.v-pre & v-cloak & v-once指令

这时并不会输出我们的message值，而是直接在网页中显示{{message}}

5.8 .v-cloak:

在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用。

5.9 .v-once:

在第一次DOM时进行渲染，渲染完成后视为静态内容，跳出以后的渲染过程

6.模版语法:

文本插值：
Message: {{ msg }}
js表达式：

{{ number + 1 }}<br>
{{ ok ? 'YES' : 'NO' }}<br>
{{ message.split('').reverse().join('') }}<br>
<div v-bind:id="'list-' + id"></div><br>

过滤器：过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示,允许多层过滤器：

{{ message | capitalize }}<br>
<div v-bind:id="message | capitalize"></div>

计算属性：计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。

7.事件监听:

用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码。
事件修饰符:

> 阻止单击事件冒泡<br>
> <a v-on:click.stop="doThis"></a><br>
> 提交事件不再重载页面<br>
> <form v-on:submit.prevent="onSubmit"></form><br>
> 修饰符可以串联<br>
> <a v-on:click.stop.prevent="doThat"></a><br>
> 点击事件将只会触发一次<br>
> <a v-on:click.once="doThis"></a>

8.表单绑定 :##

文本
多行文本
复选框
单选按钮
选择列表
绑定value
复选框
单选按钮
选择列表设置
修饰符

进朱者赤

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue基础

用于根据条件展示元素的选项是 v-show 指令,不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、通常可复用的组件构建大型应用。指令的值限定为绑定表达式，指令的职责就是当其表达式的值改变时把某些特殊的行为应用到 DOM 上。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用。v-else 元素必须紧跟在 v-if 或者 v-else-if 元素的后面——否则它将不会被识别。
复制链接

扫一扫