Vue 实例，选项，数据绑定，生命周期，指令，计算函数

一、实例及选项
一个Vue实例就是相当于一个视图模型，作为前端视图与后端业务逻辑的中介。
在实例化的时候，我们可以传入一个选项对象，包含数据、模板、挂载元素、方法、生命周期钩子等选项。
1.模板
选项中主要影响模板或 DOM 的选项有 el 和 template，属性 replace 和 template 需要一起使用。
el:为实例提供挂载元素

el:'#app'   在初始实例时指定el,app为某元素的id

template:默认会将template 值替换el 值对应的元素，类似于内容
例：
在这里插入图片描述
输出的HTML结构是：

2.数据
通过 data 属性定义数据，如果传入 data 的是一个对象，Vue 实例会代理起 data 对象里的所有属性，也可以引用 Vue 实例 vm 中的 $data 来获取声明的数据

var data = { a: 1 }
 var vm = new Vue({ 
 data: data 
 }) 
 vm.$data === data // -> true 
 vm.a === data.a // -> true // 设置属性也会影响到原始数据
 vm.a = 2 data.a // -> 2 // 反之亦然 
 data.a = 3 vm.a // -> 3

在模板中使用 {{a}} 就会输出 vm.a 的值，并且修改 vm.a 的值，模板中的值会随之改变，称这个数据为响应式（responsive）数据,
只有初始化(声明实例)时传入的对象才是响应式的，
所以尽量在初始化的时候，把所有的变量都设定好，如果没有值，也可以用 undefined 或 null 占位
组件类型的实例可以通过 props 获取数据，同 data 一样，也需要在初始化时预设好。
props与data可同时使用，但两者属性不能同名
但是data 的值必须是一个函数，并且返回值是原始对象，

例：
var MyComponent = Vue.component('my-component', {
 props : ['title', 'content'], 
 data : function() { 　
 　 return {
       desc : '123' 　　 } },
       template : '<div>\
         <h1>{{title}}</h1>\
         <p>{{content}}</p>\
         <p>{{desc}}</p>\
         </div>'
         })

3.方法
属性methods对象来定义方法，使用v-on指令来监听DOM事件

<button v-on:click="alert"/>alert<button>
new Vue({
 el : '#app', 
 data : { a : 1}, 
 methods : {
     alert : function() { 
     　　　 alert(this.a); 　
         　 }
            } 
            });

注：在实例化时可自定义事件，通过$emit 方法进行触发，常用在组件间相互通信的情况中。
4.生命周期
生命周期钩子是在Vue对象生命周期的某个阶段执行的已定义方法。

var vm = new Vue({ 
data: { 　　 a: 1 }, 
created: function () { 　　
 console.log('created')
  } })

此图表示挂钩顺序

例：
var vm = new Vue({
 el : '#app', 
 init: function() { 
 　　 console.log('init'); 
    },
 created: function() { 　
      console.log('created');
       }, 
 beforeCompile: function() { 　　
     console.log('beforeCompile'); 
     }, 
 compiled: function() { 　　
      console.log('compiled');
  }, 
  attached: function() { 
  　　 console.log('attached'); 
     }, 
  dettached: function() { 　
  　 console.log('dettached'); 
    },
  beforeDestroy: function() { 
  　console.log('beforeDestroy'); 
   }, 
  destroyed: function() { 
   　　 console.log('destroyed'); 
      }, 
  ready: function() { 　
     　 console.log('ready'); // 组件完成后调用 $destory() 函数，进行销毁 　
        this.$destroy(); } 
        });

浏览器的console输出

二、数据绑定
Vue的核心是一个响应式的数据绑定系统，建立绑定后，DOM 将和数据保持同步，这样就无需手动维护 DOM，使代码能够更加简洁易懂、提升效率。
1.数据绑定语法
基于此代码举例：

var vm = new Vue({ 
el : '#app', 
data: { 　
　 id : 1, 
   index : 0, 　
   name : 'Vue', 　
   avatar : 'http://……' 　　
   count : [1, 2, 3, 4, 5] 　
   names : ['Vue1.0', 'Vue2.0'], 　
  items : [ 　　　 { name : 'Vue1.0', version : '1.0' }, 　
              　　 { name : 'Vue1.1', version : '1.0' } 　　 ] 
                 } });

