历史

vue作者是由雨溪，公布于2014年，是目前应用人数比拟多的前端框架，该框架具备以下几个长处：

  • JS框架
  • 简化DOM操作
  • 响应式数据驱动视图

框架和库的区别

  • jquery库：->DOM+申请
  • 框架：全方位功能齐全
    • *

KFC世界里:

  • 库相当于是一个套餐
  • 框架相当于是一个全家桶

代码上不同:

  • 个别应用库的代码，是调用库的某个函数，咱们把控库的代码
  • 个别应用框架，其框架帮咱们运行咱们编写好的代码

1、初始化本身行为
2、执行你所编写的代码
3、开释一些资源

vue起步

1. 引包

形式很多，我采纳cnpm 的形式
在对应文件地位关上终端，执行：cnpm i vue
其余形式详见官网文档

2. 启动

var app = new Vue({el:目的地,template:模板内容,data})
留神1：当template没有内容，则调用目的地，否则template。template的优先级高于el挂载的点
留神2：template当有多个元素的时候，要有一个根元素
留神3：在组件中data必须返回一个函数，函数返回一个对象

vue文件介绍

{{表达式}}内容能够为：

  • 对象（不要间断3个{}），
  • 布尔值，
  • 字符串，
  • 三元表达式

留神：必须在data 这个函数中返回对象中的申明

 var app2 = new Vue({ el: "#app", data() {     return {     msg: "我是第一个VUE练习作业",     isshow: true     } }, template: `     <div>     <div>{{msg}}</div>     <div>{{ {'name':'jack'} }}</div>     <div>{{ isshow }}</div>     <div>{{ "isshow" }}</div>     <div>{{ isshow ? "值为真":"假的" }}</div>     </div> `, });

什么是指令

概念：对数据+页面更不便的输入，这个操作叫做指令，用v-xxx示意，在标签上应用

v-text

元素的innerText必须是双标签，跟{{}}成果类似，然而这个替换是全替换，如果只有替换局部间接应用{{}}

v-html

元素的innerHtml（肯定要有根标签）

v-if

判断是否插入这个元素，相当于元素的销毁和创立
还能够联合 v-elseif v-else应用

v-show

暗藏显示元素，给元素style加上display:none基于css款式的切换

v-for

循环遍历数组或对象

var app = new Vue({     el:"#app",     template:`     <div>     <div v-text='msg'></div>     <div v-html='msg2'></div>     <button v-on:click='changeBtn'>点我试试</button>     <div v-if='isShow'>哈哈哈</div>     <div v-show = 'isShow'>我来了</div>     <ul >     <li  v-for="(val,index) in items">{{val.name}}价格为:{{val.price}}</li>     </ul>     </div>     `,     data(){         return{             msg:"这是测试",             msg2:`<h2>这是v-html测试</h2>`,             isShow:false,             items:[{             name:"苹果汁",price:10             },{             name:"番茄汁",price:12             }]         }     },     methods:{         changeBtn(){         this.isShow =  !this.isShow;         }     } })

v-if和v-show区别

v-if是惰性的，满足条件才加载
v-show不论条件虚实都会渲染
总结：v-if有更高的切换开销，v-show有更高的初始渲染开销

v-bind的应用

给元素属性赋值，能够给已存在的属性赋值，input value
也能够给自定义的属性赋值
语法：v-bind:属性名="常量|变量"
简写： :属性名="变量名"（也能够是对象{}）
这个例子数据驱动视图变动,data的isShow内容扭转,触发视图中类名变动（当isShow为true时active插入{active:isShow}）,从而扭转界面款式，

 var app = new Vue({             el:"#app",             template:`             <div>             <div class = "op" v-bind:class ={active:isShow}>给你点色彩看看</div>             <button v-on:click='changeColor'>点我试试</button></div>             `,             data(){                 return{                 msg:"这是测试",                 op:"op",                 isShow :falsed                 }             },             methods:{             // this指向template                 changeColor(){                 this.isShow =  !this.isShow;                 }             } })

v-on