Vue的相关指令

2023-12-15 19:56:42

目录

1、Vue 是什么

2、插值表达式{{ }}

3、Vue的特点

4、Vue指令

1、内容渲染指令

2、条件渲染指令

v-if 与v-show的区别

v-html,v-text与{{}}的区别

5、事件绑定指令

6、属性绑定指令

7、列表渲染指令

8、表单指令

1、Vue 是什么

概念：Vue 是一个用于 构建用户界面 的 渐进式 框架

vue理解

Vue 是一个用于 构建用户界面 的 渐进式 框架，（vue是js的一个渐进式框架）

具有响应式，数据驱动视图的思想，不推荐直接操作dom，底层封装了dom，

组件开发思想，提供了一些指令，能够提高开发效率，构建单一页面应用

使用步骤：

  • 引入Vue
  • 准备dom
  • 创建Vue实例
  • {{ }}插值表达式

创建Vue实例，初始化渲染的核心步骤:

1.准备容器

2.引包(官网) –开发版本/生产版本

3.创建Vue实例 new Vue()

4.指定配置项 el data =>渲染数据

  • el指定挂载点，选择器指定控制的是哪个盒子

  • data提供数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 引线上的vue包 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <div id="app">
<!-- 只有在此标签内的元素，才会被vue所管理 -->
    </div>
    <script>
        const app=new Vue({
            el:'#app',//挂载
            data:{

            }
        })
    </script>
</body>
</html>

2、插值表达式{{ }}

语法格式：{{ 表达式 }}

作用：把{{}}中的值渲染到页面中

利用表达式进行插值，将数据渲染页面中

注意：(1）使用的数据必须存在( data)

(2）支持的是表达式，而非语句，比如:if for ...

(3）不能在标签属性中使用{{}插值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 构建用户界面
        基于数据渲染页面
     -->
    <div id="app">
        {{info}}-{{arr}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
        new Vue({
            //元素
            el: '#app',
            //数据
            data: {
                info: 'hello vue',
                arr:[1,2,3]
            }
        })
    </script>
</body>

</html>

3、Vue的特点

1.不需要操作dom（vue底层做了封装，开发人员不需要直接操作dom）

2.响应式: 数据改变---->视图自动改变

响应式原理核心：Object.defineProperty( )

3.组件化开发

. . .

4、Vue指令

指令 v-开头的属性

1、内容渲染指令

v-html / v-text => innerHTML / innerText -------给元素添加内容

语法：v-html = “ data中的数据”

2、条件渲染指令

v-if / v-else-if / v-else, v-show

v-if="表达式" ，当表达式值为true，v-if所作用的元素显示，否则隐藏

v-show="表达式" ，当表达式值为true，v-show所作用的元素显示，否则隐藏

v-if 与v-show的区别

v-if 控制元素显示与隐藏，通过js创建dom元素或删除元素

v-show 通过css的display显示与隐藏

频繁切换元素显示与隐藏用v一show,其余可以用v-if

v-if 可以与v-else-if ,v-else 搭配使用

v-html,v-text与{{}}的区别

内容不改变用{{}}

v-html,v-text可以改变元素的内容

{{}}里的内容要等js引入才显现，有闪烁，闪烁后{{}}消失

5、事件绑定指令

Vue指令v-on
1。作用:注册事件=添加监听+提供处理逻辑
2.语法:
v-on:事件名= "内联语句"
v-on:事件名= "methods中的函数名"
3.简写:@事件名
4.注意:methods函数内的this指向Vue实例

传参：

调用方法不传递任何参数，默认第一个形参就是事件对象

传递参数，实参要通过$event

6、属性绑定指令

Vue指令v-bind
1.作用:动态的设置html的标签属性→src url title
2.语法:v-bind:属性名="表达式"
3.注意:简写形式:属性名="表达式"

v-bind：属性=‘data中的数据’

或简写 ：属性=‘data中的数据’

属性灵活时

：属性名=‘js表达式’ 动态绑定

不加：是字符串

7、列表渲染指令

Vue指令v-for
1.作用:基于数据循环，多次渲染整个元素→数组、对象、数字...
2.遍历数组语法:
item每一项， index下标
省略index: v-for = "item in数组"

v-for中的 key
语法:key属性="唯一标识"
作用:给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。

v-for 中的key - 不加key
v-for的默认行为会尝试原地修改元素（就地复用)

注意点:
1.key的值只能是字符串或数字类型
2.key的值必须具有唯一性
3.推荐使用id 作为key (唯一)，不推荐使用index作为key(会变化，不对应)

8、表单指令

Vue指令v-model
1.作用:给表单元素使用，双向数据绑定→可以快速获取或设置表单元素内容
①数据变化→视图自动更新
视图变化→数据自动更新
2.语法:v-model= '变量'

v-model 双向绑定 用于表单元素

v-bind : 属性名=’data中数据' 动态绑定

文本框中：v-model 等价于 : value + @input

$event 事件对象

V-model="数据"等价于:value="数据"+@input="数据=$event.target.value"

文章来源:https://blog.csdn.net/m0_56713342/article/details/135018902
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。