Vue基础语法_vue document.createelement-CSDN博客

本文链接：https://blog.csdn.net/weixin_62128198/article/details/129249829

v-if指令

v-if是条件渲染指令，它根据表达式的真假来删除和插入元素，它的基本语法如下：v-if="expression"

expression是一个返回bool值的表达式，表达式可以是一个bool属性，也可以是一个返回bool的运算式。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h3>班长多少钱，局决定觉定晚上吃什么</h3>
        <div v-if="money >= 1000"> 晚上火锅</div>
        <div v-else-if="money >= 5000"> 晚上大餐</div>
        <div v-else-if="money >= 100"> 南昌拌粉 </div>
        <div v-else> 饿着 </div>
    </div>

    <script src="../vue.js"></script>

    <script>
        new Vue({
            el:'#app',
            data:{
                money:1000
            }
        })
    </script>
</body>
</html>

v-show指令

v-show也是条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性（display）。

<body>
    <!-- v - show 和 v - if 都可以用来控制标签的显示与隐藏
＜标签 v - show ='布尔值'></标签>
＜标签 v - if ='布尔值'><／标签>
当布尔值为 true ，他们就显示；当布尔值为 false ，他们就隐藏，
--> 
  <!-- <div is="app">
    <div v-show="isShow">我是由v-show控制的</div>
    <div v-if="isShow">我是由v-if控制的</div>
  </div>

  <script src="../vue.js"></script>

  <script>
    new Vue ({
        el:'#app',
        data:{
            isShow:true
        }
    })
  </script>

   面试题！重要！重要！重要！【 v - show 】
1．本质就是标签 display 设置为 none ，控制隐藏。只是基于 CSs 进行切换。2.v- show 有更高的初始渲染消耗。
3.V- show 适合频繁切换的情况。
【 v - if 】
1．动态的向 DOM 树内頃加或者删除 DOM 元素。2.v- if 有更高的切换消耗。
3.v- if 适合运行条件很少改变的情况。 -->
</body>

v-for指令

v-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似：v-for="item in items"

items是一个数组，item是当前被遍历的数组元素。

