前端 TypeScript Vue.js

Vue.js初接触

Posted by wantingtr on April 17, 2018

Vue.js框架

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

框架-Framefork

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

Vue.js初接触

Vue的声明式渲染

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

Vue实例-new Vue()

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>//引入Vue库
</head>
<body>
  <div id='hello-vue'>
    { { message } }
  </div>
  <script>
    var hello = new Vue({  //创建一个Vue实例  
      el: "#hello-vue", //通过应用的ID嵌入到我们的根元素中
      data: {
        message: 'hello Vue.js World!' //将数据放入了一个对象中
      }
    });
  </script>
</body>
</html>

可以看到在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。
在上面实例中 id 为 hello-vue，在 div 元素中：<div id='hello-vue></div>'意味着我们接下来的改动全都在以上指定的div内，div外部不受影响。
在以上的代码中：

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

运行结果 hello-vue-c

Vue.js的响应式属性

在上面的运行结果中,若在控制台修改hello.message属性，将会看到相应的元素进行响应更新。 console 这是因为当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>//引入Vue库
</head>
<body>
  <div id="hello">
    <p>你最喜欢的游戏是:{ {mygame} }</p>
    <input v-model='mygame'>
    <!--v-model指令实现表单输入和应用状态之间的双向绑定-->
    <button v-on:click="reverse">逆转</button>
    <button @click="change('onepiece')">修改</button>
    <!--v-on指令添加一个事件监听器，通过它调用在Vue实例中定义的方法.@符号为v-on的缩写-->
  </div>
  <script>
    var hello = new Vue({
      el:'#hello',
      data:{
        mygame:'第五人格'//mygame的默认值
      },
      methods:{
        reverse:function(){
          this.mygame = this.mygame.split('').reverse().join('')
        },
        change:function(newgame){
          this.mygame= newgame;
        }
        //更新了应用状态，但没有触碰DOM---所有的DOM都由Vue处理
      }
    })
  </script>
</body>
</html>

组件-component

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

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Vue.js组建构建</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div id="hello">
      <ol>
        <todo-item v-for="item in grocerylist" v-bind:todo="item" v-bind:key="item.id">
        </todo-item>
        <!--为每一个todo-item提供todo对象，todo对象是一个变量，-->
      </ol>
    </div>
    <script>
      //定义一个名为todo-item的组件
      Vue.component('todo-item',{
        props:['todo'],//自定义属性
        template:'<li>{ {todo.text} }</li>'
      });
      var hello = new Vue({
        el:'#hello',
        data:{
          grocerylist:[
            {id:0,text:'vegetable'},
            {id:1,text:'cheese'},
            {id:2,text:'other'}
          ]
        }
      });
    </script>
  </body>
</html>

在上述代码中，通过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模板表达式中放入太多的逻辑会使模板过重且难以维护。例如:

<div id="example">
  { { message.split('').reverse().join('') } }
</div>

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

<div id='app'>
  今年switch的价格是：{ {price} }日元，含税价格为{ {priceIndex} }日元，
  折合人民币为{ {chinesePrice} }元。
</div>
...
  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是通过设置计算属性，同步更新原数据的值。 即从计算属性–>原数据。

<div id='app'></div>

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];
    }
  }
}

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

监听/侦听属性-watch

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

<div id='app'>
  <P>今年switch的价格是：{ {price} }日元，含税价格为{ {priceIndex} }日元，
  折合人民币为{ {chinesePrice} }元。</P>
  <button @click='btnClick(10000)'>加价10000日元</button>
</div>

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的值。

FRIENDS