最基础的形式：
文本插值，使用的是双大括号标签 {{}}，是源于前端模板引擎Mustache.js

<span>Hello {{ name }}</span>    // 输出 Hello Vue

vm 中 name 属性的值将会替换 Mustache 标签中的 name，并且修改数据对象中的 name 属性，DOM 也会随之更新，在浏览器 console 中运行 vm.name = ‘Vue 1.0’,会输出 Hello Vue 1.0
但是，
在

<span v-once="name">Hello {{ name }}</span>    // 仍输出 Hello Vue

HTML 属性
<div v-bind:id="'id-'+id"/></div>   
或简写为<div :id="'id-' + id"></div>
 输出<div id="id-1">

绑定表达式
即放在 Mustache 标签内的文本内容，可以有JavaScript表达式（不能是语句）和过滤器组成

{{ index + 1 }} // 1
{{ index == 0 ? 'a' : 'b'}} // a 
{{ name.split('').join('|') }} // V|u|e

过滤器

{{ name | uppercase }} // VUE    将name的值给了过滤器（或函数），输出值

注：
Vue内置了10个过滤器

① capitalize ：首字母大写
② uppercase ：变大写
③ lowercase ：变小写
④ currency 参数为{String}[货币符号] ,{Number} [小数位]，将数字转化成货币符号， 并且会自动添加数字分节号
{{ amount | currency ' ￥' 2 }} // -> 若 amount 值为 10000，则输出￥10,000.00

⑤ pluralize 参数为 {String} single, [double, triple]，字符串复数化。在参数末尾加s
<p v-for="c in count">
{{ c | pluralize 'item' }} 
{{ c | pluralize 'st' 'nd' 'rd' 'th' }}</p>

  输出结果

⑥ json 参数为 {Number}[indent] 空格缩进数，与 JSON.stringify() 作用相同，将 json 对象数据输出成符合 json 格式的字符串。
⑦ debounce 传入值必须是函数，参数可选，为 {Number}[wait]，即延时时长。在调用函数后的时间内执行函数，若重复调用则重新计算。

<input v-on:keyup ="onKeyup | debounce 500">  
// input元素上监听了keyup事件， 并且延迟 500ms 触发

⑧ limitBy 传入值必须是数组，参数为 {Number}limit，{Number}[offset], limit 为显示个数，offset 为开始显示数组下标。

<div-for="item in items | limitBy 10">
// items 为数组，且只显示数 组中的前十个元素

⑨filterBy 传入值必须是数组,参数为即需要匹配的字符串或函数

<p v-for="name in names | filterBy '1.0'">{{name}}</p>
// 检索 items 数组中 值包含 1.0 的元素

<p v-for="item in items | filterBy '1.0' in 'name'">{{ item | json}}</p>
// 检索 items 数组中元素属性 name 值为 1.0 的元素输出。检索区域也可以为数组，
//即 in [name, version]，在多个属性中进行检索

⑩ orderBy 传入值必须是数组,参数为 {String|Array|Function}sortKeys，即指定排序策略。即选择升序或降序， order>=0 为升序，order<0 为降序。

单个键名：<p v-for="item in items | orderBy 'name' -1">{{item.name}}</p>
// items 数组中以键名 name 进行降序排列

指令
Vue.js 指令是带有前缀的 v- 的属性
① 参数等同于
② 修饰符

2.计算属性
用于对展示的数据进行处理，避免在模板中加入过重的业务逻辑

var vm = new Vue({ 
el : '#app', 
data: { 　
　 firstName : 'Gavin'， 　
   lastName: 'CLY' 
   } 
   computed : { 　
   　 fullName : function() { 　
     　　 // this 指向 vm 实例 　　
        　 return this.firstName + ' ' + this.lastName 　　
           } 　 } });
<p>{{ firstName }}</p>   // Gavin
<p>{{ lastName }}</p>   // CLY
<p>{{ fullName }}</p>   // Gavin CLY

