后端MVC与前端MVVM
M从服务器里拿到数据
VM分割了M和V,把M渲染到V中
V就是页面
MVVM 让开发更方便,VM提供了数据的双向绑定
基本语法
v-cloak:display:none,设置样式,解决元素在未加载js时闪烁的问题
v-text和插值表达式,都会把msg:
11
解析成普通文本,这个时候要用到v-html
v-text 和v -html都会覆盖原来的内容,而插值表达式不会
v-bind :告诉我们提供绑定属性的一个指令,告诉我们这是一个属性,要去绑定数据,替换title
会把后面的属性当作一个变量,可以写成字符串
可以被简写为:
v-on 用来绑定事件,调用的方法从method里找
v-on:“click”="" 可以缩写为 @click = “”
v-on 事件修饰符 @click.stop
capture:从外往里触发事件
self和stop:self只阻止自己身上的冒泡行为
数据双向绑定v-model
而v-bind只能单向绑定
input里修改后,h4里也会变
v-model只能用于表单元素中
class的使用
也可以间接使用对象
对象就是无序键值对的集合,如果属性带-一定要在外面加‘’
使用内联样式
v-for 遍历数组
遍历对象
v-for迭代数字,从1开始
会输出
现在key属性是必须的,跟踪每一个节点的身份,只能使用数字或者字符串
v-if 和 v-show
v-if有较高的切换性能消耗(每次重新创建)
v-show有较高的初始性能消耗
过滤器:对model中的数据格式化
可以使用多个过滤器
私有过滤器
自动在前面补位 padStart
按键修饰符,数字代码也可以 keyup.13
定义全局按键修饰符
自定义指令
全局指令:js动作放在inserted中,css样式 html 放在bind中
指令传参数
定义私有指令
自定义指令简写,等于写到bind和update里去
生命周期
生命周期函数:
- beforeupdate 数据中是新数据,但是页面上仍是老数据
修改name使得有多个transition动画
组件化:从ui界面进行划分,方便ui组件的重用
模块化:从代码逻辑进行划分,方便代码分隔开发
子组件和父组件
子组件默认无法访问父组件data上的值和method的方法,但是可以用属性绑定v-bind传递,要在props数组中定义
props中所有的数据都是通过父组件传过来的,子组件data中的数据是自身私有的
data中的数据可读可写,props中只读
ref组件引用
前端路由和后端路由
redirect
router来显示布局
↑left main都是字符串,只有当:name的时候才需要考虑是字符串还是变量,否则都是字符串
compute method 和 watch
webpack config 配置
https://www.cnblogs.com/singledogpro/p/12030550.html
webpack-dev-server
Babel
第一个包负责转化,不知道高级语法和低级语法间的对应关系
第二个包负责翻译字典?高级到低级
webpack解析vue
export 用花括号接受
export default 可以直接用变量来接受
scoped 样式只在组件范围内有效