v-for遍历数组和对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 【v-for】
    语法；<标签 v-for='item in 数组'> </标签> -->

    <div id="app">
        <button @click="add"> 在最后添加一个</button>
        <ul>
            <!-- 第一个参数是元素，第二个参数是下标 与名字无关 -->
            <li v-for="item in list">{{ item }}---{{ index}}</li>
        </ul>
    </div>

    <script src="../vue.js"></script>

    <script>
        new Vue({
            el:'#app',
            data:{
                list:['刘备','关羽','张飞','赵云']
            },
            methods:{
                add(){
                    this.list.push('马超')
                }
            }
        })

        // // 原生写法
        // for (let i = 0 ; i < list.length; i ++){
        //     let li = document.createElement('li')
        //     li.lnnerHTML = list[i]
        //     u1.appendchild(li)
        // }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <ul>
            <!-- 对象有多少个属性就会产生多少个这样的标签 -->
            <li v-for="item in obj">{{ item }}</li>
            <!-- 第一个参数是属性值，第二个参数是属性名 -->
            <li v-for="(val,key) in obj">{{ val }}---{{ key }}</li>
        </ul>
    </div>


    <script src="../vue.js"></script>

    <script>
        new Vue({
            el:'#app',
            data:{
                obj:{
                    name:'jack',
                    age:16,
                    sex:'男'
                }

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

v-bind指令

v-bind指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute）。

动态绑定a元素的href属性

动态绑定img元素的src属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <a href="http://www.baidu.com">跳转</a>
        <a v-bind:href="url">跳转</a>
        <button @click="change" target="_blank">跳转</button>
    </div>

    <script src="./../vue.js"></script>

    <script>
        new Vue({
            el:'#app',
            data:{
                url:'http://mi.com'
            },
            methods:{
                change(){
                    this.url = 'http://taobao.com'
                }
            }
        })
    </script>
</body>
</html>

v-on指令

v-on指令用于给监听DOM事件，它的用语法和v-bind是类似的，例如监听<a>元素的点击事件：<a v-on:click="doSomething">

有两种形式调用方法：绑定一个方法（让事件指向方法的引用），或者使用内联语句。

v-on参数

情况一：如果该方法不需要额外参数，那么方法后的()可以不添加。但是注意，如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去。

情况二：如果该方法需要传入某个参数，同时需要event时，可以通过$event传入事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- v-on指令是事件绑定指令，当用户需要点击，按下键盘，滚动鼠标等操作时，
    想要添加一些自己的逻辑处理时，就可以为特定的元素绑定一些特定的事件。 -->

    <!-- 我们先在被vue实例挂载的标签div中，放入一个按钮为input标签，在标签内部写入v-on指令， -->
    <!-- 冒号(:)后面就是事件名，等号(=)后面就是需要绑定的事件名称 -->
    <div id="app">
        <!-- 当点击这个按钮 就调用fn1系数 -->
        <button v-on:click="fn1">点我试一试</button>  
         <!-- 当双击这个按钮  就调用fn1系数 -->
        <button v-on:dblclick="fn1">再试一次</button> 
         <!-- 当移入这个按钮 就调用fn2函数 -->
        <button mouseenter="fn2">移入我</button>

        <!-- 简写形式 吧v-on改成@ -->
        <h4>下面是简写形式</h4>
        <hr>
        <!-- 当点击这个按钮 就调用fn1系数 -->
        <button @click="fn1">点我干嘛</button>
        <!-- 当双击这个按钮  就调用fn1系数 -->
        <button @dblclick="fn1">再试一次</button>
        <!-- 当移入这个按钮 就调用fn2函数 -->
        <button @mouseenter="fn2">移入我</button>
    </div>
   

    <script src="./../vue.js"></script>

    <script>
        new Vue({
            el:'#app',
           
            methods:{
                fn1(){
                    alert('点我干嘛')
                },
                fn2(){
                    alert('你怎么了吗')
                }

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

v-model

1、双向绑定示例

MVVM模式本身是实现了双向绑定的，在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定。

v-model其实是一个语法糖，它的背后本质上包含两个操作

v-bind绑定一个value属性

v-on指令给当前元素绑定input事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入 -->
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- <button @click="msg = '你好'"></button> -->

        <!-- 输入框 -->
        <!-- v-model获取输入的内容 -->
        <!-- <input type="text" v-model="msg"> -->
        <!-- <p>{{ msg }}</p> -->

        <!-- 下拉框 -->
        <!-- v-model获得选中的value值 -->
        <!-- <select v-model="fruit">
            <option value="apple">苹果</option>
            <option value="orange">橘子</option>
            <option value="banana">香蕉</option>       
            <option value="red pitaya">火龙果</option>       
        </select> -->


        <!-- 复选制；只有选中和未选中两种状态 -->
        <!-- v-model得到true或flase -->
        <!-- <input type="checkbox" v-model="chk">
    </div>

        <script>
            // 例子
        new Vue({
            el:"#app",
            data:{
                msg:'小马',
                fruit:'火龙果',
                chk:true
            }
        })
    </script>
</body> -->
</html>

v-model修饰符

lazy修饰符：

默认情况下，V-mode默认是在input事件中同步输入框的数据的。

也就是说，一旦有数据发生改变对应的data的数据就会自动发生改变。

lazy修饰符可以让数据在失去焦点或者回车时才会更新：

number修饰符：

默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。

但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。

number修饰符可以让在输入框中输入数字的内容自动转成数字类型：

trim修饰符：

如果输入的内容首尾有很多空格，通常我们希望将其去除口trim修饰符可以过滤内容左右两边的空格

lazy、number、trim。