vue的初步了解

一、什么是Vue?

• Vue的官网: https://v2.cn.vuejs.org/
• Vue是一套前端框架,免除原生的JavaScript中的DOM操作,简化了书写。
• 基于MVM（即Model(模型层）-View(视图层)-ViewModel)的思想，实现了数据的双向绑定，将编程的关注点放在数据上。

• 框架是一个半成品的软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效。

二、Vue的生命周期

• 生命周期：所谓生命周期其实指的就是一个对象从创建到销毁的这一整个过程。
• 生命周期有八个阶段：

三、Vue的初步学习

• Vue的初步框架的创建流程：

（1）新建一个HTML页面，引入Vue.js文件

 <!-- 开发环境版本,包含了有帮助的命令行警告  -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

(2)编写视图

   <div id="app">
        <!-- v-model 双向（既能设置也可以获取）数据绑定  -->
       <input type="text" v-model="message">
        {{ message }}
    </div>

(2)在js代码区域，创建Vue核心对象，定义数据模型

   <!-- 3.创建Vue对象 -->
    <script>
        var app = new Vue({
            // el:挂载点
            el: "#app", //vue接管的区域
            data: {
               message: "水煮牛肉"
            },
            methods: {
             
            },
        })
    </script>

在编写视图中，出现了{{message}}形式,这是插值表达式。

• 插值表达式
  • 形式：{{表达式}}
  • 内容可以是：变量、三元运算符、函数调用以及算数运算符。

四、Vue的常用指令

指令：HTML标签上带有v-前缀的特殊属性，不同指令具有不同的含义。如：v-if、v-for、v-model等等。

Vue中常用的指令有如下几个：

指令	作用
v-bind	为HTML标签绑定属性值，如设置href、css样式等
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件
v-if、v-else-if、v-else	条件性的渲染某元素，判定为true是渲染，否则不渲染
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性

4.1、v-bind与v-model指令

• v-bind：设置元素的属性(如:src,title,class) 语法为:v-bind:属性名=表达式 v:bind可以省略。如：

• v-model：便捷地获取和设置表单元素的值(双向数据绑定)，绑定的数据会和表单元素值相关联。

​ 注意事项：通过v-bind或者是v-model绑定的变量，必须在数据模型中进行声明。

4.2、v-on指令

• v-on:为元素绑定事件。其中事件名不需要写on,指令可以简写为@,绑定的方法定义在methods属性中。

4.3、v-if—v-show指令

4.4、v-for指令

五、总结

（1）Vue是一个基于MVVM模型的前端js框架。

（2）Vue常用的指令：v-bind、v-model、v-on、v-if、v-show以及v-for。

（3）Vue的生命周期中，需要掌握一个方法：mounted钩子方法。