1.渐进式框架:可以同时与jquery.js 原生js同时存在
2.vue生态:core+Vue_router(路由)+Vuex(状态)
3.特性
1.服用组件
2.虚拟dom
3.状态管理
4.路由
5.官方网站 https://cn.vuejs.org/v2/guide/
二.vue.js安装
1.cdn安装
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
2.不联网引入
下载地址:
开发版: https://cn.vuejs.org/js/vue.js
生产版: https://cn.vuejs.org/js/vue.min.js
3.npm引入
三.指令
1.v-clock
隐藏数据绑定时的闪烁效果
<p v-cloak></p>
在元素上增加v-cloak,并增加style样式
<style>
[v-cloak]:{
display:none
}
</style>
2.v-text v-html
绑定数据
v-text 与 {{}} 效果一样
区别是
- v-text 默认不会闪烁 {{}}会闪烁
- v-text会覆盖元素内的所有内容 {{}}不会
<p v-text="msg"></p>
<p>{{msg}}</p>
v-html 与v-text一样 绑定数据,v-html会解析成html代码
<template>
<div id="zhiling">
v-html效果:<span v-html="msg"></span> <br/>
v-text效果:<span v-text="msg"></span>
</div>
</template>
<script>
export default {
name: "zhiling",
data(){
return {
msg:"<b>123</b>"
}
}
}
</script>
3.v-bind 绑定数据
v-bind效果:<span v-bind:title="msg+'sss'">123</span>
可以简写为 : 不加v-bind
v-bind效果:<span :title="msg+'sss'">123</span>
v-bind 会把数据作为js的表达式解析
5.v-on 绑定事件
v-on绑定事件的值里不能直接写js代码
v-on效果:<span v-on:click="show">123</span>
这里的show调用的是methods中的方法,不可以直接写alert(123),与v-bind的区别
methods:{
show(){
alert("123")
}
}
v-on:click 也可以简写为 @onclick="show"
6.v-once 只有第一次会改变值
v-once效果:<span v-once v-text="msg"></span>
7.v-pre 原样显示
v-pre效果:<span v-pre>{{msg}}</span> <br/>
4.事件修饰符
stop:阻止冒泡
selef:只能由自己触发
once:只触发一次
@chlick.stop="alertMsg"
四.生命周期
五.计算属性
有缓存机制
computed:
computed效果:<span>{{totalPrice}}</span> <br/>
computed:{
totalPrice(){
let result = 0
for(let moive of this.moives){
result += moive.price
}
return result
}
},
六.ES6语法与高阶函数
ES6语法
高阶函数
filter
过滤出符合条件的结果返回
var arr = [1,2,3,4]
var newArr = arr.filter(function(item){
return item > 2
})
console.log(newArr)
map
对结果进行处理后返回处理后的结果
var arr = [1,2,3,4]
var newArr = arr.map(function(item){
return item*2
})
console.log(newArr)
reduce
对数据的数据进行汇总
var arr = [1,2,3,4]
var total = arr.reduce(function(prevalue,item){
return prevalue+item
})
console.log(total)
七.父子组件传值
父传子:
定义组件时使用props属性
Vue.component("cpn",{
template: "#cpn",
data(){
return {}
},
props:{
moive:{
type: Array,
default: function(){
return []
}
required: true
}
}
})
<template id="cpn">
</template>
<div id="app">
<cpn :moive="父组件的属性"></cpn>
</div>
子传父:
通过this.$emit()发射事件传值
Vue.component("cpn",{
template: "#cpn",
data(){
return {}
},
methods:{
//定义子组件的触发事件
testEmit(参数){
this.$emit("ptestemit","参数");
}
}
})
父组件监听子组件事件
<div id="app">
<cpn @ptestemit="父组件中负责处理的方法"></cpn>
</div>
注意驼峰
pTestEmit = p-test-emit
八. 插槽 slot
作用:扩展组件
8.1 基本使用
组件内使用slot 标签预留插槽
<template id="cpn">
<slot></slot>
</template>
使用组件时传入要自定义的内容,自动替换slot的内容
<div id="app">
<cpn><button>按钮</button></cpn>
</div>
8.2 插槽默认值
slot内可以写一个默认内容,如果没有指定的内容来替换就会使用默认内容
8.3 具名插槽
当有多个插槽时,需要给插槽起一个不一样的名字来区分
<template id="cpn">
<slot name="left"></slot>
<slot name="center"></slot>
<slot name="right"></slot>
</template>
使用组件时 指定替换的是哪个名字的slot,就只会替换该名字的插槽
<div id="app">
<cpn>
<span slot="center"></span>
</cpn>
</div>
若有收获，就点个赞吧
