Vue指令基础小总结

原创 于 2022-02-28 20:38:34 发布
· 694 阅读 · 0 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

本文详细介绍了Vue.js中的各种指令，包括文本渲染的{{}}、v-text和v-html，属性渲染的v-bind，条件渲染的v-if/v-else/v-show，列表渲染的v-for，事件处理的v-on及修饰符，表单绑定，计算属性computed，以及watch监听。通过实例展示了这些指令的用法，帮助读者深入理解Vue.js的基础操作。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文本渲染

{{ }} 语法

每个绑定都只能包含单个表达式

<body>
<div> {{msg}}</div>

<script>
const app = Vue.createApp({
  data() {return { msg: ‘你好Vue3’ } }
})
const vm = app.mount('#app')
</script>
</body>

v-text指令

<div v-text="msg"> {{msg}}</div>

v-html指令

为了输出真正的 HTML，你需要使用v-html

<body>
    <div id="app">
        <!-- 不会标识标签 -->
        <p v-text="msg"></p>
        <!-- 可以识别标签 -->
        <p v-html="msg"></p>
    </div>
    <script>
        Vue.createApp({
            data(){
                return {msg:"<strong>还可以接受</strong>"};
            }
        }).mount("#app")
    </script>
</body>

因为v-text不能识别标签而v-html可以所以出现下面的结果 

属性渲染

 v-bind

我们可以使用v-bind指令给html标签动态的绑定属性。

<button v-bind:disabled="canUse">按钮</button>

v-bind可以简写为：

<button :disabled="canUse">按钮</button>

<div :title="title"> 学Vue先打基础</div>

<body>
    <div id="app">
        <p v-bind:title="msg">鼠标停留显示</p>
        <!-- 可以简写为 ： -->
        <p :title="msg">学习Vue</p>
        <button :disabled="canUse">按钮</button>

    </div>
    <script>
        Vue.createApp({
            data(){
                return {
                    msg:"学习使我开心",
                    canUse:true,
                }
            }
        }).mount("#app")
    </script>
</body>

条件渲染

v-if

指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 真 值的时候被渲染。

返回真时隐藏，返回假时显示

 也可以用 v-else

<body>
    <div id="app">
        <p v-if="isLog">欢迎回来，我的朋友</p>
        <p v-else>请登录后操作</p>
        <button>登录</button>
    </div>
    <script>
        Vue.createApp({
            data(){
                return {
                    isLog:false
                }
            }
        }).mount("#app")
    </script>
</body>

 v-else-if

v-else-if 多重条件渲染

<body>
    <div id="app">
        <p v-if="score>=90">优秀</p>
        <p v-else-if="score>=80">良好</p>
        <p v-else-if="score>=70">中等</p>
        <p v-else-if="score>=60">及格</p>
        <p v-else>还需努力</p>
    </div>
    <script>
        Vue.createApp({
            data(){
                return {
                    score:78
                }
            }
        }).mount("#app")
    </script>
</body>

结果：

 v-show

另一个用于根据条件展示元素的选项是 v-show 指令 表达式返回真才渲染

<div v-show="canShow">我喜欢你</div>

v-show与v-if区别：

v-show CSS方法隐藏

v-if  移除dom节点方式隐藏

频繁切换用v-show 反之用v-if

列表渲染

v-for

我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。v-for 还支持一个可选的第二个参数，即当前项的索引。

注：key 属性为了让Vue内部给遍历的节点给一个唯一的标识，以便更好的去（排序，过滤等操作）为了性能优化；key的值要唯一

<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in list" :key="item">{{item}}-{{index+1}}</li>
        </ul>
    </div>
    <script>
        Vue.createApp({
            data(){
                return {
                    list:["vue","react","angular","js"]
                }
            }
        }).mount("#app")
    </script>
</body>

结果：

 你也可以用 v-for 来遍历一个对象的 property。

<li v-for="value in obj">

   {{value}}

</li>

data(){

      return {obj:{title:"Vue3.0入门",state:"加油",pdate:"2022-3-1"}}

}

v-for 也可以接受整数。在这种情况下，它会把模板重复对应次数。

<div v-for="n in 10" :key="n">{{ n }} </div>

v-for与v-if一同使用

