Vue指令学习

六类指令

  1. 内容渲染指令:
    1)v-text:作为属性使用,但会覆盖元素内部原有的内容;
    2){{}}插值表达式:实际开发中用的最多,只是内容的占位符,不覆盖原有的,但不能渲染带标签的数据,只能用在内容节点,不能用在属性节点
    3)v-html:可以把带有标签的字符串,渲染成真正的HTML内容。
<body>
    <!-- 2.创建一个要控制的页面,希望vue能控制下面的div,把数据填充到div内部 -->
    <div id="app">
        <p v-text="username">姓名:</p>
        <p v-text="gender">性别:</p>
        <hr>
        <p>姓名:{{username}}</p>
        <p>性别:{{gender}}</p>
        <hr>
        <div v-text="info"></div>
        <div>{{info}}</div>
        <div v-html="info"></div>
    </div>
    <!-- 1.导入vue的库文件,在window全局就有了Vue这个构造函数 -->
    <script src="./vue.js"></script>
    <!-- 3.创建Vue实例对象 -->
    <script>
        const vm = new Vue({
            // el属性是固定的写法,表示当前vm实例要控制的页面是哪个区域,接收的值是一个选择器
            el:'#app',
            // data对象是要渲染的页面上的数据
            data:{
                username:'张三',
                gender:'女',
                info:'<h4 style="coler:red;font-weight:bold">欢迎!</h4>'
            }
        })
    </script>
</body>
  1. 属性绑定指令:
    1)v-bind:可使用v-bind:指令为元素属性动态绑定值,简写,若绑定内容需要动态拼接,则字符串外面需包裹单引号,比如:<div :title="'box'+index">这是一个div</div>
<body>
    <!-- 2.创建一个要控制的页面,希望vue能控制下面的div,把数据填充到div内部 -->
    <div id="app">
        <input type="text" v-bind:placeholder="tips">
        <hr>
        <img :src="photo" alt="" style="width:150px">
        <hr>
        <div>1+2结果是:{{1+2}}</div>
        <div>{{tips}}反转的结果是:{{tips.split('').reverse().join('')}}</div>
        <div :title="'box'+index">这是一个div</div>
    </div>
    <!-- 1.导入vue的库文件,在window全局就有了Vue这个构造函数 -->
    <script src="./vue.js"></script>
    <!-- 3.创建Vue实例对象 -->
    <script>
        const vm = new Vue({
            // el属性是固定的写法,表示当前vm实例要控制的页面是哪个区域,接收的值是一个选择器
            el:'#app',
            // data对象是要渲染的页面上的数据
            data:{
                tips:'请输入用户名',
                photo:'https://v2.cn.vuejs.org/images/logo.svg',
                index:3
            }
        })
    </script>
</body>
  1. 事件绑定指令:
    1)v-on:使用v-on:指令为元素绑定事件,可以通过()传递参数,简写@
<body>
    <!-- 2.创建一个要控制的页面,希望vue能控制下面的div,把数据填充到div内部 -->
    <div id="app">
        <p>count的值是:{{count}}</p>
        <!-- 在绑定事件处理函数时可以通过()传递参数 -->
        <button v-on:click="add(2)">+1</button>
        <button @click="sub">-1</button>
    </div>
    <!-- 1.导入vue的库文件,在window全局就有了Vue这个构造函数 -->
    <script src="./vue.js"></script>
    <!-- 3.创建Vue实例对象 -->
    <script>
        const vm = new Vue({
            // el属性是固定的写法,表示当前vm实例要控制的页面是哪个区域,接收的值是一个选择器
            el:'#app',
            // data对象是要渲染的页面上的数据
            data:{
                count:0
            },
            // 定义事件的处理函数
            methods: {
                add:function(n){
                    // alert(1)
                    // console.log(vm === this)
                    vm.count += n
                },
                // ES6中可以省略:function
                sub(){
                    // alert(2)
                    this.count -= 1
                }
            },
        })
    </script>
</body>

在事件处理函数绑定时没有传参,methods中函数会自动接收一个事件,但想要传参时事件就被覆盖了, 所以提供了内置变量,$event,原生DOM的事件对象e

<body>
    <!-- 2.创建一个要控制的页面,希望vue能控制下面的div,把数据填充到div内部 -->
    <div id="app">
        <p>count的值是:{{count}}</p>
        <!-- 需求:如果count值是偶数,则按钮背景颜色变红,否则取消颜色 -->
        <!-- 在事件处理函数绑定时没有传参,methods中函数会自动接收一个事件,但想要传参时事件就被覆盖了
        所以提供了内置变量,$event,原生DOM的事件对象e -->
        <button @click="add(1,$event)">+n</button>
    </div>
    <!-- 1.导入vue的库文件,在window全局就有了Vue这个构造函数 -->
    <script src="./vue.js"></script>
    <!-- 3.创建Vue实例对象 -->
    <script>
        const vm = new Vue({
            // el属性是固定的写法,表示当前vm实例要控制的页面是哪个区域,接收的值是一个选择器
            el:'#app',
            // data对象是要渲染的页面上的数据
            data:{
                count:0
            },
            // 定义事件的处理函数
            methods: {
                add(n,e){
                    this.count += 1
                    // 判断值是否为偶数
                    if(this.count % 2 ===0){
                        // 偶数
                        e.target.style.backgroundColor = 'red'
                    }else{
                        // 奇数
                        e.target.style.backgroundColor = ''
                    }
                },
                
            },
        })
    </script>
</body>

(1)事件修饰符.prevent:阻止事件默认行为
(2)事件修饰符.stop:阻止冒泡行为

