Vue.js声明式渲染

基础概念理解：（*）

---

1. 什么是Vue？

Vue是一套构建用户界面的渐进式框架。

2. 如何理解渐进式

我对渐进式的理解其实就两个字：自由。

当咱们要用Angular框架时要知道它是强主张的，必需要遵循如下三条规则：

• 必须使用它的模块机制

• 必须使用它的依赖注入

• 必须使用它的特殊形式定义组件（这一点每一个视图框架都有，难以免）

而React的主张主要是函数式编程的理念，好比说，你须要知道什么是反作用，什么是纯函数，如何隔离反作用。它的侵入性看似没有Angular那么强，主要由于它是软性侵入。

可是Vue就比较自由了你想把你的页面分的更加具体，分红更小的可控单元，那就用组件系统其余能够不用，固然声明式渲染咱们仍是得用的，应为咱们都但愿DOM的更新是自动的，而非手动去更新的。

这也就是Vue如今这么受欢迎的缘由之一吧！

如何理解自底向上的开发模式

个人理解就是好比咱们先写一个基础的页面，把基础的东西写好，再逐一去添加功能和效果，由简单到繁琐的这么一个过程。

声明式渲染和命令式渲染

• 命令式渲染 ： 命令咱们的程序去作什么，程序就会跟着你的命令去一步一步执行

• 声明式渲染 ： 咱们只须要告诉程序咱们想要什么效果，其余的交给程序来作。

咱们来看个小例子，可能就更加理解声明式和命令式

输出的结果实际上是相同的

谈谈对生命周期的理解

咱们在官网会看到这么一张图，但根本就看不懂的人占很大一部分，但对生命周期的理解仍是很重要的。

这张图就能够更好的诠释生命周期了

Vue的Vue命令及简单操做

简单操做

首先咱们要进行一个Vue首先先下载并引入Vue.js，其次准备一个装模板的HTNL标签，全部Vue模板都在这个标签里写。

而后是new一个Vue实例，写入基本的Vue结构

固然这些只是一小部分，不太彻底，这个因项目而异，有时也没必要写这么多，用哪一个写那个就好。这就是Vue的基本结构，里边具体内容仍是要根据项目不一样去添加。

Vue 命令简介

v-on:事件 = "事件名称" 或者 @事件 = "事件名称" //绑定事件
例如：

<div v-on:click = "change"></div> // 这里是个点击事件，而change是事件名称

v-bink:自定义属性 = "属性名称" 或者 :自定义属性 = "属性名称" // 动态绑定属性
例如：

<div v-bink:title = "hello"></div>    //这里就绑定了一个名叫hello的属性

v-if = "判断条件" // if判断
例如：

<div v-if = "name === Vue"></div>   //判断name是否是等于Vue

v-for = "(参数1，参数2) in 数组" // 遍历数组
例如：

<div id="app">
        <ul>
            <li v-for="(text,index) in list">    //第一个参数是内容，第二个是序号
                {{index}}-{{text}}
            </li>
        </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                list:[
                    "A","B","C"
                ]
            }
        })

固然Vue不止这些命令还有不少这里就不一一说明了，你们能够去官方查看更多https://cn.vuejs.org/v2/guide/