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() 数组的反转