2. it
  3. vue.js入门笔记（1）

vue.js入门笔记（1）

mac2024-08-08  54

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' } }
最新回复(0)