vue侦听器以及基本指令

最新推荐文章于 2022-08-11 17:04:16 发布

拾玥花开

最新推荐文章于 2022-08-11 17:04:16 发布

阅读量495

点赞数

分类专栏： vue 前端文章标签： vue js javascript

本文链接：https://blog.csdn.net/weixin_44691513/article/details/109911919

版权

前端同时被 2 个专栏收录

90 篇文章 8 订阅

订阅专栏

vue

13 篇文章 0 订阅

订阅专栏

文章目录

- - vue侦听器以及基本指令

vue侦听器以及基本指令

Vue的侦听属性

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。

<div id="app">
    {{name}} <br>
    <input type="text" v-model="name"> <br>//时时监听name
    {{user.age}} <br>
</div>
<script>
	const vm = new Vue({
        el: '#app',
        data: {
            name: 'dream',
            user: {
                username: 'kevin',
                age: 20
            }
        },
        watch: {
            name(newV,oldV){
                console.log(newV,oldV)
            },
            user: {
                deep: true,
                handler(newV,oldV){
                    console.log('新',newV)
                    console.log('旧',oldV)
                }
            }
        }
    })
</script>

vue基本指令

v-once

上面有介绍过,如何将一个vue实例中的data对象中的数据渲染到dom元素中, 但是如果我们只想在网页加载时,只渲染一次数据, 后期即便是data中的数据变化了, 我们也不要再次进行渲染, 那么我们可以用v-once指令

  <p v-once>
            {{msg+' hello world'}}
  </p>

v-html 标签代码渲染

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，我们可以使用 v-html 指令：

 <p v-html="elec"></p>
   //data中的数据
   elec:'<p> 你好<br>世界</p>',

V-if指令

if指令可以完全根据表达式的值在DOM中生成或移除一个元素（重建）。如果v-if表达式赋值为false，那么对应的元素就会从DOM中移除；否则，对应元素的一个克隆将被重新插入DOM中。记住, 这个是直接决定是否在网页进行渲染, 而不是元素是否显示

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nDdgFMoH-1605973174398)(E:\凯文的前端博客\框架部分images\vue2.1.png)]$

V-show指令

v-show指令是根据表达式的值来显示或者隐藏HTML元素。当v-show赋值为false时，元素将被隐藏。查看DOM时，会发现元素上多了一个内联样式style=“display:none”。
代码示例如下：

	<p v-show='ad'>{{sex}}</p>
    <p v-show='bd'>{{sex+msg}}</p>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VgIiIunv-1605973174400)()]

V-if和V-show指令辨析

在切换v-if模块时，vue.js有一个局部编译/卸载过程，因为v-if中的模板可能包括数据绑定或子组件。v-if是真实的条件渲染，因为它会确保条件块在切换时合适地销毁与重建条件块内的事件监听器和子组件。

v-if是惰性的一一如果初始渲染时条件为假，则什么也不做，在条件第一次变为真时才开始局部编译（编译会被缓存起来）。
相比之下，v-show简单得多一一元素始终被编译并保留，只是简单地基于切换。
一般来说，v-if有更高的切换消耗，而v-show有更高的初始渲染消耗。
因此，如果需要频繁地切换，则使用v-show较好；如果在运行时条件不大可能改变，则使用v-if较好。

V-else指令

顾名思义，v-else就是JavaScript中else的意思，它必须跟着v-if，充当else功能。

V-else-if指令

v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：

类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。
注意:这些个if或是else只会有一个生效

V-model指令

v-model指令用来在input、select、text、checkbox、radio等表单控件元素上创建双向数据绑定。根据控件类型v-mode1自动选取正确的方法更新元素。尽管有点神奇，但是v-model不过是语法糖，在用户输入事件中更新数据，以及特别处理一些极端例子。
代码示例如下：

   <input type="text" v-model="name"> <br>
 		data:{
               msg:'kevin',
               sex:'男',
               name:'ad',
              }

<div id="app">
        <h1>{{msg}}</h1>
        <input type="text" v-model.lazy="username"><em>{{username}}</em><br> 
        <textarea v-model="text" id="" cols="30" rows="10"></textarea>
        <input type="checkbox" id="aa" v-model="checked">
        <label for="aa">{{checked}}</label>
        <br>
        <input type="checkbox" value="运动" id="ab" v-model="list">
        <label for="ab">{{checked}}</label>
        <input type="checkbox" value="运动1" id="ab" v-model="list">
        <label for="ab">{{checked}}</label>
        <br>
        <select v-model="city">
            <option value="">请选择</option>
            <option value="长沙">长沙</option>
            <option value="上海">上海</option>
        </select>
        {{city}}
        <br>
        <button v-on:click="hClicked">click</button>

    </div>    
    <script src="js/vue.js"></script>
    <script>
        const vn=new Vue({
            el:"#app",
            data:{
                msg:'kevin',
                username:'kd',
                text:'',
                checked:true,
                list:'',
                city:'',
            },
            methods:{
                hClicked:function(e){
                    console.log(this);
                    console.log('kevin durant');
                    console.log(this.username);
                }
            }
        })
    </script>

V-model指令详解之修饰符lazy

.lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：

 <input type="text" v-model.lazy="username"><em>{{username}}</em><br>

V-bind指令

v-bind指令用于响应更新HTML特性，将一个或多个attribute，或者一个组件prop动态绑定到表达式。
以下我们来看v-bind的几个简单的例子:

<img id="app" :src="src" :alt="msg">
<!– 简写方式属性 -->

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。
不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>1-vue基本使用</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background: pink;
        }
        .hover{
            background: purple;
        }
        .active{
            background: skyblue;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="box"></div>
    <div class="box" v-bind:class="isHover">类名</div>
    <div v-bind:class="['box',isHover]"></div>
    <div v-bind:class="['box',{active:isActive}]"></div>

    <div :class="{box: isBox,active: isActive}"> : -> 动态绑定属性 </div>
    <div :class="{box,active: isActive}"> : -> 动态绑定属性 </div>

    <div :class="isActive ? 'hover' : 'active' "> 动态绑定属性 </div>
</div>

<script src="./js/vue.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            isHover: 'hover',
            isActive: false,
            isBox: true,
            box: true
        },
        methods: {

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

style

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>1-vue基本使用</title>
    <style>
        div{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<div id="app">
    <div style="background:hotpink"></div>
    <div v-bind:style="{background:'blue'}"> :style </div>
    <div :style="divStyles"> :style </div>

    <p abc="foo"></p>
    <p :dream="userInfo"></p>
</div>

<script src="./js/vue.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            divStyles: {background:'yellow'},
            userInfo: {
                name: 'dream',
                age: 18
            }
        },
        methods: {

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

拾玥花开

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue侦听器以及基本指令

文章目录vue侦听器以及基本指令Vue的侦听属性vue基本指令v-oncev-html 标签代码渲染V-if指令V-show指令V-else指令V-else-if指令V-model指令V-model指令详解之修饰符lazyV-bind指令vue侦听器以及基本指令Vue的侦听属性Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。<div id="app"> {{name}} <br> <input type="text" v
复制链接

扫一扫

专栏目录