vue的认知

vue的认知

• Vue是一个前端js框架，由尤雨溪开发，是个人项目 目前由饿了么ude团队进行维护
• Vue近几年来特别的受关注，三年前的时候angularJS霸占前端JS框架市场很长时间，接着react框架横空出世，因为它有一个特性是虚拟DOM，从性能上碾轧angularJS，这个时候，vue1.0悄悄的问世了，它的优雅，轻便也吸引了一部分用户，开始收到关注，16年中旬，VUE2.0问世，这个时候vue不管从性能上，还是从成本上都隐隐超过了react，火的一塌糊涂，这个时候，angular开发团队也开发了angular2.0版本，并且更名为angular，吸收了react、vue的优点，加上angular本身的特点，也吸引到很多用户。

重点：学习vue是现在前端开发者必须的一个技能。

Vue的开发优点

• 开发成本降低
• 高性能高效率
• 使用方便

Vue的使用

Vue不支持IE8，因为使用了ES5的很多特性

• 可以直接通过script标签来引入vue.js，有开发版本和生产版本，开发版本一般我们在开发项目的时候引入，当最后开发完成上线的时候引入生产版本，开发版本没有压缩的，并且有很多提示，而生产版本全部删掉了

直接下载并用 script 标签引入，Vue 会被注册为一个全局变量。

• 注意初学者最好直接用script引用

• 在Vue中提供了一个脚手架（命令行工具）可以帮我们快速的搭建基于webpack的开发环境…

npm install ‐g @vue/cli

Vue实例（固定写法）

	{{arr}}     //此处在浏览器显示hello world




//先引入Vue框架

//下面写语句

指令

​ 是带有 v- 前缀的特殊属性

• ​ v-bind 动态绑定属性 //可以缩写v-bind:src => :src
• ​ v-if 动态创建/删除
• ​ v-show 动态显示/隐藏
• ​ v-on:click 绑定事件 //可以缩写 v-on:click => @click
• ​ v-for 遍历
• ​ v-model 双向绑定表单
• ​ v-cloak 防止表达式闪烁

v-for

• 这是一个指令，只要有v-的就是指令（directive 操作dom ）
• 在vue中可以通过v-for来循环数据的通知循环dom，语法是item in/of items，接收第二个参数是索引 (item,index) of items,
• 还可以遍历对象，第一个参数是value，第二个是key，第三个依然是索引

    
        

            
{{index+1}} / {{item}}
        
    
   
    
    

监听事件-直接触发代码

• 在vue中还有v-on来为dom绑定事件，在v-on：后面加上要绑定的事件类型，值里可以执行一些简单javascript表达式：++ – = …

  
        
num: {{num}}
        
点击num



 new Vue({
            el:"#app",
            data:{
                num:0
            }
 })

v-on事件修饰符

.stop 可以阻止事件的冒泡
.prevent 可以取消事件的默认行为
.once 只会触发一次
.self 只会自身触发

v-model事件

 

        
msg==> {{msg}}
        

 

数组更新检测

• push() 数组的添加元素 返回数组的长度
• pop() 从后面删除一个元素 返回删除的元素
• shift() 从前面删除一个元素 返回删除的元素
• unshift() 从数组的前面追加元素 返回数组的长度
• splice() 数组的剪贴、删除、插入
• sort() 数组的排序
• reverse() 数组的反转