Vue.js 相关技术词
不才
2019-06-23 04:13:55
<p>Vue.js <span style="color: rgb(48, 68, 85);">是一套用于构建用户界面的</span><span style="color: rgb(39, 56, 73);">渐进式框架</span><span style="color: rgb(48, 68, 85);">。MVVM框架</span></p><p><span style="color: rgb(48, 68, 85);"><span style="color: rgb(44, 62, 80);">Vue Router 是 Vue.js</span><span style="color: rgb(44, 62, 80);"> 官方的路由管理器。</span></span></p><p><span style="color: rgb(48, 68, 85);"><span style="color: rgb(44, 62, 80);"><span style="color: rgb(44, 62, 80);">Vuex 是一个专为 Vue.js 应用程序开发的</span><span style="color: rgb(44, 62, 80);">状态管理模式</span><span style="color: rgb(44, 62, 80);">。</span>
</span></span></p><p><span style="color: rgb(48, 68, 85);"><span style="color: rgb(44, 62, 80);"><span style="color: rgb(44, 62, 80);">SSR 服务器端渲染</span></span></span></p><p><span style="color: rgb(48, 68, 85);"><span style="color: rgb(44, 62, 80);"><span style="color: rgb(44, 62, 80);"><span style="color: rgb(44, 62, 80);">Vue CLI 致力于将 Vue 生态中的工具基础标准化。Vue.js构建工具</span>
</span></span></span></p><p><span style="color: rgb(48, 68, 85);"><span style="color: rgb(44, 62, 80);"><span style="color: rgb(44, 62, 80);"><span style="color: rgb(44, 62, 80);"><span style="">Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。</span>
</span></span></span></span></p><p><span style="color: rgb(48, 68, 85);"><span style="color: rgb(44, 62, 80);"><span style="color: rgb(44, 62, 80);"><span style="color: rgb(44, 62, 80);"><span style=""><span style="">Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库</span>
</span></span></span></span></span></p><p><span style="color: rgb(48, 68, 85);"><span style="color: rgb(44, 62, 80);"><span style="color: rgb(44, 62, 80);"><span style="color: rgb(44, 62, 80);"><span style=""><span style="">MVVM <span style="color: rgb(51, 51, 51);">Model-View-ViewModel <span style="color: rgb(51, 51, 51);">Model：模型 <span style="color: rgb(51, 51, 51);">View 视图 <span style="color: rgb(51, 51, 51);">ViewModel</span>视图模型</span></span></span></span></span></span></span></span></span></p><p><span style="color: rgb(48, 68, 85);"><span style="color: rgb(44, 62, 80);"><span style="color: rgb(44, 62, 80);"><span style="color: rgb(44, 62, 80);"><span style=""><span style=""><span style="color: rgb(51, 51, 51);"><span style="color: rgb(51, 51, 51);"><span style="color: rgb(51, 51, 51);">Vue:</span></span></span></span></span></span></span></span></span></p><p style="margin-left: 40px;"><span style="color: rgb(82, 82, 82);">computed: 计算属性 复杂数据操作可以使用 </span><font color="#273849">(<span style="color: rgb(39, 56, 73);">计算属性是基于它们的响应式依赖进行缓存的</span>)（只要依赖的数据发生改变 就会更新缓存）</font>
</p><p style="margin-left: 40px;"><span style="color: rgb(48, 68, 85);"><span style="color: rgb(44, 62, 80);"><span style="color: rgb(44, 62, 80);"><span style="color: rgb(44, 62, 80);"><span style=""><span style=""><span style="color: rgb(51, 51, 51);"><span style="color: rgb(51, 51, 51);"><span style="color: rgb(51, 51, 51);"><span style="color: rgb(82, 82, 82);"><span style="color: rgb(82, 82, 82);">methods：方法 (只有调用的时候才会进行数据处理)</span>
</span></span></span></span></span></span></span></span></span></span></p><p style="margin-left: 40px;"><span style="color: rgb(39, 56, 73);"><span style="color: rgb(82, 82, 82);">watch： </span>侦听属性 <span style="color: rgb(48, 68, 85);">当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。 （<span style="color: rgb(39, 56, 73);">只要依赖的数据发生改变就好触发 但是没有缓存</span>）</span></span></p><p style="margin-left: 40px;"><span style="color: rgb(39, 56, 73);"><span style="color: rgb(48, 68, 85);">prop: <span style="color: rgb(73, 73, 73);">是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态。</span></span></span></p><p style="margin-left: 40px;"><span style="color: rgb(39, 56, 73);"><span style="color: rgb(48, 68, 85);"><span style="color: rgb(73, 73, 73);"><span style="color: rgb(82, 82, 82);">$emit:<span style="color: rgb(48, 68, 85);">触发一个事件</span></span>
</span></span></span></p><p style="margin-left: 40px;"><span style="color: rgb(39, 56, 73);"><span style="color: rgb(48, 68, 85);"><span style="color: rgb(73, 73, 73);"><span style="color: rgb(82, 82, 82);"><span style="color: rgb(48, 68, 85);"><span style="">slot: 插槽 具名插槽和<span style="">作用域插槽</span></span>
</span></span></span></span></span></p><p style="margin-left: 40px;"><span style="color: rgb(39, 56, 73);"><span style="color: rgb(48, 68, 85);"><span style="color: rgb(73, 73, 73);"><span style="color: rgb(82, 82, 82);"><span style="color: rgb(48, 68, 85);"><span style=""><span style=""><span style="">keep-alive：缓存</span>
</span></span></span></span></span></span></span></p><p style="margin-left: 40px;"><span style="color: rgb(39, 56, 73);"><span style="color: rgb(48, 68, 85);"><span style="color: rgb(73, 73, 73);"><span style="color: rgb(82, 82, 82);"><span style="color: rgb(48, 68, 85);"><span style=""><span style=""><span style=""><span style="">transition: 过渡 <span style="">进入/离开 & 列表过渡</span></span>
</span></span></span></span></span></span></span></span></p><p style="margin-left: 40px;"><span style="color: rgb(39, 56, 73);"><span style="color: rgb(48, 68, 85);"><span style="color: rgb(73, 73, 73);"><span style="color: rgb(82, 82, 82);"><span style="color: rgb(48, 68, 85);"><span style=""><span style=""><span style=""><span style=""><span style=""><span style="">component：组件</span>
</span></span></span></span></span></span></span></span></span></span></p><p style="margin-left: 40px;"><span style="color: rgb(39, 56, 73);"><span style="color: rgb(48, 68, 85);"><span style="color: rgb(73, 73, 73);"><span style="color: rgb(82, 82, 82);"><span style="color: rgb(48, 68, 85);"><span style=""><span style=""><span style=""><span style=""><span style=""><span style=""><span style="color: rgb(82, 82, 82);">data: 属性</span>
</span></span></span></span></span></span></span></span></span></span></span></p>
</span></span></p><p><span style="color: rgb(48, 68, 85);"><span style="color: rgb(44, 62, 80);"><span style="color: rgb(44, 62, 80);">SSR 服务器端渲染</span></span></span></p><p><span style="color: rgb(48, 68, 85);"><span style="color: rgb(44, 62, 80);"><span style="color: rgb(44, 62, 80);"><span style="color: rgb(44, 62, 80);">Vue CLI 致力于将 Vue 生态中的工具基础标准化。Vue.js构建工具</span>
</span></span></span></p><p><span style="color: rgb(48, 68, 85);"><span style="color: rgb(44, 62, 80);"><span style="color: rgb(44, 62, 80);"><span style="color: rgb(44, 62, 80);"><span style="">Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。</span>
</span></span></span></span></p><p><span style="color: rgb(48, 68, 85);"><span style="color: rgb(44, 62, 80);"><span style="color: rgb(44, 62, 80);"><span style="color: rgb(44, 62, 80);"><span style=""><span style="">Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库</span>
</span></span></span></span></span></p><p><span style="color: rgb(48, 68, 85);"><span style="color: rgb(44, 62, 80);"><span style="color: rgb(44, 62, 80);"><span style="color: rgb(44, 62, 80);"><span style=""><span style="">MVVM <span style="color: rgb(51, 51, 51);">Model-View-ViewModel <span style="color: rgb(51, 51, 51);">Model：模型 <span style="color: rgb(51, 51, 51);">View 视图 <span style="color: rgb(51, 51, 51);">ViewModel</span>视图模型</span></span></span></span></span></span></span></span></span></p><p><span style="color: rgb(48, 68, 85);"><span style="color: rgb(44, 62, 80);"><span style="color: rgb(44, 62, 80);"><span style="color: rgb(44, 62, 80);"><span style=""><span style=""><span style="color: rgb(51, 51, 51);"><span style="color: rgb(51, 51, 51);"><span style="color: rgb(51, 51, 51);">Vue:</span></span></span></span></span></span></span></span></span></p><p style="margin-left: 40px;"><span style="color: rgb(82, 82, 82);">computed: 计算属性 复杂数据操作可以使用 </span><font color="#273849">(<span style="color: rgb(39, 56, 73);">计算属性是基于它们的响应式依赖进行缓存的</span>)（只要依赖的数据发生改变 就会更新缓存）</font>
</p><p style="margin-left: 40px;"><span style="color: rgb(48, 68, 85);"><span style="color: rgb(44, 62, 80);"><span style="color: rgb(44, 62, 80);"><span style="color: rgb(44, 62, 80);"><span style=""><span style=""><span style="color: rgb(51, 51, 51);"><span style="color: rgb(51, 51, 51);"><span style="color: rgb(51, 51, 51);"><span style="color: rgb(82, 82, 82);"><span style="color: rgb(82, 82, 82);">methods：方法 (只有调用的时候才会进行数据处理)</span>
</span></span></span></span></span></span></span></span></span></span></p><p style="margin-left: 40px;"><span style="color: rgb(39, 56, 73);"><span style="color: rgb(82, 82, 82);">watch： </span>侦听属性 <span style="color: rgb(48, 68, 85);">当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。 （<span style="color: rgb(39, 56, 73);">只要依赖的数据发生改变就好触发 但是没有缓存</span>）</span></span></p><p style="margin-left: 40px;"><span style="color: rgb(39, 56, 73);"><span style="color: rgb(48, 68, 85);">prop: <span style="color: rgb(73, 73, 73);">是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态。</span></span></span></p><p style="margin-left: 40px;"><span style="color: rgb(39, 56, 73);"><span style="color: rgb(48, 68, 85);"><span style="color: rgb(73, 73, 73);"><span style="color: rgb(82, 82, 82);">$emit:<span style="color: rgb(48, 68, 85);">触发一个事件</span></span>
</span></span></span></p><p style="margin-left: 40px;"><span style="color: rgb(39, 56, 73);"><span style="color: rgb(48, 68, 85);"><span style="color: rgb(73, 73, 73);"><span style="color: rgb(82, 82, 82);"><span style="color: rgb(48, 68, 85);"><span style="">slot: 插槽 具名插槽和<span style="">作用域插槽</span></span>
</span></span></span></span></span></p><p style="margin-left: 40px;"><span style="color: rgb(39, 56, 73);"><span style="color: rgb(48, 68, 85);"><span style="color: rgb(73, 73, 73);"><span style="color: rgb(82, 82, 82);"><span style="color: rgb(48, 68, 85);"><span style=""><span style=""><span style="">keep-alive：缓存</span>
</span></span></span></span></span></span></span></p><p style="margin-left: 40px;"><span style="color: rgb(39, 56, 73);"><span style="color: rgb(48, 68, 85);"><span style="color: rgb(73, 73, 73);"><span style="color: rgb(82, 82, 82);"><span style="color: rgb(48, 68, 85);"><span style=""><span style=""><span style=""><span style="">transition: 过渡 <span style="">进入/离开 & 列表过渡</span></span>
</span></span></span></span></span></span></span></span></p><p style="margin-left: 40px;"><span style="color: rgb(39, 56, 73);"><span style="color: rgb(48, 68, 85);"><span style="color: rgb(73, 73, 73);"><span style="color: rgb(82, 82, 82);"><span style="color: rgb(48, 68, 85);"><span style=""><span style=""><span style=""><span style=""><span style=""><span style="">component：组件</span>
</span></span></span></span></span></span></span></span></span></span></p><p style="margin-left: 40px;"><span style="color: rgb(39, 56, 73);"><span style="color: rgb(48, 68, 85);"><span style="color: rgb(73, 73, 73);"><span style="color: rgb(82, 82, 82);"><span style="color: rgb(48, 68, 85);"><span style=""><span style=""><span style=""><span style=""><span style=""><span style=""><span style="color: rgb(82, 82, 82);">data: 属性</span>
</span></span></span></span></span></span></span></span></span></span></span></p>