VUE之属性、条件、渲染、事件指令及修饰符

最新推荐文章于 2024-07-04 10:21:44 发布

web-Queen

最新推荐文章于 2024-07-04 10:21:44 发布

阅读量371

点赞数 1

文章标签： VUE之属性、条件、渲染、事件指令及修饰符

本文链接：https://blog.csdn.net/weixin_45626166/article/details/102476976

版权

基本指令v-bind

v-bind动态属性：常用于动态绑定HTML元素的属性，例如id、class、href、src等属性。改变任一方数据后都会实时更新。

 <div id="app">
         <a :href="url">链接</a>
         <img :src="img">
     </div>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            url:"https://www.baidu.com",
            img:"https://www.baidu.con/img/bd_logn.png">
        }
    })
</script>

在这里插入图片描述
语法格式1：单个语法格式

v-bind:attributeName=variable

语法格式1：单个语法格式
v-bind:attributeName=variable

 <div id="app">
          <a
        v-bind:class='classname'
        v-bind:target='target'
        v-bind:href="href"
        v-bind:title="title">
              {{info}}
          </a>
      </div>
<script type="text/javascript">
       new Vue({
           el:"#app",
           data:{
                classname:"one tow there",
               info:"百度一下",
               href:"http://www.baidu.com",
               target:"_top",
               title:"百度一下，你就知道"
           }
       })
</script>

语法格式2：对象语法格式
v-bind=“{attributeName1:variable1,attributeName2:variable2,……}”
案例：在页面中利用Vue实例的变量制作一个超级链接

 <div id="app">
          <a v-bind="{class:link.class,href:link.href,target:link.target,title:link.title}">
              {{link.info}}
          </a>
      </div>

</body>
<script type="text/javascript">
    new Vue({
        el:'#app',
        data:{
            link:{
                class:'one two',
                info:'百度一下',
                href:'http://www.baidu.com',
                target:'_top',
                title:'百度一下，你就知道'
            }
        }
    });
</script>

语法格式3：数组语法格式”绑定类名”
v-bind:attributeName=“[variable1,variable2,……]”
案例（绑定类名）：

<div id="app">
         <a :class="[class1,class2]">{{info}}</a>
      </div>

</body>
<script type="text/javascript">
    new Vue({
        el:'#app',
        data:{
            info:"百度一下",
            class1:"classname1",
            class2:"classname2"
        }
    });
</script>

基本指令v-if

指令主要职责就是当表达式值改动时，相应的将某些行为应用到DOM上，以v-if为例
v-if指条件性渲染，为true时渲染DOM，否则不进行渲染：

<div id="app">
         <p v-if="show">显示这段文本</p>
      </div>

</body>
<script type="text/javascript">
    new Vue({
        el:'#app',
        data:{
           show:true
        }
    });
</script>

数据驱动DOM是Vue.js的核心理念，所以尽量避免直接操作DOM，只需要维护关注数据即可，DOM的事Vue会进行处理。

基本指令v-show

v-show也是指条件性渲染，用法与v-if类似：
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

 <div id="app">
         <p v-show="show">显示这段文本</p>
      </div>

</body>
<script type="text/javascript">
    new Vue({
        el:'#app',
        data:{
           show:true
        }
    });
</script>

v-show与v-if

vue中显隐方法常用两种，v-show和v-if，但这两种是有区别的
在这里插入图片描述

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

基本指令v-on

v-on： @方法名
v-on用于绑定事件监听器，实现一些交互功能。如下所示
语法：v-on:事件类型=”方法名”

 <div id="app">
         <p v-show="show">显示这段文本</p>
          <button @click="hide">点击隐藏</button>
      </div>
</body>
<script type="text/javascript">
    new Vue({
        el:'#app',
        data:{
           show:true
        },
        methods:{
            hide:function () {
                this.show=false
            }
        }

    });
</script>

在这里插入图片描述

在button按钮上绑定事件，除了click还可以是其他事件类型，例如dblclick、keyup、mouseover等。

v-on表达式
语法：v-on:事件类型=”内联语句”
表达式除了方法名，也可以是内联语句

v-on修饰符
以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
①.stop：阻止事件的传递，即阻止事件向上冒泡。

 <div id="app" :title="title_app" @click="show_app">
         <button :title="title_btn" @click.stop="show_btn">按钮</button>
      </div>
</body>
<script type="text/javascript">
    new Vue({
        el:'#app',
        data:{
           title_app:"父级提示信息",
            title_btn:"自己提示信息"
        },
        methods:{
           show_btn:function () {
               alert(this.title_btn)
           },
            show_app:function () {
                alert(this.title_app)
            }
        }

    });
</script>

②.prevent：阻止对象的默认行为。.prevent会调用 event.preventDefault() 即取消事件的默认动作。

v-on修饰符
.capture：使用事件捕获机制

 <div id="app" :title="title_app" @click.capture="show_app">
         <button :title="title_btn" @click.stop="show_btn">按钮</button>
      </div>

.self：当事件在该元素自身触发时执行相应的事件处理程序，在该元素的子元素上不触发。

  <div id="app" :title="title_app" @click.self="show_app">
         <button :title="title_btn" >按钮</button>
      </div>
</body>
<script type="text/javascript">
    new Vue({
        el:'#app',
        data:{
           title_app:"父级提示信息",
            title_btn:"自己提示信息"
        },
        methods:{
           show_btn:function () {
               alert(this.title_btn)
           },
            show_app:function () {
                alert(this.title_app)
            }
        }

    });
