vue.js第一天

引入vue,现在基本使用稳定的vue2

vue是一种渐进式js框架,可以和js混合使用,提高开发效率,数据驱动视图,让用户不再操作dom元素,
框架:有一套完整的解决方案,更换框架需要重构项目
库:提供一些小功能,很容易切换到其他库
后端MVC--model,view,Controller,
前端:MVVM---model,view,ViewModel, 

代码结构
引入vue.js
写入图层,要展示的内容
实例化vue
el:要控制的视图
data:存放的数据
methods:存放方法

v-cloak防止页面闪烁, 指令设置样式，这些样式会在 Vue 实例编译结束时，
从绑定的 HTML 元素上被移除。要配合display:none使用

    {{msg}} 插值表达式,可以读取变量 

    v-html会解析富文本,v-text保持原文本不变 
    都会覆盖原内容

    v-on事件绑定, 使用指令后,会被识别成变量,如果想用普通字符串,再加不同引号

可以简写成冒号,数据也可以是返回值
点击事件
<BUTTON @click=“demo1”>点击事件
<BUTTON @change=“demo1”>点击事件
@change事件,当失去焦点时触发
<v-on事件绑定.可以简写成@

{{3*2+1}}

简单逻辑运算

    <div class="box1" @click.capture="demo1">
        <div class="box2" @click.self="demo2">
            <button class="box3" @click.once="demo3">
                事件捕捉
                <!-- 事件修饰符
				prevent阻止默认事件--a链接跳转
				stop阻止所有冒泡
				capture事件捕捉,,由外到内
				self只有该元素本身触发时,只阻止特定元素冒泡
				once只执行一次
            </button>
        </div>
    </div>

     vue中样式的使用 -
     使用样式数组,每一项都是类名 
    <div :class="['demo1','demo2']">hello world</div>
  行内样式,如果包含-,就必须加上引号
    使用内联样式

1. 直接在元素上通过 :style 的形式，书写样式对象

2. 将样式对象，定义到 data 中，并直接引用到 :style 中
   在data上定义样式
   在元素中，通过属性绑定的形式，将样式对象应用到元素中

3. 在 :style 中通过数组，引用多个 data 上的样式对象
   在data上定义样式
   在元素中，通过属性绑定的形式，将样式对象应用到元素中

   <div style="color: blueviolet;"> 111</div>
   <div :style="{'font-size':'32px'}">{{mes}}</div>
   <div :style="textStyle">{{mes}}</div>
   <div :style="[textStyle,textStyle2]">{{mes}}</div>
   <div :style="getStyle(11)">{{mes}}</div>
   

   v-for---- item是数组中的每一项,index是下标,key必须写而且只能是字符串或数字,并且唯一,绑定界面元素和数组
   作用:提高重排效率

   遍历数字

   v-if与v-show区别
   区别：

4. v-if删除dom元素

5. v-show设置display:none
   应用场景：

6. v-if只修改一次的时候可以使用v-if

7. v-show频繁切换的时候可以使用v-show