Vue.js框架学习笔记之二

最新推荐文章于 2022-09-25 16:41:56 发布

港式柠檬茶！

最新推荐文章于 2022-09-25 16:41:56 发布

阅读量212

点赞数

分类专栏： Vue.js 前端文章标签： Vue.js

本文链接：https://blog.csdn.net/wantingtr/article/details/83587204

版权

前端同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

Vue.js

12 篇文章 0 订阅

订阅专栏

Vue.js中的样式绑定

class和style是HTML元素的属性，用于设置元素的样式，我们可以通过v-bind来设置样式属性,可绑定一个数据属性或者对象。
v-bind:class="..."
v-bind:style="..."

class实例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
  <style>
    .active {
	     width: 100px;
	     height: 100px;
	     background: green;
    }
    .text-danger {
	     background: red;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="static"
      v-bind:class="{ active: isActive, 'text-danger': hasError }">
      <!--为v-bind:class设置了一个对象，即<div class="active text-danger"></div> -->
    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        isActive: true,
	      hasError: true
      }
      })
  </script>
</body>
</html>

style实例：

<div id="app">
	<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">hello-vue</div>
</div>

<script>
  var app=new Vue({
    el: '#app',
    data: {
      activeColor: 'green',
	    fontSize: 30
   }
   })
</script>

v-bind:style对象虽然看上去非常像CSS，但其实是一个JS对象，需要在Vue实例中定义，或者可以直接绑定到一个样式对象里。

<div v-bind:style="styleObject"></div>
...
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

样式绑定中的数组语法

示例代码来自RUNOOB.COM

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<style>
.text-danger {
	width: 100px;
	height: 100px;
	background: red;
}
.active {
	width: 100px;
	height: 100px;
	background: green;
}
</style>
</head>
<body>
<div id="app">
	<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true,
	activeClass: 'active',
    errorClass: 'text-danger'
  }
})
</script>
</body>
</html>

对于v-bind:class和v-bind:style，都可以使用数组语法，将多个样式对象应用到同一元素上。
<div v-bind:class="[activeClass, errorClass]"></div>
<div v-bind:style="[baseStyles, overridingStyles]"></div>
还可以使用三元表达式来切换列表中的class
<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>

条件语句 v-if

<p v-if="seen">条件语句</p>

var vue = new Vue({
  el:'#vue',
  data:{
    seen:true
  }
  })

v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。这表明我们不仅可以把数据绑定到 DOM 文本或特性，还可以绑定到 DOM 结构。

同样的，也可以v-else指令和v-else-if给v-if添加一个else块，可以多次使用。
<p v-else>条件语句</p>

元素显示 v-show

v-show指令用法与v-if指令大致一样。
<h1 v-show="ok">Hello!</h1>
不同的是，带有v-show的元素始终会被渲染并保留在DOM中，只是简单地切换元素的CSS属性display。

`v-if`VS`v-show`

v-if会确保在切换过程中条件块内的事件监听器和子组件适当的被销毁和重建。有更高的切换开销。
v-show只是简单的基于CSS进行切换，有更高的初始渲染开销。

综上，如果一个元素需要非常频繁的切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好

循环语句 v-for

<div id='vue'>
  <ol>
    <li v-for='item in items'>
        { {item.message} }
    </li>
  </ol>
</div>

或使用模板输出

<div id="vue">
  <ul>
    <template v-for="item in items">
      <li>{ { item.message } }</li>
      <li>--------------</li>
    </template>
  </ul>

v-for指令使用item in items的语法，其中items是原数据数组，item是数组元素迭代的别名。

循环迭代的参数可以不止一个，可以使对象中的各个元素(对象迭代)。

<li v-for="(value, key, index) in object">
     { { index } }. { { key } } : { { value } }

事件处理器 v-on:(event)

v-on指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <div id='app'>
      <h1>时间处理器</h1>
      <input id='txtname' v-on:keyup='txtKeyUp($event)'>
      <button id='btnOk' v-on:click='btnClick($event)'>OK</button>
      <!--需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入-->
    </div>
  </body>
  <script>
    var app = new Vue({
      el:'#app',
      data:{},
      methods:{
        txtKeyUp:function(event){
          this.debugLog(event);
        },
        btnClick:function(event){
          this.debugLog(event);
        },
        debugLog:function(event){
          console.log(
            event.srcElement.tagName,//输出元素的标签名
            event.srcElement.id,//输出元素id
            event.srcElement.innerHTML,//输出元素内嵌内容
            event.key?event.key:''//输出键盘键入的内容
          );
        },
      },
    });
  </script>
</html>

输出结果
v-on
其中：

INPUT和BUTTON为元素的标签名
txtName和btnOk为元素id
在input组件中没有内嵌内容，所以只输出空格，key为每次键盘键入的内容
在button组件中内嵌内容为Ok，没有key元素

v-on指令可以使我们

扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
因为无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。

港式柠檬茶！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js框架学习笔记之二

Vue.js中的样式绑定class和style是HTML元素的属性，用于设置元素的样式，我们可以通过v-bind来设置样式属性,可绑定一个数据属性或者对象。v-bind:class="..."v-bind:style="..."class实例：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8...
复制链接

扫一扫