注意我们不推荐在同一元素上使用 v-if 和 v-for可以把 v-for 移动到 <template> 标签中来修正：

<body>
    <div id="app">
        <!-- 只显示偶数 -->
        <template v-for="item in 10">
            <p v-if="item%2===0">{{item}}</p>
        </template>
    </div>
    <script>
        Vue.createApp({
            data(){
                return {}
            }
        }).mount("#app")
    </script>
</body>

结果：

 事件

监听事件

我们可以使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件，并在触发事件时执行一些 JavaScript

<body>
    <div id="app">
        <p>
            <button @click="say">点我</button>
        </p>
    </div>
    <script>
        Vue.createApp({
            data() {
                return {
                    num: 1
                }
            },
            methods: {
                say(e) {
                    console.log(e, e.target);
                    alert("别点了,别点了，再点就没了")
                }
            }
        }).mount("#app")
    </script>
</body>

结果：

 事件处理方法

许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。

<button @click="greet">问候</button>

Vue.createApp({

    data(){return{name:'vue'}},

    methods: {
        greet(event){

            alert('你好'+this.name)

       }
    } 

}).mount('#app')

内联处理器中的方法

除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法：

<button @click="say('你好')">问候你好</button>

<button @click="say('吃饭了没')">问候吃饭</button>

Vue.createApp({

        methods:{
            say(msg){alert(msg)}
    } 

}).mount('#app')

事件修饰符

Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。

<div @click="showMe" style="padding: 50px;">
    <!-- 阻止单击事件继续冒泡 -->
    <div class="son" @click.stop="showMe" style="background-color: #dbffd0;">阻止事件冒泡</div>
    <!-- 单击事件不跳转 -->
    <a @click.prevent="showMe" href="http://baidu.com">百度</form>
   <!-- 修饰符可以串联 -->
    <a @click.stop.prevent="showMe"  href="http://baidu.com">串联</a>
    <!-- 只执行一次 -->
    <button @click.once="showMe">我爱你</button>
</div>

methods:{
    showMe(event){ alert(event.target.innerHTML) }
}

.stop  阻止事件冒泡

.prevent  阻止默认事件 

.capture  捕获

.self  自身元素触发

.once  执行一次

.passive  滚动立即触发，不等待滚动完成（移动端性能提升）

按键修饰符

监听键盘事件时，我们经常需要检查特定的按键。可以使用按键修饰符

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input @keyup.enter="submit" />

Vue 为最常用的键提供了别名

.enter  回车

.tab  制表

.delete “删除”和“退格”键

.esc  取消

.space空格

.up  上

.down  下

.left  左

.right  右

系统修饰键 

按下相应按键时才触发鼠标或键盘事件的监听器。

.enter  回车

.ctrl

.alt

.shift

.meta (⌘或Windows 徽标键 ⊞)

.exact 精确

鼠标按钮修饰符 

.left

.right

.middle

这些修饰符会限制处理函数仅响应特定的鼠标按钮。

表单绑定 

文本与多行文本

文本
<input v-model="msg" />
<p>{{ msg }}</p>

多行文本
<p style="white-space: pre-line;">{{ msg2 }}</p>
<br />
<textarea v-model="msg2" ></textarea>

复选框checkbox

单个复选框

<input type="checkbox" id="checkbox" v-model="checked" />

<label for="checkbox">{{ checked }}</label>

多个复选框

<body>
    <div id="app">
        <p>爱好</p>
        <label><input type="checkbox" value="唱歌" v-model="fav">唱歌</label>
        <label><input type="checkbox" value="跳舞" v-model="fav">跳舞</label>
        <label><input type="checkbox" value="rap" v-model="fav">rap</label>
        <label><input type="checkbox" value="篮球" v-model="fav">篮球</label>
        <p>{{fav}}</p>
    </div>
    <script>
        Vue.createApp({
            data(){
               return{fav:[]}
            }
        }).mount("#app")
    </script>
</body>

单选框radio

<body>
    <div id="app">
        性别：{{sex}}
        <br>
        <label><input type="radio" v-model="sex" value="1" name="group">男</label>
        <label><input type="radio" v-model="sex" value="2" name="group">女</label>
        <label><input type="radio" v-model="sex" value="3" name="group">保密</label>
    </div>
    <script>
        Vue.createApp({
            data(){
               return{sex:3}
            }
        }).mount("#app")
    </script>