Setter
var vm = new Vue({ 
el : '#el', 
data: { 　
　 cents : 100，
   } 
   computed : { 　
   　 price : { 　　
     　 set : function(newValue) { 　　
       　　 this.cents = newValue * 100; 　　
          　 }, 　　　
             get : function() { 　　
             　　 return (this.cents / 100).toFixed(2); 　　
                　 } 　
                  　 } 
                    }
                     });

在console中更改 vm.price = 2，vm.cents 会被更新为 200，在传递给后端时无需再手动转化一遍数据。
3.表单控件
提供 v-model 的指令对表单元素进行双向数据绑定，在修改表单元素值的同时，实例 vm 中对应的属性值也同时更新。
Text

输入框示例，用户输入的内容和 vm.message 直接绑定：
<input type="text" v-model="message" /> 
<span>Your input is : {{ message }}</span>
#message为输入框里的值

Radio
单选框示例：
<label><input type="radio" value="male" v-model="gender "> 男</label>
<label><input type="radio" value="female" v-model="gender "> 女</label>
<p>{{gender}}</p>

#gender为男或女

Checkbox
单个勾选框，v-model 即为布尔值，此时 input 的 value 并不影响 v-model 的值

<input type="checkbox" v-model="checked" />
<span>checked : {{ checked }}</span>

多个勾选框，v-model 使用相同的属性名称，且属性为数组。

<label><input type="checkbox" value="1" v-model=" multiChecked">1</label>
<label><input type="checkbox" value="2" v-model=" multiChecked">2</label>
<label><input type="checkbox" value="3" v-model=" multiChecked">3</label>
<p>MultiChecked: {{ multiChecked.join('|') }}</p>

Select
单选：
<select v-model="selected">
<option selected>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected:{{selected}}</span>

多选:
<select v-model="multiSelected" multiple>
<option selected>A</option>
<option>B</option>
<option>C</option>
</select>
<span>multiSelected:{{multiSelected.join('|')}}</span>

绑定value
表单控件的值同样可以绑定在 Vue 实例的动态属性上，用 v-bind 实现
Checkbox

<input type="checkbox" v-model="checked" v-bind:true-value="a" v-bind:false-value="b"> 
选中：vm.checked == vm.a　　// -> true 
未选中：vm.checked == vm.b // -> true

Radio
<input type="radio" v-model="checked", v-bind:value="a">
选中 : vm.checked == vm.a // -> true

Select Options
<select v-model="selected">
<!-- 对象字面量 -->
<option v-bind:value="{ number: 123 }">123</option>
</select>

选中：
typeof vm.selected // -> 'object' 
vm.selected.number // -> 123

4.Class与Style绑定
Class绑定
我们绑定的数据可以是对象和数组
① 对象语法：v-bind:class 接受参数是一个对象

<div class="tab" v-bind:calss="{'active' : active , 'unactive' : !active}">
</div>

vm 实例中需要包含

data : { 　
　 active : true 
  }

结果为

 <div class="tab active"></div>

② 数组语法：v-bind:class 也接受数组作为参数。

<div v-bind:class="[classA, classB]"></div>
 vm 实例中需要包含 
 data : { 　
 　 classA : 'class-a', 　
   　 classB : 'class-b' 
     }
     结果为<div class="class-a class-b"></div>

内联样式绑定（style）
① 对象语法：直接绑定符合样式格式的对象

<div v-bind:style="alertStyle"></div>
data : { alertStyle : { 　　 color : 'red', 　　 fontSize : '20px' } }
除了直接绑定对象外，也可以绑定单个属性或直接使用字符串。
<div v-bind:style="{ fontSize : alertStyle.fontSize, color : 'red'}"></div>

② 数组语法：v-bind:style 允许将多个样式对象绑定到统一元素上

<div v-bind:style="[ styleObjectA, styleObjectB]" .></div>

apple_1900

发布了16 篇原创文章 · 获赞 1 · 访问量 811

私信关注

Vue 实例，选项，数据绑定，生命周期，指令，计算函数

猜你喜欢