Vue的相关指令

<!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）不能在标签属性中使用{{}插值

html 复制代码

<!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"