</body>

结果：

选择框 select 

<body>
    <div id="app">
        学历：{{level}} <br>
        <select v-model="level">
            <option disabled value="">请选择</option>
            <option value="清华">清华</option>
            <option value="北大">北大</option>
            <option value="211">211</option>
            <option value="985">985</option>
            <option value="哈佛">哈佛</option>
        </select>
    </div>
    <script>
        Vue.createApp({
            data(){
               return{level:""}
            }
        }).mount("#app")
    </script>
</body>

结果：

 值绑定

<body>
    <div id="app">
        <!-- number 强制转换为数字 -->
        <!-- lazy 触发事件由input事件改为change事件 -->
        <input type="text" v-model.number.lazy="num">
        <p>{{10+num}}</p>
    </div>
    <script>
        Vue.createApp({
            data(){
               return{num:5}
            }
        }).mount("#app")
    </script>
</body>

结果：

表单修饰符 

.lazy
你可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步
<input v-model.lazy="msg" />

.number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
<input v-model.number="age" type="text" />

.trim
过滤首尾空白
<input v-model.trim="msg" />

 计算 computed

对于任何包含响应式数据的复杂逻辑，你都应该使用计算属性（从现有数据计算出新的数据）


<p>计算翻转的信息: {{ rmsg }}</p>

<script>
const app = Vue.createApp({
    computed: {		 
        rmsg: function() {						 
            return this.msg.split('').reverse().join('')
        }
    }
}).mount("#app")
</script>

watch 监听

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器,当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的

<body>
    <div id="app">
        <button @click="num++">{{num}}</button>
        <br>
        <button @click="num+=5">{{num}}</button>
    </div>
    <script>
        Vue.createApp({
            // 监听：检测数据的变化 并执行回调函数
            watch:{
                num:function(nval,oval){
                    console.log("数据由",oval,"变化为",nval);
                }
            },
           data(){
               return {num:1}
           }
        }).mount("#app")
    </script>
</body>

结果：

 引用数据类型需要添加处理器handler与dee

watch:{

    person:{

        handler(state){

            console.log(state);

            localStorage.setItem("age",this.person.age);

        },

        deep:true

    }

}

Class 与Style

Class

操作元素的 class 列表和内联样式 因为它们都是 attribute

Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

<div

class="static"

:class="{ active: isActive, 'text-danger': hasError }">你好class绑定</div>

data() {

  return {

  isActive: true,

  hasError: false

  }

}

上面的语法表示 active 这个 class 存在与否将取决于 isActive值

我们可以把一个数组传给 :class，以应用一个 class 列表：

<div :class="[activeClass, errorClass]"></div>

Style内联样式

对象语法:

CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名

<body>
    <div id="app">
        <button @click="size++">大</button>
        <br>
        <button @click="size--">小</button>
        <p :style="{'fontSize':size+'px',color:'red'}">落花有意随流水，而流水无心恋落花。</p>
    </div>
    <script>
        Vue.createApp({
            data() {
                return {
                    size:16
                }
            }
        }).mount("#app")
    </script>
</body>

自定义内置指令

除了核心功能默认内置的指令 (例如 v-model 和 v-show)，Vue 也允许注册自定义指令。

你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。ze

<body>
    <div id="app">
        <input type="text" v-focus="flag">
        <button @click="flag=!flag">获取</button>
    </div>
    <script>
        Vue.createApp({
            // 自定义指令：操作dom
            directives:{
                // 指令的名称为foucs
                "focus":{
                    // mounted；定dom节点挂载后执行
                    // beforeUpdate，更新前；
                    beforeUpdate(el,binding){
                        // el 指令所在的dom节点
                        // binding。value 指令的值
                        console.log(el,binding);
                        // 如果指令的值为真，则获取焦点，否则失去焦点
                        if(binding.value){
                            el.focus()
                        }
                    }
                }
            },
            data() {
                return {
                    flag:false
                }
            }
        }).mount("#app")
    </script>
</body>

这篇文章有点长，因为到这我们的Vue基础基本学完了。 

整日发愁
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值