- MVVM:Model-view-ViewModel的缩写
- 常用指令有:v-bind;v-if;v-elseif;v-else;v-for;v-on
- v-on:事件=“函数”
- 计算属性和监听属性
var app = new Vue({
el:"#app",
data:{
message:"hello"
},
computed:{
reverseaMessage:function(){
console.log("11");
}
},
methods:{
reverseaMessageMethod:function(){
console.log("22");
}
},
watch:{
message:function(newVal,oldVal){
this.message=newVal;
}
}
});
- computed和watch区别
如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对一或者一对一,一般用computed。
如果一个数据需要被监听并且对数据做一些操作就用 watch。 - 八个生命周期钩子函数
![八个生命周期钩子函数](https://img-blog.csdnimg.cn/6902ab02319c45b88283dc0d505931c5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Luj56CB5YaZ5Yiw5omL5oq9562L,size_20,color_FFFFFF,t_70,g_se,x_16)
- vue-cli是vue.js的脚手架(自动将项目需要的环境、依赖等信息都配置好),用于生成vue.js模板工程的
- vue项目结构
![Vue项目结构](https://img-blog.csdnimg.cn/cf85740973f6434fb3b52dd39488f98b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Luj56CB5YaZ5Yiw5omL5oq9562L,size_20,color_FFFFFF,t_70,g_se,x_16)
- 加载过程
项目启动时通过执行npm run dev 来启动webpack-dev-server服务器 - vue文件基础结构
<template>
<div>编写模板</div>
</template>
<script>
export default{
name:'cart',
data:{},
methods:{}
}
</script>
- webpack是一个前端资源加载/打包工具。
webpack打包出的bundle不会包含重复或未使用的模块,实现了按需打包,减少了冗余。 - npm由三个独立的部分组成:网站,注册表,命令行工具。
网站是开发者查找包、设置参数以及管理npm使用体验的主要途径。
注册表是一个巨大的数据库,保存了每个包的信息。
cli通过命令行或终端运行,开发者通过cli与npm打交道。
npm有两个含义,一是npm官方网站,二是npm包管理工具。
webpack就是将从npm包中安装的包打包成更小的浏览器可读的静态资源。 - node.js就是运行在服务器端的JavaScript。
- webpack、 npm、node之间的关系
![webpack、 npm、node之间的关系](https://img-blog.csdnimg.cn/f1852b7e742b48058db27af64824b5eb.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Luj56CB5YaZ5Yiw5omL5oq9562L,size_20,color_FFFFFF,t_70,g_se,x_16)
- vuex是一个专为Vue.js应用程序开发的状态管理模式,可以把一些共享的数据保存至vuex中,方便各个组件修改或获取公共状态。