2020-8-3 读《vue.js实战》的第一天(上午)

vue.js是什么：简单小巧核心，渐进式框架（一步一步有阶段性的来使用）。

 

使用vue.js可以让web开发变得简单，同时也颠覆了传统web开发模式，它提供了现代web开发中常见的高级功能：

• 解耦视图与数据
• 可复用的组件
• 前端路由
• 状态管理
• 虚拟DOM（virtual DOM）

 

mvvm模式：Model-View-ViewModel。

mvvm模式是由经典软件架构mvc衍生而来，当view（视图层）变化时会自动更新到viewmodel（视图模型），反之亦然。view和viewmodel之间通过双向绑定（data-binding）建立联系。

 

如果开发几个简单h5页面或小应用，可以直接通过script加载CDN文件：

//自动识别最新版本稳定的vue.js
<script src="http://unpkg.com/vue/dist/vue.min.js"></script>
//指定某个具体版本vue.js
<script src="http://unpkg.com/vue@2.1.6/dist/vue.min.js"></script>

 

第一个hello world应用代码如下：

<div id="app">
        <input type="text" v-model="name" placeholder="你的名字">
        <h1>你好，{{name}}</h1>
</div>
//vue.js部分
<script>
        var app=new Vue({
            el:"#app",
            data:{
                name:""
            }
        })
</script>

 

vue.js应用创建很简单，通过构造函数Vue就可以创建一个vue的根实例，并启动vue应用。

var app=new Vue（{
     //选项          
}）

变量名为app，代表了这个vue实例。

必不可少的一个选项就是el，el用于指定一个页面中已存在的DOM元素来挂在vue实例，可以使HTMLelement，也可以是css选择器，比如：

<div id="app"></div>

var app=new Vue({
   el:document.getElementById('app')//或“#app” 
})

挂载成功后我们可以通过$el来访问该元素，通过Vue实例中的data选项可以声明应用内需要双向绑定的数据。

 

vue生命周期：每个vue实例创建时，都会经历一系列的初始化过程，同时也会调用相应的生命周期钩子。

vue生命周期较常用的函数有：

• created：市里创建完成后调用，此阶段完成了数据的观测等，但尚未挂载$el还不可用
• mounted：el挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始
• beforeDestroy：实例销毁之前调用，主要解绑一些使用addEventListener监听的事件等。

这些钩子与el、data类似，也是作为选项写入vue实例中，并且钩子的this指向的是调用它的vue实例。

<div id="app"></div>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                a:2
            },
            created:function(){
                console.log(this.a)
            },
            mounted:function(){
                console.log(this.$el)
            }
        })
</script>

 

 

使用双大括号（Mustache语法）“”{{}}“”是最基本的文本插值方法，它会自动将我们双向绑定的数据实时显示出来，例如：

<div id="app">{{book}}</div>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                book:"冕冕吃泡面"
            }
        })
</script>

大括号中的内容会自动替换为冕冕吃泡面，通过任何方法修改book大括号的内容都会被实时替换。

 

在{{}}中，除了简单的绑定属性外，还可以使用JavaScript表达式进行简单的运算、三元运算等。vue.js只支持单个表达式，不支持语句和流控制。另外，在表达式中不能使用用户自定义的全局变量。

 

语法糖：语法糖是指在不影响功能的情况下添加某种方法实现同样的效果，从而方便程序开发。

//V-bind和v-on都提供了语法糖，也可以说是缩写

//V-bind可以省略v-bind直接写一个冒号：
<a v-bind:href="url">链接</a>
<img v-bind:src="imgUrl">
//缩写为
<a :href="url">链接</a>
<img :src="imgUrl">

//v-on可以直接用@来缩写
<button v-on:click="handleClose">点击隐藏</button>
//缩写为
<button @click="handleClose">点击隐藏</button>