Vue.js（一）

编程范式

此处内容来自 编程范式 （Programming paradigm）

1. 命令式编程

计算机的硬件负责运行使用命令式的风格来写的机器码。计算机硬件的工作方式基本上都是命令式的，大部分的编程语言都是基于命令式的。

2. 面向对象编程

在面向对象程序编程里，计算机程序会被设计成彼此相关的对象。对象则指的是类的实例。它将对象作为程序的基本单元，将程序和数据封装其中，以提高软件的重用性、灵活性和扩展性，对象里的程序可以访问及经常修改对象相关连的数据。面向对象编程中，通常利用继承父类，以实现代码重用和可扩展性。

3. 声明式编程

一种编程范式，与命令式编程相对立。它描述目标的性质，让计算机明白目标，而非具体过程。声明式编程不用告诉计算机问题领域，从而避免随之而来的副作用。而命令式编程则需要用算法来明确的指出每一步该怎么做。声明式编程通常被看做是形式逻辑的理论，把计算看做推导。

常见的声明式编程语言有：

• 数据库查询语言（SQL，XQuery）
• 正则表达式
• 逻辑编程
• 函数式编程
• 组态管理系统等。

声明式编程透过函数、推论规则或项重写（term-rewriting）规则，来描述变量之间的关系。它的语言运行器（编译器或解释器）采用了一个固定的算法，以从这些关系产生结果。

声明式渲染

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

v-for

可以绑定数组的数据来渲染一个项目列表

<div id="app">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

