Vue入门-安装使用以及生命周期

认识vue

• Vue (读音 /vjuː/，类似于 view)，不要读错。
• Vue是一个渐进式的框架，什么是渐进式的呢？
  • 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。
  • 或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。
  • 比如Core+Vue-router+Vuex，也可以满足你各种各样的需求。
• Vue有很多特点和Web开发中常见的高级功能
  • 解耦视图和数据
  • 可复用的组件
  • 前端路由技术
  • 状态管理
  • 虚拟DOM

Vue的安装

• 方式一：直接cdn引入

<!-- 开发环境版本，包含了有帮助的命令行警告 --> 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

• 方式二：下载引入（官网下载js文件）

开发环境 https://vuejs.org/js/vue.js 
生产环境 https://vuejs.org/js/vue.min.js

方式三：NPM安装

• 待完善

vue使用

• 简单vue

<div id="myId">
        <h2>{{message}}</h2>
        <h3>{{name}}</h3>
    </div>
    <div>
        {{message}}
<!--        没有id-->
    </div>
    <script src="../js/vue.js"></script>
    <script>
        //let变量、const常量
        //编程范式：声明式编程
        const app = new Vue({
            el:"#myId",//用于挂载要管理的元素
            data:{//定义数据
                message:"是你吗？",
                name:"哈哈"
            }
        })
    </script>

• 列表显示

<div id="myli">
    <ul>
        <li v-for="item in movies">{{item}}</li>
    </ul>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue ({
        el:"#myli",
        data:{
            message:"你很好",
            movies:["海贼","大理石","没有我的日子"]
        }
    })
</script>

• 计数器

<div id="myid">
    <h4>当前计数：{{counter}}</h4>
    <button v-on:click="add">+</button>
    <button @click="sub">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
    let my = new Vue({
        el:"#myid",
        data:{
            counter: 0
        },
        methods:{
            add:function () {
                console.log("被执行了");
                this.counter++
            },
            sub:function () {
                console.log("减法");
                this.counter--
            }
        }
    })
</script>

Vue中的MVVM

• View层：视图层
  在我们前端开发中，通常就是DOM层。
  主要的作用是给用户展示各种信息。
• Model层：数据层
  数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。
  在我们计数器的案例中，就是后面抽取出来的obj，当然，里面的数据可能没有这么简单。
• VueModel层：视图模型层
  视图模型层是View和Model沟通的桥梁。
  一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中
  另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。
  

计数器的MVVM

• 我们的计数器中就有严格的MVVM思想
  View依然是我们的DOM
  Model就是我们我们抽离出来的obj
  ViewModel就是我们创建的Vue对象实例
• 它们之间如何工作呢？
  首先ViewModel通过Data Binding让obj中的数据实时的在DOM中显示。
  其次ViewModel通过DOM Listener来监听DOM事件，并且通过methods中的操作，来改变obj中的数据。
• 有了Vue帮助我们完成VueModel层的任务，在后续的开发，我们就可以专注于数据的处理，以及DOM的编写工作了。

创建Vue实例时候传入的对象options

我们在创建Vue实例的时候，传入了一个对象options。
这个options中可以包含哪些选项呢？
详细解析
目前掌握这些选项：

• el:
  类型：string | HTMLElement
  作用：决定之后Vue实例会管理哪一个DOM。
• data:
  类型：Object | Function （组件当中data必须是一个函数）
  作用：Vue实例对应的数据对象。
• methods:
  类型：{ [key: string]: Function }
  作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。

Vue的生命周期