Vue之指令系统

【一】指令系统之文本指令(v-text/v-html)

指令	释义
v-html	让HTML渲染成页面
v-text	标签内容显示js变量对应的值
v-show	放1个布尔值：为真标签就显示；为假标签就不显示
v-if	放1个布尔值：为真标签就显示；为假标签就不显示

v-show 与 v-if 的区别：

v-show：标签还在，只是不显示了（display: none）
v-if：直接操作DOM，删除/插入标签（安全性低）

【1】v-html：让HTML渲染成页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-html</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>

<div id="box">
    <ul>
        <li v-html="link1"></li>
    </ul>
</div>

</body>
<script>
    let vm = new Vue({
        el: '#box', // 在box这个div中可以写 vue的语法
        data: {
            link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>'
        }
    })
</script>
</html>

【二】指令系统之事件系统

【2】v-show：显示/隐藏内容

图片点击隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue/vue.js"></script>
</head>
<body>
<div id="box">
    <img src="https://t7.baidu.com/it/u=727460147,2222092211&fm=193&f=GIF" alt="" v-show="isShow">
    <button @click="handleShow">点我消失出现</button>
</div>

</body>
<script>
    let vm = new Vue({
        el: '#box', // 在box这个div中可以写 vue的语法
        data: {
            isShow: true
        },
        methods:{
            handleShow:function () {
                // 读到this.isShow就要取反
                this.isShow = !this.isShow
            }
        }
        
    })
</script>
</html>

【3】v-if：显示/删除内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>

<div id="box">
    <h3>案例：控件通过按钮来控制显示和消失</h3>
    <button @click="handleClick()">点我</button>
    <br>
    <div v-if="isCreated">isCreated</div>
</div>

</body>
<script>
    let vm = new Vue({
        el: '#box',
        data: {
            isCreated:true
        },
        methods: {
            handleClick(){
              this.isCreated = !this.isCreated    // this指的是当前的vue对象
            },
        }
    })
</script>
</html>

【3】函数使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue/vue.js"></script>
    <style>
        img {
            height: 300px;
            width: 200px;
        }
    </style>
</head>
<body>
<div id="app">
    <img src="https://wx1.sinaimg.cn/mw690/001X1s9jly1hoyqlz7ng3j60u0190dmr02.jpg" alt="" v-show="isShow">
    <hr>
    <button @click="handleShow">点我消失出现</button>

    <h1>事件指令--函数有参数</h1>
    <button @click="handleFunc1">不传参数-函数有参数</button>
    <br>
    <button @click="handleFunc1(isShow)">传参数-函数有参数</button>
    <br>
    <button @click="handleFunc1($event)">传参数-函数有参数-把事件对象传入</button>
    <br>
    <button @click="handleFunc2">多个参数-少传不加括号</button>
    <br>
    <button @click="handleFunc2()">多个参数-少传-加括号event不会自动传入</button>
    <br>
    <button @click="handleFunc2(1,2,3,4,5,6,)">多个参数-多传</button>
    <br>
    <button @click="handleFunc2(1,$event)">多个参数-event作为第二个参数</button>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            isShow: true
        },
        methods: {
            handleShow () {
                this.isShow=!this.isShow
            },
            handleFunc1(event){
                //1 如果在事件中触发函数，没有传参数，会自动把 事件对象传入
                console.log(event)
            },
            handleFunc2(a,b,c){
                console.log(a)
                console.log(b)
                console.log(c)
            }
        }
    })





    // es6 的对象写法
    var hobby=['抽烟','烫头']
    var obj={
        'name':'lqz',
        age:19,
        hobby,
        showName() {
            console.log(this.name)

        }
    }

    console.log(obj)
    obj.showName()

</script>
</html>

【三】属性指令

指令	释义
v-bind	直接写js的变量或语法（不推荐）
:	直接写js的变量或语法（推荐）

v-bind:class='js变量'可以缩写成：:class='js变量'