const app = new Vue({
  el: '#app',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

v-on

添加一个事件监听器，通过它调用在 Vue 实例中定义的方法

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">反转消息</button>
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

v-model

实现表单输入和应用状态之间的双向绑定

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

Vue 计数器

使用 Vue 实现一个小计数器，点击+按钮，计数器+1，使用-按钮计数器-1

<div id="counter">
  <h2>{{num}}</h2>
  <button v-on:click="add()">+</button>
  <button @click="sub()">-</button> <!--语法糖，简写-->
</div>

<script>
  const app = new Vue({
    el: "#counter",
    data: {
      num: 0
    },
    methods: {
      add: function () {
        this.num++;
      },
      sub: function () {
        this.num--;
      }
    }
  })
</script>

插值操作

1. Mustache 语法

即双大括号——{{}}
{{}} 不仅可以直接写变量，还可以写简单表达式

2. v-once

表示该dom元素只渲染一次，之后数据改变，不会再次渲染
这会影响到该节点上的其它数据绑定

<div id="app">
  <h2>{{message}}</h2>
  <h2 v-once>{{message}}</h2>
</div>

3. v-html

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令

<span v-html="rawHtml"></span>
<span>{{rawHtml}}</span>

注：

• 注意，你不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎。反之，对于用户界面 (UI)，组件更适合作为可重用和可组合的基本单位

• 你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值

4. v-text

v-text 会覆盖 dom 元素中的数据，相当于 JS 的 innerHTML 方法

<h2>This is a good</h2>
<h2 v-text="message">This is a good</h2>

5. v-pre

直接输出 {{message}} 字符串，而不是被 {{}} 语法转化的 message 的变量值

<h2>{{message}}</h2>
<h2 v-pre>{{message}}</h2>

6. v-cloak

有时候因为加载延时问题，数据没有及时刷新，就造成了页面会产生从 {{message}} 到 message 变量 的变化，这样闪动的变化，会造成用户体验不好。此时需要使用到 v-cloak 的这个标签

在 Vue 解析之前，div属性中有 v-cloak 这个标签，在 Vue 解析完成之后，v-cloak 标签被移除

[v-cloak] {
  display: none;
}

<div id="app" v-cloak>
  <h2>{{message}}</h2>
  <h2 v-once>{{message}}</h2>
  <span v-html="rawHtml"></span>
  <span>{{rawHtml}}</span>
  <h2>This is a good</h2>
  <h2 v-text="message">This is a good</h2>
  <h2>{{message}}</h2>
  <h2 v-pre>{{message}}</h2>
</div>

• 为了更容易看清变化，延迟三秒加载
  
• 使用 cloak 之后

动态绑定属性

1. v-bind 的基本使用

<img v-bind:src="imgURL" alt="">
<a v-bind:href="aHerf">百度一下</a>
<!--语法糖-->
<img :src="imgURL" alt="">
<a :href="aHerf"></a>

const app = new Vue({
  el: "#app",
  data: {
    imgURL: "https://cn.bing.com/th?id=OIP.NaSKiHPRcquisK2EehUI3gHaE8&pid=Api&rs=1",
    aHerf: "http://www.baidu.com"
  }
})

2. v-bind 动态绑定 class

对 dom 节点的 class 进行动态绑定

2.1 对象语法

• 使用 v-bind 进行绑定
• 格式为 {类名：布尔值}：布尔值为 true，该类名生效

.active {
  color: red;
}

<div id="app">
  <h2 :class="{active: isActive}">{{message}}</h2>
  <button @click="change">-+-</button>
</div>

const app = new Vue({
  el: "#app",
  data: {
    message: 'Hello',
    active: 'active',
    isActive: true
  },
  methods: {
    change: function () {
      this.isActive = !this.isActive;
    }
  }
})

2.2 数组语法

• 使用 v-bind 进行绑定
• 格式为 [变量名，变量名，...]

.active1 {
  border: 1px solid darkcyan;
  width: 200px;
  padding-left: 10px;
}
.active2 {
  background: #97f59f;
}
.active3 {
  border-radius: 10px;
}

<h2 class="title" :class="[classOne, classTwo, classThree]">{{message}}</h2>
<!--通过函数返回数组-->
<h2 class="title" :class="getClass()">{{message}}</h2>

const app = new Vue({
  el: "#app",
  data: {
  message: 'Hello',
  classOne: 'active1',
  classTwo: 'active2',
  classThree: 'active3'
  },
  methods: {
    change: function () {
      this.isActive = !this.isActive;
    },
    getClass: function () {
      return [this.classOne,this.classTwo, this.classThree];
    }
  }
})

注：

• :class="[classOne, classTwo, classThree]" 中的 classOne 等表示变量
• :class="['classOne'] 中的 classOne 表示字符串

2.3 举个栗子

题目：使用 v-for 和 v-bind 实现一个小demo，将电影列表展示。当点击某一个电影列表时候，将此列改变背景颜色

<ul id="movie">
  <li v-for="(item,index) in movies" @click="getIndex(index)" :class="{active:index === currentIndex}">{{item}}</li>
</ul>

const movie = new Vue({
  el: "#movie",
  data: {
  movies: ['盗梦空间', '大兵瑞恩', '窈窕淑女', '星际穿越', '海上钢琴师', '死亡诗社'],
  currentIndex: 0
  },
  methods: {
    getIndex: function (index) {
      this.currentIndex = index;
    }
  }
})

3. v-bind 动态绑定 style

3.1 对象语法

• 格式：{属性名:属性值}
• 加单引号，为字符串解析，不加单引号，为变量解析

<h2 :style="{fontSize:'50px'}">{{message}}</h2>
<h2 :style="{fontSize:fontSize}">{{message}}</h2>
<h2 :style="getStyle()">{{message}}</h2>

3.2 数组语法

• 格式：[变量]

<h2 :style="[baseStyle]">{{message}}</h2>
<h2 :style="getStyle()">{{message}}</h2>

const app = new Vue({
  el:"#app",
  data:{
    message:"你好啊",
    baseStyle:{backgroundColor:'red'}
  },
  methods: {
    getStyle(){
      return [this.baseStyle]
    }
  },
})

计算属性

1. computed

• 计算属性不需要再加 ()

<div id="app">
  <h2>{{firstName+ " " + lastName}}</h2>
  <h2>{{getFullName()}}</h2>
  <!--计算属性，不加括号-->
  <h2>{{fullName}}</h2>
</div>

const app = new Vue({
  el:"#app",
  data:{
    firstName:"skt t1",
    lastName:"faker"
  },
  computed: {
    fullName:function(){
      return this.firstName + " " + this.lastName
    }
  },
  methods: {
    getFullName(){
      return this.firstName + " " + this.lastName
    }
  }
})

2. 计算属性的复杂使用

计算书的总价

<div id="app">
  <h2>总价格：{{totalPrice}}</h2>
</div>

const app = new Vue({
  el:"#app",
  data:{
    books:[
      {id:110,name:"JavaScript从入门到入土",price:119},
      {id:111,name:"Java从入门到放弃",price:80},
      {id:112,name:"编码艺术",price:99},
      {id:113,name:"代码大全",price:150},
    ]
  },
  computed: {
    totalPrice(){
      let result= 0;
      for (let i = 0; i < this.books.length; i++) {
        result += this.books[i].price;
      }
      return result
    }
  }
})

3. 计算属性的 setter 和 getter

• 计算属性一般没有 set 方法，只读属性

computed: {
  fullName:{
    set:function(newValue){
      console.log("-----")
      const names = newValue.split(" ")
      this.firstName = names[0]
      this.lastName = names[1]
     },
     get:function(){
       return this.firstName + " " + this.lastName
     }
   }
}

4. 计算属性和 methods 的对比

• 计算属性有缓存，只有关联属性改变时才会进行再次计算

<div id="app">
  <!-- methods，即使firstName和lastName没有改变，也需要再次执行 -->
  <h2>{{getFullName}}</h2>
  <h2>{{getFullName}}</h2>
  <h2>{{getFullName}}</h2>
  <h2>{{getFullName}}</h2>
  <!-- 计算属性有缓存，只有关联属性改变才会再次计算 -->
  <h2>{{fullName}}</h2>
  <h2>{{fullName}}</h2>
  <h2>{{fullName}}</h2>
  <h2>{{fullName}}</h2>
</div>

const app = new Vue({
  el:"#app",
  data:{
    firstName:"skt t1",
    lastName:"faker"
  },
  computed: {
    fullName(){
      console.log("调用了计算属性fullName");
      return this.firstName + " " + this.lastName
    }
  },
  methods: {
    getFullName(){
      console.log("调用了getFullName");
      return this.firstName + " " + this.lastName
    }
  }
})