vue第一天

一、概念

vue.js是一套构建用户界面的渐进式框架，采用自底向上增量开发的设计。

核心理念：数据驱动视图

二、代码结构

1、引入vue.js

2、写视图层，展示想要的内容

3、实例化Vue（）

data：存放数据
el：这个控制是哪块视图
methods：放方法
    <div id="app">

        展示区域

        <!-- 插值表达式 {{}}-->

        {{msg}}

        {{num * 2 + 3}}

    </div>

 var app = new Vue(

        {
            // 控制区域

            el:"#app",

            // 数据

            data:{
                msg:"hello word22!",

                num:100

            },

            methods: { },

        }

    )

4、框架和库的区别

        框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。

        库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。

5、MVC和MVVM的区别：

MVC 是后端的分层开发概念;MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分Model、View、VM ViewModel; 

三、基础指令

1、v-cloak 防止页面闪烁

<style>

        [v-cloak]{
            display: none;

        }

    </style>

<div v-cloak>  {{msg}}</div>

2、v-html   v-text 

v-html 能够解析富文本  两者都会覆盖原来的内容

 3、 v-bind v-on

        <!-- 属性绑定 -->

        <img v-bind:src="src" alt="">

        <img :src="src" alt="">  简写为：

        <!-- 事件绑定 -->

        <button v-on:click="changeSrc"> 更改图片</button>

        <button @click="changeSrc"> 更改图片</button>  简写为@

4、定义方法

        methods: {
            changeSrc(){
                this.src = " "

            }}

四、事件修饰符  可以组合使用

.stop 阻止冒泡（冒泡是从内往外）阻止的是自己外层的执行， 不阻止自己执行
.prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式（捕获是从外到内）
.self 只当事件在该元素本身（比如不是子元素）触发时触发回调   不会影响冒泡
.once 事件只触发一次
 当冒泡和捕获事件都存在时， 先执行捕获

五、v-model数据双向绑定   多用于表单

通过输入value,修改数据层msg

<input v-model:value="msg" >