Vue.js初接触

Vue.js框架

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 —Vue官网

框架-Framefork

前端的快速发展产生了成千上万的代码，但都缺乏正规的组织形式。JavaScript框架即为JavaScript提供了一套解决方案，为开发者创建了可维护性和可测试性更强的代码库。

---

Vue.js初接触

Vue的声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

Vue实例-new Vue()

  
  //引入Vue库


  

    { { message } }
  
  

可以看到在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。
在上面实例中 id 为 hello-vue，在 div 元素中：

意味着我们接下来的改动全都在以上指定的div内，div外部不受影响。
在以上的代码中：

data 定义属性。
**methods**定义函数，可以通过return来返回函数值
**{ { } }**为数据绑定，用于输出对象属性和函数返回值

运行结果

Vue.js的响应式属性

在上面的运行结果中,若在控制台修改hello.message属性，将会看到相应的元素进行响应更新。

这是因为当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。

  
  //引入Vue库


  

    
你最喜欢的游戏是:{ {mygame} }
    
    
    逆转
    修改
    
  
  

组件-component

组件是定义在页面内的区域块，完成单独的页面功能。我们可以使用多个小型、独立和通常可复用的组件来构建一个大型应用。在Vue里，一个组件本质上是一个拥有预定义选项的一个Vue实例。

在上述代码中，通过Vue.component定义了一个名为todo-item的组件，并且赋予其一个自定义属性和网页渲染时的模板样式。
输出结果为：

1. vegetable
2. cheese
3. other

过滤器-filter

过滤器指格式化变量内容的输出(包括日期格式化，字母大小写，数字再计算等)

在html中，可通过{ {message | toupper} }在改变相应变量的输出格式。并且需要在Vue实例中定义过滤器。

1. 在组建中的选项定义本地过滤器

filters:{
  toupper:function(value){
    return value.toUpperCase();//将字母大写输出
  },
},

2. 在创建Vue实例之前全局定义过滤器

Vue.filter('toupper',function(value)){
  return value.toUpperCase();
}
new Vue({
  ...
  })

计算属性-computed

从之前的内容可以知道，在html内嵌入的vue模板表达式中放入太多的逻辑会使模板过重且难以维护。例如:

  { { message.split('').reverse().join('') } }

若需要再模板中多次引用，就会变得很复杂。对于这种复杂或重复的逻辑运算，可以使用计算属性

  今年switch的价格是：{ {price} }日元，含税价格为{ {priceIndex} }日元，
  折合人民币为{ {chinesePrice} }元。

...
  var app = new Vue({
    el:'#app',
    data:{
        price:29980//元数据
    },
    computed:{
      priceIndex:function(){
        return this.price*1.08;//this指向Vue对象实例
      },
      chinesePrice:function(){
        return Math.round(this.priceIndex/16.75);//Math.round()为四舍五入函数
      },
    },
  });

在上述代码中，声明了两个计算属性：priceIndex和chinesePrice。计算属性的值始终依赖于原数据，即app.price。在 app.price 发生改变时，priceIndex和chinesePrice也会更新。

computed VS methods

从效果来看，这两种不同的方式是完全一样的。
不同的是：
计算属性是基于数据的依赖进行缓存的，只有在改变原数据的值时才会重新求值。
相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

对于缓存，假设我们有一个性能开销比较大的的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter。如果不希望有缓存，就可以用方法来替代。

计算属性的set与get

计算属性默认只有 getter ，不过在需要时也可以提供一个 setter ：

可以将getter与setter看作类似于进行相反操作。
getter通过设置原数据来改变计算属性的值。 即从原数据–>计算属性。
而setter是通过设置计算属性，同步更新原数据的值。 即从计算属性–>原数据。

{{fullname}}

computed:{
  fullname:{
    get:function(){
      return this.firstname + " " + this.lastname;
    },
    set:function(value){
      console.log(value);
      var arr = value.split(" ");
      this.firstname = arr[0];
      this.lastname = arr[1];
    }
  }
}

因为计算属性当依赖的值发生变化时，就会重新计算。

当setfullname时(即vue.fullname = 'ni hao ')，fullname发生变化，从而使得this.firstname和this.lastname发生变化（set），同时fullname依赖于这两个值，所以引起fullname的重新计算（get）。

监听/侦听属性-watch

watch功能与computed类似，但实现方法复杂许多。
当数据发生变化时,我们可以利用监听器来响应数据的变化。即watch会实施监听数据变化并改变自身的值。

  
今年switch的价格是：{ {price} }日元，含税价格为{ {priceIndex} }日元，
  折合人民币为{ {chinesePrice} }元。
  加价10000日元

var app=new Vue({
  ...
  watch:{
    price:function(newVal,oldVal){//当变量发生变化的时候，会调用这个函数
      this.priceIndex=Math.round(this.price*1.08);
      this.chinesePrice=Math.round(this.priceIndex/16.75);
    },
  },

上述代码通过添加一个按钮，通过按键改变price的值，同时通过watch监视变量的变化，当price发生变化时，实时改变priceIndex和chinesePrice的值。