【Vue初识】

Vue基础使用

一、什么是Vue.js

Vue.js是一套构建用户界面的渐进式框架，采用自底向上增量开发的设计。
1、与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue的
核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合
2、Vue.js是前端的主流框架之一，和Angular.js、React.js一起，并成为前端
三大主流框架！

二、框架和库的区别

1、框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换
框架，则需要重新架构整个项目。
Ø例如：node中的express
2、库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法
完成某些需求，可以很容易切换到其它库实现需求。
Ø例如：从Jquery切换到Zepto
Ø例如：从EJS切换到art-template

三、为什么学习流行框架

1、提高开发的效率
2、让程序员可以更多的时间去关注业务逻辑，减少不必要的DOM操作

四、MVC与MVVM的区别

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

五、Vue的代码结构

1、引入vue.js
2、视图层
3、创建vue实例
data：存放数据

 data:{
        msg:'Helod word',
        html:'<h1>Helo word</h1>'
    },

el：这个控制是哪块视图

el:'#app',

methods：放方法
methods:{
}

六、插值表达式、v-cloak、v-text、v-html

插值表达式：{{}}
v-textv-html异同：
相同点：替换标签中的内容
不同点：v-html：会解析富文本v-text：不会解析富文本直接展示字符串

v-text打印
//<h1>Helo word</h1>
v-html打印
//Helo word

v-cloak：防止界面闪烁

<!-- 防止界面闪烁的原理是display:none -->

七、v-bind v-on

v-bind：绑定元素属性

        <div>
            <!-- <img v-bind:src="imgSrc" alt=""> -->
            <!-- v-bing简写: -->
            <!-- <img :src="imgSrc" alt=""> -->
            <div class="div" :style="'background-image:url('+imgSrc+')'"></div>
        </div>

v-on：绑定事件

 <!-- <button v-on:click="log">按钮</button> -->
 <!-- <button @click="log">按钮</button> -->

八、事件修饰符

.stop阻止冒泡
<button@click.stop>按钮</button>
.prevent阻止默认事件
.capture添加事件侦听器时使用事件捕获模式
.self只当事件在该元素本身（比如不是子元素）触发时触发回调
.once事件只触发一次

九、v-model数据双向绑定

v-model
a)作用：数据双向绑定
b)注意：绑定的是表单控件

 <input type="text" :value="value1">
 <input type="text" v-model:value="value1">

十、Vue中样式的使用

使用class样式:
1、数组

<div :class="['box', 'red']">我是盒子</div>

2、三木表达式

<div :class="falg?'box':'red'">我是盒子</div>

3、数组内置对象（对象的键是样式的名字，值是Boolean类型）

<div :class="class2">我是盒子</div>
class2: ['box', { 'red': true }]

4、直接通过对象

<div :class="{'box':false,'red':true}">我是盒子3</div

使用内联样式

1.直接在元素上通过:style的形式，书写样式对象
2.将样式对象，定义到data中，并直接引用到:style中
3.在:style中通过数组，引用多个data上的样式对象

十一、V-for和key属性

遍历数组
遍历对象
遍历数字
key在使用v-for的时候都需要去设置key

key只能是字符串或者数字
key必须是唯一的
作用：提高重排效率，就地复用

十二、v-if与v-show

v-if：删除DOM元素
v-show：隐藏元素display：none；
v-if只修改一次的时候可以使用v-if
v-show频繁切换的时候可以使用v-show