VUE基本指令介绍

陌^O^

已于 2023-07-25 17:20:35 修改

阅读量515

点赞数

文章标签： vue.js 前端 javascript

于 2023-07-06 18:01:42 首次发布

本文链接：https://blog.csdn.net/qq_56597325/article/details/131565749

版权

v-html设置元素innerHTML（v-text类似innerText）

v-show和v-if 控制元素显示和隐藏

一、VUE介绍

vue是一个用于构建用户界面的渐进式框架

构建用户界面：基于数据动态渲染页面

MVVM模型

vue模型没有完全遵循MVVM模型，但是受到MVVM模型启发，因此常在文档中使用vm代表vue实例

M：Model数据层，服务器上业务逻辑操作，后端传递数据

V:View视图层，所看到的页面

VM:ViewModel视图数据层，mvvm模式核心，连接view和model桥梁

视图层发生改变，通过DOM Listeners修改数据层

数据层发生改变，通过Data Bindings修改视图层，从而实现数据视图双向绑定

二、创建VUE

1.创建容器

2.导入包

3.创建实例

4.指定配置项el data=>渲染数据 methods=>提供方法

el:指定挂载点 data:提供数据

三、Vue指令

v-html v-on v-show v-if v-else

v-bind v-for v-model

{{}}可以识别JS表达式，三目运算符，但不能识别if...else语句

v-html设置元素innerHTML（v-text类似innerText）

{{ }}无法识别html标签，通过v-html可以识别html标签

<body>
    <div id="app" v-html="name"></div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const student = new Vue({
            el:'#app',
            data:{
                name:`<h2>小华</h2>`,
                age:18
            }
        })
    </script>  
</body>

v-show和v-if 控制元素显示和隐藏

<div id="app" v-show="age >= 18">该学生成年了</div>

<div id="app" v-if="age >= 18">该学生成年了</div>

以上代码只变动div,都能显示该学生成年了；当age 小于18，则不显示“该学生成年了”

v-if 和 v-show都能实现元素显示和隐藏

区别在于：v-show,底层实际上通过display = none实现元素隐藏,

v-if,底层直接删除了元素。

所以，当一个元素反复显示隐藏用v-show,不反复显示隐藏则用v-if

v-else v-else-if

v-else、v-else-if辅助v-if进行条件渲染

<body>
    <div id="app">
        <p v-if="gender === 1">男</p>
        <p v-else-if="gender === 2">女</p>
        <p v-else>其他</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const student = new Vue({
            el:'#app',
            data:{
                name:'小华',
                age:18,
                gender:1,
                
            }
        })
    </script>  
</body>

v-on绑定事件

绑定事件 = 事件监听（v-on事件）+ 事件处method）

@事件名.stop阻止冒泡，相当于JS中stopPropagation

@事件名.prevent阻止默认行为，相当于JS中preventDefault

以事件默认行为举例

<a @click.prevent href="http://www.baidu.com">阻止默认行为</a>
//相当于以下代码
//<body> 
//        <a href='https://www.baidu.com/'>去百度</a>
//    <script>
//        let a = document.querySelector('a')
//        a.onclick=function(){
//            event.preventDefault()
//        }
//    </script>
//</body>

v-on可以简写为@

<body>
    <div id="one">
        <button  v-text="event" @click="count--"></button>
        <span>{{ count }}</span>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const obj = new Vue({
            el:'#one',
            data:{
                event:'减一',
                count:100
            }
        })
    </script>
</body>

<body>
    <div id="app">
        <button @click=fn(10)>饼干10元</button>
        <button @click="fn(6)">牛奶6元</button>
        <span>银行卡余额：{{money}}</span>
    </div>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                money:1000
                }, 
                methods:{
                    fn(price){
                        this.money-=price
                    }
            }
        })
    </script>
</body>

v-bind动态设置html标签属性

v-bind可以简写为” ： “

:class ={"类名：布尔值，类名：布尔值,..."}

:class = [类名，类名...]

<body>
<div id="app">
    <button @click="index--" v-show="list.length > 0">上一页</button>
    <img :src="list[index]">
    <button @click="index++" v-show="index < list.length-1 ">下一页</button>
  </div>
  <script>
    const app = new Vue({
      el:'#app',
      data:{
        index:0,
        list:[
        './imgs/11-00.gif',
          './imgs/11-01.gif',
          './imgs/11-02.gif',
          './imgs/11-03.gif',
          './imgs/11-04.png',
          './imgs/11-05.png'
        ],
      }     
    })
  </script>
</body>

v-for

v-for可以遍历数组、对象、数字

v-for=“（item，index）”in 数组

<body>
  <div id="app">
    <h3>便利店</h3>
    <ul>
      <li v-for="item in list">
        {{ item }}
      </li>
    </ul>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        list: ['饮料', '雪糕', '零食', '水果']
      }
    })
  </script>
</body>

v-model实现双向绑定

v-model.trim去除前后

v-model.number转数字

所谓双向绑定就是：

数据改变后，呈现的页面结果会更新

页面结果更新后，数据也会随之而变

<body>
  <div id="app">  
      账户：<input type="text" v-model="username"><br>
      密码：<input type="password" v-model="password"><br>
      <button @click="login">登录</button>
      <button @click="reset">重置</button>
    </div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:'#app',
      data:{
        username:'',
        password:''
      },
      methods:{
        login(){
          console.log(this.username,this.password );         
        },
        reset(){
          this.username='',
          this.password=''         
        }
      }

    })
    </script>
</body>

v-model扩展(组件使用)

数据改变，视图随之发生改变（数据由父组件提供，子传父）

视图改变，数据同时发生改变（子组件数据发生改变，父组件数据同时发生改变）

v-model默认会利用名为value的prop和名为input的事件

在父组件中使用v-model：

v-model="changeValue"

相当于：

:value= "changeValue"

@input="子传父的数据"

v-model简化代码核心步骤：

1、子组件中：props通过value接收，事件触发input

2、父组件中：v-model直接给组件绑定数据

陌^O^

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
VUE基本指令介绍

VUE指令、MVVM模型
复制链接

扫一扫