点击切换图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue/vue.js"></script>
    <style>
        img{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
<div id="app">
    <img :src="url" alt="">
    <hr>
    <button @click="handleChange">点击切换图片</button>
    <button @click="handleChange">点击选择图片</button>

</div>
</body>


<script>
    var vm = new Vue({
        el: '#app',
        data: {
            url:'https://t7.baidu.com/it/u=3435942975,1552946865&fm=193&f=GIF',

        },
        methods: {
            handleChange() {
                this.url='https://t7.baidu.com/it/u=2763645735,2016465681&fm=193&f=GIF'
            }
        }

    })


</script>
</html>

定时器，1秒切换一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue/vue.js"></script>
    <style>
        img{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
<div id="app">
    <img :src="url" alt="">
    <hr>
    <button @click="handleChange">点击切换图片</button>
    <button @click="handleChoose">点击选择图片</button>

</div>
</body>


<script>
    var vm = new Vue({
        el: '#app',
        data: {
            url:'https://t7.baidu.com/it/u=3435942975,1552946865&fm=193&f=GIF',
            t:null,

        },
        methods: {
            handleChange() {
                this.url='https://t7.baidu.com/it/u=2763645735,2016465681&fm=193&f=GIF'
            },
            handleChoose(){

                if (this.t!=null){
                    // 检测到非空就去停定时器
                    clearInterval(this.t)
                    this.t=null

                }
                    else{
                    var data_list=[
                        'https://t7.baidu.com/it/u=1285847167,3193778276&fm=193&f=GIF',
                        'https://t7.baidu.com/it/u=3646282624,1156077026&fm=193&f=GIF',
                        'https://t7.baidu.com/it/u=1736590035,2111436916&fm=193&f=GIF',
                        'https://t7.baidu.com/it/u=2459440176,2296325424&fm=193&f=GIF'

                    ]
                    count=0
                    // 要在外面声明
                    var _this=this
                    this.t=setInterval(function () {
                        // count每次++
                        if(count>3){
                            count=0
                        }
                        console.log(1)
                        _this.url=data_list[count]
                        count+=1

                    },1000)
                }

            }
        }

    })


</script>
</html>

【四】style与css

【1】数据的绑定

语法：:属性名='js变量/js语法'
- :class='js变量、字符串、js数组'
class：三目运算符、数组、对象
- :style='js变量、字符串、js数组'
- style：三目运算符、数组[{backgreound: 'red'},]、对象

【2】类属性的三种形式

class:

字符串，列表，对象
列表push更加，pop删除
{div1: true, div2: true, div3: true, div4: false}--》通过true和false控制样式

style：

字符串'background-color: green;height: 300px;width: 300px'---》字符串替换控制样式
数组：[{'background-color': 'green'}, {height: '300px'}, {width: '300px'}]--->追加数组，删除数组控制样式
对象：{backgroundColor: 'green', height: '330px', width: '300px'} --》通过根据key修改value控制样式

  <div :class="class_str">你好</div>
  <div :class="class_list">hello</div>
  <div :class="class_obj">hello</div>
<button @click="handleChange">点击变化</button>

let vm = new Vue({
    el: '#box', // 在box这个div中可以写 vue的语法
    data: {

      class_str:'div1 div2 ',
      class_list:['div1', 'div2'],
      //对象
       class_obj: {div1: true, div2: true, div3: true, div4: false},
    },
    methods:{
      handleChange(){
        this.class_str = 'div1 div2 div3 div4'
        this.class_list.push('div3')
        this.class_list.pop()
        this.class_obj.div4 = true
      }
    }

【3】style属性的三种形式

data: {
         
            //2 style 属性可以是字符串，数组，对象
            style_str: 'background-color: green;height: 300px;width: 300px',
            style_list: [{'background-color': 'green'}, {height: '300px'}, {width: '300px'}],
            style_obj: {backgroundColor: 'green', height: '330px', width: '300px'} // 用的多
        }

method:{
handleChange2() {
                //1 字符串形式
                this.style_str = 'background-color: green;height: 300px;width: 300px;margin:auto'
                //2 数组形式
                this.style_list.push({'margin':'auto'})
                //坑:以后如果改了对象，或数组，发现页面没有变化，实际上值被真正的改了
                Vue.set(this.style_list,3,{'margin':'auto'})

                //换背景色
                this.style_list[0]['background-color'] = 'pink' // 背景色不会变，值真变了，页面没变
                Vue.set(this.style_list, 0, {'background-color': 'red'}) // 会触发响应式，之前数组对象的操作可能不会触发

                //3 对象形式
                //换背景色
                this.style_obj['backgroundColor'] = 'pink'

                //居中
                this.style_obj['margin'] = 'auto' // 对象中原来没有，后来加进去，就不会触发响应式
                //使用set解决
                Vue.set(this.style_obj,'margin','auto')

            }
}

posted @ 2024-04-29 19:52 -半城烟雨阅读(32) 评论(0) 收藏举报

刷新页面返回顶部

-半城烟雨

Vue之指令系统

【一】指令系统之文本指令(v-text/v-html)

【1】v-html：让HTML渲染成页面

【二】指令系统之事件系统

【2】v-show：显示/隐藏内容

【3】v-if：显示/删除内容

【3】函数使用

【三】属性指令

【四】style与css

【1】数据的绑定

【2】类属性的三种形式

【3】style属性的三种形式

公告