前端必备三大框架之一Vue.js的入门和基础语法（一）

初识Vue.js

官方说法：2014年Vue.js诞生，Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。注：Vue 不支持 IE8 及以下版本。

创建Vue.js

<script src="引入一个外部vue.js文件"></script>
<div id="app">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>

每个 Vue 应用都需要通过实例化 Vue 来实现，el找到属性ID，data 用于定义属性，{{ }} 用于输出对象属性和函数返回值。

---

Vue实现数据的双向绑定

vue数据双向绑定是通过 数据劫持 结合 发布者-订阅者模式 的方式来实现

数据劫持

通过Object.defineProperty()方法实现

发布者-订阅者模式

1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。
2.实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。
3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。

---

指令

指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
input中使用v-model ，就会把它的值当做是输入框的value值
标签上v-html，就会把它的值插入到该标签内部 v-text
v-if/show 条件判断
v-for 遍历循环使用
v-on 绑定事件
v-bind 绑定属性

---

Vue.js模板语法

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
数据绑定最常见的形式就是使用 {{}}（双大括号）的文本插值：
使用 v-html 指令用于输出 html 代码：

<div id="app">
    <div v-html="message"></div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>这是v-html</h1>'
  }
})
</script>

---

Vue.js 条件判断

v-if 指令 v-show指令：

<div id="app">
    <p v-if/show="block">显示</p>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    block: true,
  }
})
</script>

这里， v-if/show 指令将根据表达式 block 的值(true 或 false )来决定是否插入 p 元素。

v-if 指令 v-show指令的用法：
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

简单来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。

---

Vue.js 循环遍历

v-for 指令：
v-for 指令需要使用 v-for = “(item, index) of/in list” :key=“index” 形式的特殊语法，其中 list 是原数据，而 item 则是被迭代的元素。

<div id="app">
  <ul>
    <li v-for="(item,index) of list" :key="index">
       {{ item }}--{{ index }} 
    </li>
  </ul>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    list: [a,b,c,d,e]
  }
})
</script>

v-for 指令可以遍历数组，可以遍历对象，还可以遍历字符串，一定要记得加 key 值

---

Vue.js 事件处理

v-on （缩写@click）指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

<div id="app">
  <button v-on:click="counter += 1">增加 1</button>
  <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    counter: 0
  }
})
</script>

通常情况下，我们需要使用一个方法来调用 JS方法。v-on 可以接收一个定义的方法methods: {}来调用。

Vue.js 方法实现(methods)、计算属性(computed)和侦听属性(watch)

对于任何复杂逻辑，都应当使用计算属性（computed: {}）

  <div id="app">
        {{ msg }}---{{ revemsg }}
    </div>
    
<script>
    new Vue({
        el: '#app',
        data: {
            msg:'ABCDE'
        },
        computed: {
            revemsg () {
                return this.msg.split('').reverse().join('');
            }
        }
    })
</script>

方法实现:

<div id="app">
        {{ msg }}---{{ revemsg() }}
    </div>
    
<script>
    new Vue({
        el: '#app',
        data: {
            msg:'ABCDE'
        },
        methods: {
            revemsg () {
                return this.msg.split('').reverse().join('');
            }
        }
    })
</script>

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

侦听属性(watch)

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

Vue生命周期钩子函数

本文是自己的理解，有误的地方可以指出，持续更新中…