框架和插件
- 框架不能轻易换，库可以
MVC和MVVM
node（后端）中MVC：后端的分层开发概念
MVVM是前端视图层的概念，主要关注视图层分离，把前端视图层分成三部分：Model、view、vm viewmodel
image
VUE基础
一、数据与方法
- 当数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时就已经存在于 data 中的属性才是响应式的。
- 使用 Object.freeze()，会阻止修改现有的属性，也意味着响应系统无法再追踪变化。
var obj = { foo: 'bar' } Object.freeze(obj) new Vue({ el: '#app', data: obj }){{ foo }}
- 不要在选项属性或回调上使用箭头函数，因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致错误。
- 动态参数表达式：从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：
...- 动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无效的。
- 还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写：
二、指令
- v-cloak 解决插值表达式闪烁问题
- v-text：没有闪烁问题，会把标签中内容覆盖v-text=“msg”
- v-html：渲染成html
- v-once：只拿一次数据进行显示，后面数据更改，页面不会跟着更改
- v-pre：不解析{{}}，直接显示
事件修饰符
- 常见事件修饰符
- @click.stop=""----阻止事件冒泡
- @click.prevent ----阻止默认行为
- @click.self ----只允许自身触发
- @click.captures----实现捕获触发机制
- @click.once----只执行一次
- @keyup.enter----回车键
- 使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
三、按键修饰符
- Vue.config.keyCodes.f2 = 113 使用 @keyup.f2
- 为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名： .enter、 .tab、 .delete (捕获“删除”和“退格”键)、 .esc、 .space、 .up、 .down、 .left、 .right
四、内联样式style(v-bind，语法糖：)
- 对象就是无序键值对的集合 "{'color‘：’red'，'font-size':'50px'}"
- 直接传递对象，对象在data中定义
- 在data中定义多个样式对象，以数组的方式传给style
五、class类属性(v-bind，语法糖：)
- 使用方式一：直接传递一个数组，数组中的需要单引号 "['more','add']"
- 使用方式二： 在数组中使用三元表达式
"['more','add'，{'another':item.age<30}]" - 使用方式三：直接传递对象 “{active：true，thin：false}” 对象属性为类名
六、条件渲染（v-if 、v-else-if、 v-else、v-show）
- v-if 每次都会重新创建或删除
- v-show，不会重新创建或删除，只是切换display属性
- 元素涉及频繁的切换，使用v-show。
七、列表渲染（v-for）
- v-for="( item, index ) in list"
- 顺序：值-键-索引
- in后面放数组，表示循环几次
- 在组件中使用v-for时，需要指定key属性
- 如果不添加key，则在数组中新增元素的时候，创建虚拟dom会进行对比，直接把原来4的li的值改成0000，4以后的往后移动；添加以后会插入0000的li（提高性能）
- {{item}}
八、v-model的使用
输入框的值是：{{inputValue}}
2.v-model的原理
输入框的值是：{{inputValue}}
3.v-model和radio
---您选择的性别是：{{gender}}
4.v-model和checkbox
是否选择{{isAgree}}
5.v-model 和 checkbox的多选框
你选择的爱好是：{{chooseHobby}}
6.v-model和select
你选择的爱好是：{{selectHobby}}
7.v-model和select多选
你选择的爱好是：{{selectHobbyArray}}
8.v-model的修饰符
输入框的值:{{lazyValue}}
输入框的值:{{trimValue}}
输入框的值:{{numberValue}} {{typeof numberValue}}
九、computed：计算属性
- 包含本实例里面的变量发生变化触发（数据联动）
- 在html中
+
=
- 在JS中
- 特点：
- 计算属性在引用的时候，不需要加（）来调用，直接把他当成是普通的属性使用
- 和methods的区别：只要在计算属性的function内部，所用到的data中的数据发生变化，computed就会重新计算这个 计算属性,当触发重新渲染时，调用方法将总会再次执行函数。
- 计算属性求值的结果会被缓存起来，方便下次使用；如果计算属性方法中的数据没有发生变化，则不会重新对这个 计算属性 求值（computed种的属性： 在页面中使用四次，只会调用一次，其余使用缓存显示）（methods 中的方法，在页面中使用四次，会调用四次）
watch ：侦听（异步场景）
- 通常更好的做法是使用计算属性而不是命令式的 watch 回调
- 上面代码是命令式且重复的。
过滤器：
- 全局过滤器：Vue.filter('过滤器的名称'，function (dateStr,formate) { } )
- 函数的第一个参数是管道前面传递过来的数据
- 私有的过滤器：new Vue({ el:'#box',data:{},
filters：{ dateFormate:function (dateStr, formate) {} } })
组件化
-
定义：为了拆分Vue实例的代码量，能够用不同的组件划分不同的功能块。
- 模块化：从代码逻辑的角度进行划分，方便代码分层开发，保证模块的职能单一。
- 组件化：从UI界面的角度进行划分，前端的组件化，方便UI组件的重用
-
创建组件的方式
- 创建方式一：使用Vue.extend({template:' '})来创建全局的组件。使用Vue.component('组件名称'，创建出来的组件)
var myCompontnt = Vue.extend({ template:`这是用extend创建
` }) Vue.component('myCompontnt',myCompontnt);Vue.component('myCompontnt',Vue.extend({ template:`这是用extend创建
` }));
- 创建方式二：Vue.component('组件名称'，组件的模板template)
Vue.component('myCompontnt',{ template:`这是用extend创建
` }); - 创建方式三：将template写在html中 Vue.component('组件名称'，{template：'#id'})
-
组件注册
Vue.component('my-component-name',{ /* ... */ })- 全局注册： Vue.component('component-a',{ /* ... */ })在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中
- 局部注册：
-
var ComponentA = { /* ... */ } var ComponentB = { /* ... */ } var ComponentC = { /* ... */ } //components 选项中定义你想要使用的组件： new Vue({ el: '#app', components: { 'component-a': ComponentA, 'component-b': ComponentB } })- 局部注册的组件在其子组件中不可用
-
组件中的data
- 组件可以拥有自己的data数据，组件中的data是一个方法，而且必须返回一个对象
-
组件名的命名和使用
- 在使用驼峰命名定义一个组件时，在引用这个元素时使用kebab-case的方式。不使用驼峰则直接使用定义的名称。
组件切换可以使用
通过改变参数 -
传递参数
- 父组件向子组件传递参数使用props
-
Vue.component('todo-item', { props: ['todo'], template: '- {{ todo.text }}
' }) /*使用*/- props中的数据是只读的，data中的数据是可读可写的
- prpos：使用驼峰命名法，在传参时需要使用其等价的短横线分隔命名
- prop 指定的值类型。以对象形式列出 prop。
props: { title: String } - 在JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态。
- 子组件通过事件调用向父组件传值
这里是子组件
-
使用ref获取组件元素和dom方法
这是父组件的H2啊
这里是子组件
自定义全局指令
Vue.directive( 'focus',{
updated:function (el) { },//可执行多次，当VNode更新时使用
bind:function (el,bindding) { },//只执行一次，当指令绑定到元素时。第二个参数可获得传入的参数，bindding。value。和样式有关的操作。
inserted:function (el) { el.focus() }//只执行元素，当元素插入dom中。和JS行为有关的操作在这执行
})
- 定义私有指令
directives:{
'fontweight':{
bind:function (el,bindding){
el.style.fontWeight = bindding.value
}
}
}
- 简写：
'fontsize':function (el,bindding) {
el.style.fontSize = parseInt(bindding.value) +'px'
}
生命周期
- 生命周期钩子 = 生命周期函数 = 生命周期事件
- 创建期间的生命周期函数
- beforeCreate： data和methods中的数据都还未被初始化
- created： data和methods中的数据初始化完成，调用数据和方法最早在这个方法中
- beforeMount：模板在内存中已经编辑好了，但是还没渲染到页面上，页面中的元素还未被真正的替换，只是一些模板字符串。document.getElementbyId（‘info’）.innerText----->获取不到
- mounted：实例创建期间的最后一个生命周期函数，实例完全创建好了，没有其他操作的话，这实例就不变。操作dom节点最早在mounted
- 实例运行期间的生命周期函数
- updated和beforeUpdate在data中数据发生改变时触发0次或多次。
- beforeUpdate执行时，页面中的数据还是旧的，data中数据是最新的，页面和最新的数据还未同步
- updated事件执行时，界面和data已经保持同步，都是最新的
- 销毁阶段的钩子
- beforeDestroy：Vue实例从运行阶段进入销毁阶段。实例上的所有data和methods以及过滤器、指令等都处于可用状态，此时还未真正销毁。
- destoryed。组件完全被销毁。组件中所有的数据等都不可以用。
生命周期.png
v-resource发起get、post、jsonp请求
methods:{
getMessage (){
this.$http.get('http://vue.studyit.io/api/getlunbo').then(
( result ) => {
this.getMessageResult = result.body;
console.log(result.body)
})
},
postMessage () {
this.$http.post('http://vue.studyit.io/api/post',{headers:
{'Access-Control-Allow-origin': 'http://localhost:8080/resource'}},
{emulateJSON:true}).then(
( result ) => {
this.PostMessageResult = result.body;
console.log(result.body)
})
},
jsonpMessage (){
this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(
( result ) => {
this.JsonpMessageResult = result.body;
console.log(result.body)
})
}
}
动画
图片.png
- 在html中
hello animation
+在css中
- 在
定义了name后，修改v-前缀为disp- - 使用第三方类库animate.css 在
- 使用钩子函数完成半场动画
- 在html中
- 在JS中
new Vue({
el:'#box',
data:{
flag:false
},
methods:{
beforeEnter (el){
el.style.transform = 'translate(0,0)'
},
Enter (el,done){
el.offsetLeft //没有实际作用，但是不写，没有显示动画效果
el.style.transform = 'translate(200px,300px)'
el.style.transition= 'all 1s ease'
done()//done是afterEnter函数的引用，不调用会延迟
},
afterEnter(el){//flag的作用是控制小球的隐藏和显示；跳过后半场动画
this.flag = !this.flag//直接使用opacity无法实现该功能
}
}
})
实现列表动画 - {{item.id}} and {{item.name}}
- style
- 动画-transition-group中appear和tag属性的作用
- appear 实现页面刚展示出来的时候的效果
- tag用来指定渲染成什么属性，没有添加默认渲染成属性
- mode可以实现组件切换时进出的先后顺序
插槽
- 编译作用域：父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
- 后备内容（默认的)内容）
- 具名插槽
元素有一个特殊的特性：name - 任何没有被包裹在带有 v-slot 的 template>中的内容都会被视为默认插槽的内容。任何没有被包裹在带有 v-slot 的 template>中的内容都会被视为默认插槽的内容。
- 插槽prop
{{ user.lastName }} - v-slot也有缩写，字符 “#”