</script>

v-on修饰符
.once：绑定的事件只能触发一次。

 <button :title="title_btn" @click.once="" >按钮</button>

keyup.keyCode键值修饰符，用来监听键盘事件。可以通过按键名称来监听，也可以自定义按键名称（键盘修饰符及自定义键盘修饰符）

 <input type="text" @keyup.enter="enter_event">

v-on修饰符小结
（1）.stop冒泡事件修饰符，阻止事件向上冒泡
（2）.prevent默认事件修饰符，阻止对象的默认行为
（3）.capture捕获事件修饰符，使用事件捕获机制
（4）.self自身事件修饰符，只当事件是从事件绑定的元素本身触发时才触发回调
（5）.once一次性事件修饰符，绑定的事件只能触发一次
（6）keyup.keyCode键值事件修饰符，用来监听键盘事件（键盘修饰符以及自定义键盘修饰符）
在这里插入图片描述
methods选项-代理方法
代理方法调用：
Vue.js将methods里的方法也代理了，所以可以像访问Vue数据一样来调用方法。

<button @click="hide">点击隐藏</button>
//js
  methods:{
           show_btn:function () {
              this.hide_p()
           },
            show_app:function () {
                this.show=false
            }
        }

拓展：动态属性参数

2.6版本新增：
从 2.6.0 开始，可以用方括号括起来的 JS表达式作为一个指令的参数，如下所示动态绑定title属性，实例有一个 data 属性 attributeName，其值为 “title”，那么这个绑定将等价于 v-bind:title：

<div id="app">
    <div :[ attributeName]="title"></div>
</div>
</body>
<script type="text/javascript">
    new Vue({
        el:'#app',
        data:{
            attributeName:"title",
            title:"鼠标悬停显示"
        }
    });
</script>

console控制台

显示信息的命令
console对象，提供5种方法，用来显示信息
日志信息console.log()、一般信息console.info()
除错信息console.debug()、警告提示console.warn()
错误提示console.error()

console.log('输出打印日志')
console.info("输出一般信息")
console.debug("出错信息")
console.wran("警告信息")
console.erro("错误信息")

chrome浏览器
在这里插入图片描述
Firefox浏览器

基本用法

console.log，前端常用它来调试分析代码，你可以在任何的js代码中调用console.log()，然后你就可以在浏览器控制台看到你刚才打印的常量，变量，数组，对象，表达式等的值。

console.log(123)
123
console.log("1","2","3")
 1 2 3
console.log('1\n2\n3\n')
1
2
3

可以通过上面的方式进行单个变量（表达式）、多个变量以及换行输出。而这对于日常开发的大多数情况算是够用了。

占位符

console对象的上面5种方法，都可以使用printf（格式化输出）风格的占位符。不过，占位符的种类比较少，只支持字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）、CSS格式化样式（%c）五种。
在这里插入图片描述

%o占位符，可以用来查看一个对象内部情况。比如，有这样一个对象，对它使用o%占位符：

占位符-格式化输出

console.log("%d+%d=%d",1,1,2)
 1+1=2

占位符

在这里插入图片描述

丰富样式输出

可以使用%c进行css样式格式化输出。常见的富样式输出有两种：文字样式、图片输出。
（1）文字样式
在这里插入图片描述

（2）%c可以写在任何地方，不限于开头，然后%c后面所有的输出会应用我们指定的样式。如果想单独对中间某几个字进行样式处理呢？

console.log(
"%c这是%c一段%c神奇的文字"，
'color':red ,
"color":blue;font-size:30px;background-color:rgba(0,0,0.3),
"colcr":yellow;font-size:20px
)

在这里插入图片描述

图片输出（注意：背景图时，%c后面加空格占位）

图片输出（高度用line-height+padding，宽度用padding）

在这里插入图片描述

（4）注意
console.log输出的超链接会被自动识别并加上灰色字体颜色和下划线的样式，而这个无法用%c覆盖
在这里插入图片描述

分组显示

如果信息太多，可以分组显示，用到的方法是console.group()和console.groupEnd()。

在这里插入图片描述

输出属性与方法

console.dir()可以显示一个对象所有的属性和方法
在这里插入图片描述

输出节点代码

console.dirxml()用来显示网页的某个节点（node）所包含的html/xml代码。

<div id="table-area">
    <tr>
        <td>姓名</td>
        <td>年级</td>
    </tr>
    <tr>
        <td>李明</td>
        <td>20</td>
    </tr>
</div>
</body>
<script type="text/javascript">
    var table_area=document.querySelector("#table_area");
    console.dirxml(table_area);
</script>

在这里插入图片描述

清空控制台

console.clear()清空控制台内容
在这里插入图片描述

计时器

console.time(),console.timeEnd()方法计算一个操作的执行的时间console.time()是开始，console.timeEnd()是结束。
可以传一个参数，参数为计时器的名称。
在这里插入图片描述
console.count()方法用于计数，输出它被调用了多少次。

表格化

console.table()方法可以将传入的对象或数组这些复合数据以表格形式输出。

var arr=[100,200,300,400,500,600];
 console.table(arr);
 var obj={
     name:"张三",
     age:"20",
     sex:"男"
 }

在这里插入图片描述

web-Queen

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