一、Vue简介
Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件 。
Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时 ，Vue.js 也能完美地驱动复杂的单页应用。
二、Vue特点
易用，灵活，性能
三、目录结构
四Vue安装
- script直接引入
- CDN方法：<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- NPM命令行 npm i -g @vue/cli
- 基本模板语法
- 插值语法：
1.文本 {{}}
2.纯HTML v-html，注意:防止XSS,CSRF{1.前端过滤2.后台转义3.给cookie加http}
3.表达式
- 指令：
- v-blnd 动态绑定属性
- v-if 动态创建和删除
- v-show 动态隐藏和显示
- v-on：click 绑定事件
- v-for 循环遍历
- v-model 双向绑定
2.1指令缩写：
v-blind：src=>:src
v-on:click=>@click
代码示例：
- class 与 style
- 绑定HTML Class
-对象语法 -数组语法
- 绑定内联样式
-对象语法 -数组语法 //需要将 font-size =>fontSize
- 条件渲染
(1)v-if
(2)v-else v-else-if
(3)template v-if ,包装元素template 不会被创建
(4)v-show
- 列表渲染
- v-for (特殊 v-for="n in 10") a. in b. of 没有区别
(2)key： *跟踪每个节点的身份，从而重用和重新排序现有元素 *理想的 key 值是每项都有的且唯一的 id。data.id
(3)数组更新检测变动
a. 使用以下方法操作数组，可以动 push() pop() shift() unshift() splice() sort() reverse()
b. filter(), concat() 和 slice() ,map(),新数组替换旧数组
c. 不能检测以下变动的数组
vm.items[indexOfItem] = newValue
解决
(1)Vue.set(example1.items, indexOfItem, newValue) (2)splice
(4)应用:显示过滤结果
- 事件处理
- 监听事件-直接触发代码
- 方法事件处理器-写函数名 handleClick
- 内联处理器方法-执行函数表达式 handleClick($event) $event 事件对象
- 事件修饰符
.stop 阻止冒泡
.prevent 阻止默认行为
- 表单控件绑定/双向数据绑定 v-model
- 基本用法 -购物车
(2)修饰符
.lazy :失去焦点同步一次
.number :格式化数字
.trim : 去除首尾空格
- 计算属性 复杂逻辑,模板难以维护
- 基础例子
- 计算缓存 VS methods -计算属性是基于它们的依赖进行缓存的。 -计算属性只有在它的相关依赖发生改变时才会重新求值
(3) data vs computed vs watch
购物车示例（逆战班）
- 组件
- 作用：封装可以复用的代码
- 组件注册
全局注册：
Vue.component("navbar",{
template:`
<div>
<nav style="background:yellow;">
<button @click="handleClick()">返回</button>
<navbarchild1></navbarchild1>
<navbarchild2></navbarchild2>
<ul>
<li>11111</li>
<li>22222</li>
</ul>
{{myname}}
</nav>
<div>最外层必须有root element</div>
</div>
`,
局部注册：
var ComponentA = { /* ... */ }var ComponentB = { /* ... */ }var ComponentC = { /* ... */ }
new Vue({
el: '#app',
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
})
- 组件编写方式与Vue实例的区别
- *自定义组件需要有一个root element
- *父子组件的data是无法共享
- *组件可以有data，methods,computed....,但是data 必须是一个函数
- 组件通信
i. 父子组件传值 (props down, events up)
ii. 属性验证props:{name:Number} Number,String,Boolean,Array,Object,Function,null(不限制类型)
iii. 事件机制 a.使用 $on(eventName) 监听事件 b.使用 $emit(eventName) 触发事件 iv. Ref <input ref="mytext"/> this.$refs.mytext
v. 事件总线 var bus = new Vue(); * mounted生命周期中进行监听
4.动态组件 *<component> 元素，动态地绑定多个组件到它的 is 属性 *<keep-alive> 保留状态，避免重新渲染
5.slot插槽 (内容分发) *混合父组件的内容与子组件自己的模板-->内容分发 *父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。
a. 单个slot b. 具名slot
七、生命周期
<div id="box">
<child v-if="isCreated"></child>
</div>
<script type="text/javascript">
Vue.component("child",{
template:`<div id="aaa">
child-{{myname}}
<ul>
<li v-for="data in datalist">
{{data.name}}
</li>
</ul>
</div>`,
data(){
//ajax
return {
myname:"11111",
datalist:[]
}
},
beforeCreate(){
// this.myname
console.log("beforeCreate")
},
created(){
this.myname ="22222222"
console.log("created","数据的初始化")
},
beforeMount(){
this.myname ="3333333"
console.log("beforeMount","无法访问到我们的状态对应的节点")
},
mounted(){
fetch("json/test.json").then(res=>res.json()).then(res=>{
console.log(res)
this.datalist = res.data.films //更新数据
})
console.log("mounted","访问dom,setInterval,window.onscroll, 监听事件 ajax")
},
beforeUpdate(){
console.log("beforeUpdate","访问li节点，访问不到")
},
updated(){
console.log("updated","更新之后可以访问dom")
},
beforeDestroy(){
console.log("beforeDestroy-clearInterval ,window.οnscrοll=null,$off");
},
destroyed(){
console.log("destroyed--clearInterval ,window.οnscrοll=null,$off")
}
})
//创建根组件
var vm = new Vue({
el: "#box",
data:{
isCreated:true
},
})
自己的一些理解，如有不妥，见谅。。。