前端开发vue
框架： 一套现成的解决方案，程序员只能遵守框架的规则，去构造自己的业务，学习vue就是在学习vue中规定的用法，组件是对UI的复用
构造用户界面：用vue向页面中填充数据，非常方便。
vuex： Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
状态自管理应用包含以下几个部分：
- 状态，驱动应用的数据源；
- 视图，以声明方式将状态映射到视图；
- 操作，响应在视图上的用户输入导致的状态变化。
为什么使用vuex？
当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：
- 多个视图依赖于同一状态。
- 来自不同视图的行为需要变更同一状态。
:
webpack 是前端工程化的具体解决方案
-S 开发和上线运行的时候都要用的包 就用-S
只是开发的话，用-D
为了修改源代码后直接看到效果 :
base64图片 优点:可以防止发起过多的网络请求
缺点: 体积会变大
上线运行打包项目的时候，在package.json文件的scripts节点下，新增build项目，使用命令 npm run build
--mode production 可以在打包时压缩项目。
或者直接关闭 Source Map
单向数据绑定：数据驱动视图
双向数据绑定
v-bind使用中， 它的内容是js语法，所以如果要给定一个字符串9，必须是这样 :age=" '9' " ，这才是一个字符串的9
当一个事件对象需要 使用参数时，可以用原生的$event这个参数，来代表这个元素本身。如e.target即指向这个button元素
v-model只能用于表单元素，是双向绑定。
过滤器： vue3中已被淘汰，只能用在vue2，它是一个函数
全局过滤器： day.js需要从第三方库引入。
侦听器：
###方法格式：
计算属性： 最终还是一个属性 定义的时候是方法，用的时候是属性
定义的时候是方法，用的时候是属性
经过我实际使用：
get不能使用data，data中的数据不会发送也接收不到，它只能用params传值。 post可以使用data，也可以使用params。
payload是一种以json格式传送数据的方式。
vue-cli
单页面应用程序：复杂程度高
main.js:
test.vue：
在组件中，this就表示当前组件的实例对象。
组件的使用： 注意最后以标签的形式使用
父子传值：
当props是一个数组，不能赋初始值， 但它里面所有的内容都是这个vue component这个组件的属性， 所以都可以直接用this.方法调用，不用在意属性的位置
props中的 required:true //可以使用required选项来声明这个参数是否必须传入。
Vue的组件实例：当你使用代表该组件的标签的时候，就创建了组件实例
导入import，全局组件注册Vue.component（)
使用：
vue的生命周期函数:
生命周期是指一个组件从创建, 运行,销毁的整个阶段, 强调的是一个时间段 生命周期函数是由vue框架提供的内置函数,会伴随组件的生命周期,自动按次序执行 vue的生命周期具体分为三个阶段： 组件创建阶段： beforeCreate、created、beforMount、mounted； 组件运行阶段：beforeUpdate、updated； 组件销毁阶段：beforeUnmount、unmounted 每个组件在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在每个阶段都有运行叫做生命周期钩子的函数，来让用户在不同的阶段添加自己的代码。
created生命周期函数： 很常用，用于发ajax请求。可以调用methods中的方法，或操作data中的数据
通过ajax去发送请求，经常用它去调用methods中的方法来请求服务器的数据，并把请求到的数据，转存到data中， 供 template 模板渲染页面的时候使用
在内存中，创建模板结构。
beforeMount：将要把内存中编译好的HTML页面结构渲染到浏览器，此时浏览器还没有当前组件的DOM结构。
Mounted：初次把内存中的HTML结构渲染到浏览器中。最早操作dom元素 。
beforeUpdate： 根据变化过后、最新的数据，将要重新渲染HTML结构。
updated：已经根据最新的数据，完成了组件dom结构的重新渲染。
数据分享：
在使用这种方式传值的时候，不要在子组件中去修改传递过来的值。
this.$refs.xxx 可以获取DOM元素，也可以获取子组件中的数据和方法。
使用方法：在标签中添加 ref属性
动态组件
components 是内置标签， 是动态使用组件的占位符。注意：现在使用的是components 标签
exclude属性： 只有名称匹配的组件不会被缓存。 和include相反。
这两个属性不要同时使用。
组件标签的名称：当没有提供name属性，那就会使用注册时的名称。这里推荐给每个组件都使用name名称，容易区分组件。
注册名称：
声明名称：
具体的使用方式：1和2如下：
插槽
v-slot：的简写形式是 #， v-slot：default等价于 #default
作用域插槽：在定义slot时，有name属性，也有别的自定义属性；在调用时，当做一个对象去调用。
只有name属性的，叫具名插槽。
使用：在对应的slot名后面 =“scope” （建议使用scope，作用域的意思）
结果：
还可以进行解构赋值。
标签：vue,前端,视图,使用,组件,工程化,数据,属性 来源： https://www.cnblogs.com/hb-iu/p/15880365.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。