Vuejs框架

vue叫做渐进式框架，由底层上传逐层 应用，用来将页面代码进行组件化和规范化，单页面开发，提供浏览器加载速度，加上代码写作，采用mvvm模式，可以实现动态加载标签，动画效果，表单验证，链接后台等；

mvc和mvvm模式

mvc模式

m模式层：html

v视图层：css

c控制层：js

mvvm模式

model->viewmmodel->view 双向绑定，动态更新

渐进式框架：可增量采用，渲染->组件(自创的标签)->路由->状态管理 (用到什么填什么)

语法与关键字

 var v=new Vue({

            el:"#app",//获取标签节点

            data:{ str:"hello word"},//定义变量

            methods:{//定义函数}

        })

关键字

        模板：在页面上要渲染vue的标签，例如：div

        挂载点：用来渲染js代码的标签叫挂载点，例如：el操作的标签

        实例：用来创建vue对象，例如：new Vue()

        数据：在vue下定义的变量，都放在data属性里

        函数：自己创建的函数体，都放在methods里

        插值表达式：用来调用Vue下的变量和函数，例如：{{str}}

插值表达式

{{str}}输出变量	{{1+3+4}}定义表达式
{{str.replace("o","#")}}调用函数	{{str=="hello word"?'yes':'no'}}定义三元表达式

注意：不能向页面输出标签

指令

1.v-text 操作文本内容

2.v-html操作文本和标签

3.v-bind 动态绑定属性(单向绑定)

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

       <img :src="url">简写

4.v-model 双向绑定

5.v-on 绑定事件

        <h1 v-on:click="fun()">{{str}}</h1>

        methods:{

              fun:function(){ alert("fun函数被执行了")  }

          }

6.v-show 显示隐藏元素

7.v-if v-else-if v-else 判断指令        

<p v-if="user=='领导'">早上好领导</p>

        <p v-else-if="user=='客户'">你好客户</p>

        <p v-else-if="user=='员工'">嗨！兄弟</p>

        <p v-else>你找谁</p>

8.v-for 循环指令

<h2 v-for="i in 10">{{i}}</h2>遍历数字
<h2 v-for="s in 'jell'">{{s}}</h2> 遍历字符串
<h2 v-for="(v,i) in ['x','s','f']">{{i}}-{{v}}</h2> 遍历数组
<h2 v-for="(item,key) in {name:'lisi',age:23}">{{key}}-{{item}}</h2>遍历对象

面试题：

v-show和v-if区别：

        v-show是设置css的display属性进行隐藏，v-if是删除了标签

        v-show标签只编译一次，v-if标签会多次创建和销毁

        v-show只用于减少数据渲染，v-if可以做权限判断和动态数据加载

9.v-pre让某个标签和他的子标签跳过编译 用来减少编译时间

10.v-once让某个标签和组件之渲染一次

11.v-cloak 让vue实例化后再编译标签

事件

键盘修饰符

        例如：v-on.keyup.13="fun"

        enter回车 tab制表符 shift ctrl esc

        delete up down left right

事件修饰符

        1.stop阻止冒泡

        2.prevent不再重载页面

        3.capture调用捕获模式

        4.self让事件操作元素本身，子元素不会触发

        5.once事件只执行一次

样式

        操作class属性，绑定多个

        数组定义

                <div :class="[name1,name2,name3]" @click="fun3"></div>

                data:{name1:"box1",name2:"box2",name3:"box3"}

        对象定义

                <div :class="{'box1':true,'box2':false,'box3':true}"@click="fun2">