Vue day01 vue初识

Vue day-01 vue初识

一.认识vue

1.vue特点

易用，灵活，高效

2.核心

数据驱动

组件化

3.安装方式

     	<!-- 安装 -->
        <!-- 1. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
        <!-- 2. npm install npm -->
        <!-- 3. <script src="./js/vue.js"></script>-->

二.使用

1.注意

1）.不能绑定到html和body上

2）.要绑定到页面唯一的元素上

3）.如果绑定到类名上只显示第一个的内容、

new Vue({
	el:'#app,
	data:{
		属性：属性值（可以是 插值表达式，js表达式，运算，方法）
	}，
	methodes:{
		方法
	}
})

三.基本指令

1.v-text（不识别标签）更新元素textContent

可以解决双括号刷新页面时闪烁的问题

2.v-html（识别便签）更新元素innerHTML

3.v-if（可以移除元素）

显示或隐藏元素

4.v-show

显示与隐藏，但是会给元素设值为display:none,不会移除元素

5.v-else-if

if判断

6.v-bind

绑定数据，设置自定义属性

简写 ：自定义属性名：“属性值”

7.v-on =“fn（）”事件绑定 （）可省略

简写 @事件名 = “fnb()”

8.v-for = ‘item in arr’

循环数组：v-for=(item,index) in arr

item:数组中每一项 index下标

循环对象：v-for=（item,key,index） in obj

key属性值 item值 index下标

9.v-model 双向数据绑定（特点：只有表单元素可以使用）

三.绑定样式

：class方式绑定

 <div class="box div3">我是div</div>
 <!-- 通过绑定属性的方式 -->
 <div :class='box'>我是div2</div>
 <!-- 通过三元方式添加样式 -->
 <div :class='[1==2?box:div3]'>我是div3</div>
 <!-- 复合样式-->
 <div :class='box+" div3"'>我是div4</div>

:style 方式绑定:

<div style='width: 100px;height: 100px;background-color: red;'>我是div</div>
<!-- style的行内样式 -->
<div :style='obj'>我是div2222</div>
<div :style='[obj,obj1]'>我是div33333</div>

知识点: :key的作用; 绑定一个唯一值，避免勾选不正确的问题 与v-for的固定搭配

面试题

1. mvvm框架是什么？它和其它框架（jquery）的区别是什么？哪些场景适合？

2. vue等单页面应用及其优缺点

3. 说出至少4种vue当中的指令和它的用法？

4. v-if 和 v-show 区别

   区别：v-if会直接移除元素

   ​ v-show会给元素设置display：none/block