认识Vue.js

官方网站：https://cn.vuejs.org

一、简介

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

二、学习内容

1.指令（directive） v--

2.组件（component）核心

3.路由（router）核心

4.状态管理（state）

5.和后端交互和其他第三方插件（axios、vantage、mint-ui、better-scroll.....）

三、MVVM

是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM（Model-View-ViewModel）框架的由来便是MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架并且把WPF的新特性糅合进去，以应对客户日益复杂的需求变化。

M model 模型数据的

V view 视图渲染数据的

VM viewModel 视图模型把模型里的数据渲染到视图上

四、环境搭建

vue 两种环境

（1）网页引入文件的方式简单、轻量

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

<body>
   <!-- 含有变量或表达式的html叫模板 {{}} template  --> 
    <div id="box">
        {{messsge}}
    </div>
    <script>
        //实例化 
        var vm = new Vue({
            //选中id名为box的元素，如果是class就用.box。不能直接放body
            el:"#box",
            data:{
                //放键值对
                messsge："hello world"
            },
            //template指定的模板的优先级比代理el指定的元素高，所以这里是渲染后面的
            template:"<h2>小可爱{{messsge}}</h2>"
        });
    </script>
</body>

（2）vue-cli （脚手架）方式适合做项目热更新

数据驱动：把丰富、可变的数据印射到界面上；数据变，视图变

数据变化 ---> 虚拟dom变化（diff算法） ---> 真实dom变化（打补丁）

模板：含有变量或表达式的html叫模板

五、指令

1. v-bind ！！！！动态地绑定一个或多个特性，或一个组件 prop 到表达式。

用法：v-bind:属性 = “变量或表达式”

简写： :属性 = “变量或表达式”

 <!-- 鼠标悬停几秒钟查看此处动态绑定的提示信息！ -->
    <div id="box">
        <!-- <span v-bind:title="message">
            动态绑定
        </span> -->
        <!-- 简写： -->
        <span :title="message">
            动态绑定
        </span>
    </div>
    <script>
        var vm = new Vue({
            el:"#box",
            data:{
                message:'页面加载于'+ new Date().toLocaleString()
            }
        })
    </script>

2. v-for

循环要绑定v-bind:key 区分列表里的每一项，标识组件的唯一性。

说明：https://www.jianshu.com/p/4bd5e745ce95

a：遍历数组

 <div id="box">
        <ol>
            <todo-item
            v-for = "item in groceryList"
            v-bind:todo="item"
            V-bind:key="item.id"
            ></todo-item>
        </ol>
    </div>
    <script>
        Vue.component('todo-item', {
            props:['todo'],
            template:'<li>{{ todo.text }}</li>'
        })
        var vm = new Vue({
            el:"#box",
            data:{
                groceryList:[
                    {id:0, text:'yi'},
                    {id:1, text:'er'},
                    {id:2, text:'san'},
                ]
            }
        })
    </script>

b：遍历字符串

<ul>
    <li v-for="n in a">{{n}}</li>
</ul>

c：遍历数字

<ul>
    <li v-for="n in 20">{{n}}</li>
</ul>

d：遍历对象

图片.png

3. v-if 条件是假值就直接消失，是真就渲染

v-show 条件是假值就display:none

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

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

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

4. v-on:事件的名字 = "事件处理函数"

事件处理函数放在methos里面，可以简写为@

v-on: === @

5. v-model 双向绑定指令数据变了视图会变，视图变了数据也变

想当与v-bind和v-on的结合

绑定class：v-bind:style="{'key': '值或表达式 '}"