Vue3基础

最新推荐文章于 2024-09-18 09:53:11 发布

稳重聪头

最新推荐文章于 2024-09-18 09:53:11 发布

阅读量298

点赞数 2

分类专栏： Vue 3 文章标签： vue.js javascript webview

本文链接：https://blog.csdn.net/nnjjn/article/details/123192924

版权

本文介绍了Vue3的基础知识，包括内置指令如v-text、v-html、v-bind、v-if/v-else-if/v-show、v-for，事件处理v-on及其修饰符，自定义指令和计算与监听的使用。讲解了如何利用v-for进行列表渲染，并强调了key属性的重要性。同时，还提到了计算属性computed和监听器watch的功能及应用实例。

摘要由CSDN通过智能技术生成

内置指令

v-text

<span v-text="msg"></span>
<!-- 等价于 -->
<span>{
  {msg}}</span>

注意：只能写一行表达式；不能写复杂js 例如if while

v-html

 <div class="app">
        <p>{
  {msg}}</p>
        <p v-html="msg"></p>
    </div>
<script>
    Vue.createApp({
        data(){
            return{
                msg:"hello~"
            }
        }
    }).mount(".app")
</script>

属性渲染v-bind

一些指令能够接收一个“参数"，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 属性：

 <div class="app">
        <p v-bind:title="msg">这是p标签</p>
        <p :title="msg">简写:title=" "</p>
        <button :disabled="canUse">按钮</button>
    </div>
<script>
    Vue.createApp({
        data(){
            return{
                msg:"学习vue",
                canUse:false,
            }
        }
    }).mount(".app")
</script>

v-bind:属性名="值"

可以简写为：

:属性名="值"

条件渲染v-if与v-else-if

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

实例：

 <div class="app">
        <p v-if="isLog">欢迎光临~</p>
        <p v-else>请登录</p>
    </div>
<script>
    Vue.createApp({
        data() {
            return { isLog: false }
        }
    }).mount(".app")
</script>

在对比一下多重条件渲染 v-else-if