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引用

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

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

npm install ‐g @vue/cli

Vue实例（固定写法）

<div id="app">
	{{arr}}     //此处在浏览器显示hello world

</div>


//先引入Vue框架
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
//下面写语句
<script>
			new Vue({
						el:"#app",         //el=>挂载点，id属性
						data:{              //数据
							arr:"hello world"
						
						}

			})

</script>

指令

​ 是带有 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，第三个依然是索引

<div id="app">    
        <ul>
            <li v-for="(item,index) of arr">{{index+1}} / {{item}}</li>
        </ul>
    </div>
   
    <script src="./base/vue.js"></script>
    <script>
        //在上面写的v-开头的称之为vue的指令（directive） 指令的作用，就是用来操作dom
        new Vue({
            el:"#app",
            data:{
                arr:["苹果","香蕉","橘子"]
            }
        })
    </script>

监听事件-直接触发代码

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

<div id="app">  
        <p>num: {{num}}</p>
        <p><button @click="num++">点击num</button></p>
</div>


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

v-on事件修饰符

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

v-model事件

 <div id="app">
        <p>msg==> {{msg}}</p>
        <p><input type="text" v-model="msg"></p>
 </div>

数组更新检测

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