vue.js入门笔记（1）

最新推荐文章于 2022-04-22 10:30:15 发布

意瑚琏

最新推荐文章于 2022-04-22 10:30:15 发布

阅读量140

点赞数

分类专栏：前端文章标签： vue 入门

原文链接：https://www.runoob.com/vue2/vue-events.html

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

v-for

<div id="example">
        <!--循环数字-->
        <span v-for="count in 10">{{count}}</span>
        <!--循环数组-->
       <span v-for="(u,i) in user">--每个数组值--{{u}}--索引地址index--{{i}}</span>
        <!--循环对象数组-->
        <span v-for="(u,i) in object">---{{u.a}}---索引index--{{i}}</span>
        <!--循环对象-->
        <span v-for="(v,k,i) in app">---值value---{{v}}---键key---{{k}}----索引index----{{i}}</span>
</div>

循环时参数一定按顺序来，因为vue内部已经规定好了顺序
转自别的博客

computed

	<div id="app">
	  <p>原始字符串: {{ message }}</p>
	  <p>计算后反转字符串: {{ reversedMessage }}</p>
	</div>
	 
	<script>
	var vm = new Vue({
	  el: '#app',
	  data: {
	    message: 'Runoob!'
	  },
	  computed: {
	    // 计算属性的 getter
	    reversedMessage: function () {
	      // `this` 指向 vm 实例
	      return this.message.split('').reverse().join('')
	    }
	  }
	})
	</script>

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

computed setter

var vm = new Vue({
  el: '#app',
  data: {
    name: 'Google',
    url: 'http://www.google.com'
  },
  computed: {
    site: {
      // getter
      get: function () {
        return this.name + ' ' + this.url
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.name = names[0]
        this.url = names[names.length - 1]
      }
    }
  }
})
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = '菜鸟教程 http://www.runoob.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);

渲染时就会直接按顺序得去调用conputed里面的东西。

监听属性

<div id = "app">
    <p style = "font-size:25px;">计数器: {{ counter }}</p>
    <button @click = "counter++" style = "font-size:25px;">点我</button>
</div>
<script type = "text/javascript">
var vm = new Vue({
    el: '#app',
    data: {
        counter: 1
    }
});
vm.$watch('counter', function(nval, oval) {
    alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
</script>

vm.$watch(‘counter’, function(nval, oval)

第一个参数是指定监听对象
第二个函数的第一个参数是监听对象的原来转态
第二个参数是监听对象修改后的状态
$watch 是一个实例方法
这个回调将在 vm.counter 改变后调用
vue的实例属性和方法

$

除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。例如：

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})

所以在vue文档的API中还可以看到完整的实例属性和方法。
简单来讲就是带$的是已有写好的方法和属性

es6中也可以采用${XXX}来在字符串中插入变量（这个记住要利用v-bind）

样式绑定

这个实例将两个样式都绑定在类classObject上

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/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 v-bind:class="classObject"></div>
</div>

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

绑定了conputed中的方法

new Vue({
  el: '#app',
  data: {
    isActive: true,
    error: {
      value: true,
      type: 'fatal'
    }
  },
  computed: {
    classObject: function () {
      return {
  base: true,
        active: this.isActive && !this.error.value,
        'text-danger': this.error.value && this.error.type === 'fatal',
      }
    }
  }
})

将样式赋给data，通过数组data属性进行绑定样式

<style>
.active {
	width: 100px;
	height: 100px;
	background: green;
}
.text-danger {
	background: red;
}
</style>
</head>
<body>
<div id="app">
	<div v-bind:class="[activeClass, errorClass]"></div>
</div>

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

用三元表达式绑定样式

<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'
  }

直接设置样式

<div id="app">
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
</div>

绑定一个样式对象

<div id="app">
  <div v-bind:style="styleObject">菜鸟教程</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    styleObject: {
      color: 'green',
      fontSize: '30px'
    }
  }