<body>
    <!-- 2.创建一个要控制的页面,希望vue能控制下面的div,把数据填充到div内部 -->
    <div id="app">
        <!-- 在方法中通过操作e来阻止链接跳转太麻烦,可以使用修饰符.prevent实现阻止事件默认行为 -->
        <a href="http://www.baidu.com" @click.prevent="show">跳转到百度首页</a>
        <hr>
        <div @click="divHandler" style="height: 150px;background-color:antiquewhite;padding-left:100px;line-height:150px;">
            <!-- 阻止向外冒泡修饰符.stop -->
            <button @click.stop="btnHandler">按钮</button>
        </div>
    </div>
    <!-- 1.导入vue的库文件,在window全局就有了Vue这个构造函数 -->
    <script src="./vue.js"></script>
    <!-- 3.创建Vue实例对象 -->
    <script>
        const vm = new Vue({
            // el属性是固定的写法,表示当前vm实例要控制的页面是哪个区域,接收的值是一个选择器
            el:'#app',
            // data对象是要渲染的页面上的数据
            methods: {
                show(){
                    // 此时控制台打印后,页面跳转,跳转后打印内容就不见了,为了避免,可以使用
                    // e.preventDefault()来阻止事件的默认行为,即不进行跳转
                    // e.preventDefault()
                    console.log('点击了链接')
                },
                btnHandler(){
                    console.log('btnHandler')
                },
                divHandler(){
                    console.log('divHandler')
                }
            },
        })
    </script>
</body>

(3)按键修饰符@keyup.esc:按esc键触发事件

<body>
    <!-- 2.创建一个要控制的页面,希望vue能控制下面的div,把数据填充到div内部 -->
    <div id="app">
        <input type="text" @keyup.esc="clearInput">
    </div>
    <!-- 1.导入vue的库文件,在window全局就有了Vue这个构造函数 -->
    <script src="./vue.js"></script>
    <!-- 3.创建Vue实例对象 -->
    <script>
        const vm = new Vue({
            // el属性是固定的写法,表示当前vm实例要控制的页面是哪个区域,接收的值是一个选择器
            el:'#app',
            // data对象是要渲染的页面上的数据
            data:{
                
            },
            methods: {
                clearInput(e){
                    console.log('触发了clearInput事件')
                    e.target.value=''
                }
            },
        })
    </script>
</body>
  1. 双向绑定指令:
    1)v-model:只能在表单元素中有意义(个人理解是双向交互的),比如:
    (1)input输入框:type=“radio"或"checkbox"或"XXXX”
    (2)textarea
    (3)select
<body>
    <!-- 2.创建一个要控制的页面,希望vue能控制下面的div,把数据填充到div内部 -->
    <div id="app">
        <p>用户的名字是:{{username}}</p>
        <input type="text" v-model="username">
        <hr>
        <input type="text" :value="username">
        <hr>
        <select  v-model="city">
            <option value="">请选择城市</option>
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">广州</option>
        </select>
    </div>
    <!-- 1.导入vue的库文件,在window全局就有了Vue这个构造函数 -->
    <script src="./vue.js"></script>
    <!-- 3.创建Vue实例对象 -->
    <script>
        const vm = new Vue({
            // el属性是固定的写法,表示当前vm实例要控制的页面是哪个区域,接收的值是一个选择器
            el:'#app',
            // data对象是要渲染的页面上的数据
            data:{
                username:'张三',
                city:'2'
            }
        })
    </script>
</body>

2)专用修饰符
(1).number:自动进行数值转换(有点点疑问。。。)
(2).trim:自动过滤首尾空格
(3).lazy:在"change"时而非"input"时更新,比如在焦点在输入框时不更新数据,失去焦点时在更新

<body>
    <!-- 2.创建一个要控制的页面,希望vue能控制下面的div,把数据填充到div内部 -->
    <div id="app">
        <!-- v-model.number=""可以解决直接将数据转换为数值计算 -->
        <input type="text" v-model.number="n1">+<input type="text" v-model.number="n2">={{n1 + n2}}
        <hr>
        <input type="text" v-model="number">
        <button @click="getData">打印输入数据</button>
        <hr>
        <input type="text" v-model.trim="number2">
        <button @click="getData2">打印去掉前后空格的数据</button>
        <hr>
    </div>
    <!-- 1.导入vue的库文件,在window全局就有了Vue这个构造函数 -->
    <script src="./vue.js"></script>
    <!-- 3.创建Vue实例对象 -->
    <script>
        const vm = new Vue({
            // el属性是固定的写法,表示当前vm实例要控制的页面是哪个区域,接收的值是一个选择器
            el:'#app',
            // data对象是要渲染的页面上的数据
            data:{
                n1:11,
                n2:2,
                number:'',
                number2:''
            },
            methods: {
                getData(){
                    console.log(this.number)
                },
                getData2(){
                    console.log(this.number2)
                }
            },
        })
    </script>
</body>
  1. 条件渲染指令
    1)v-if:原理是每次动态创建或移除元素,实现元素的显示和隐藏
    2)v-show:原理是动态为元素添加或移除display:none样式,来实现元素的显示和隐藏
    :如果要频繁的切换元素显示状态,用v-show性能会更好,若刚进入页面时,某些元素默认不需要被展示,而且后期这个元素很可能也不需要被展示出来,此时v-if性能更好
  2. 列表渲染指令
    1)v-for,只要用到了,就需要在后面绑定key属性,且尽量把id作为key的值,key的值只能是字符串或数字类型,key的值是不能重复的,要与值是唯一对应的那种
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值