![](https://img-blog.csdnimg.cn/2020060622285465.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue简介
vue
「已注销」
这个作者很懒,什么都没留下…
展开
-
1.开始吧,vue。
最简单的开始:<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>这是最简单的使用方法,直接在html文件内,使用<script>标签,就可以开始vue了。当然,以上是使用最新版本的vue,如果想要确定版本的话,可以用以下的代码:<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script原创 2020-06-24 16:18:09 · 134 阅读 · 0 评论 -
2.简单地使用vue组件
开始:之前的vue指令,操作的都是单个的html标签,与此对应的,还有将多个标签组到一起的组件,即一个自定义的组件标签内部,是多个原始的html标签。组件创建:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>demo-component</title> <script src="https://cdn.jsdeli.原创 2020-06-25 18:30:10 · 202 阅读 · 0 评论 -
3.vue文档API(1):基础的配置
1.简介:对vue可调用的接口API集合:https://cn.vuejs.org/v2/api/2.全局配置:即可直接对Vue的属性进行配置操作。silent:取消 Vue 所有的日志与警告。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>silent</title> <script src="https:原创 2020-06-30 20:13:40 · 583 阅读 · 0 评论 -
4.vue文档API(2),简单的生命周期描述
全局 API:在vue中可以直接调用的接口。Vue.extend( options ):最基础的 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。属于生命周期中的beforeCreate,但是未正式创建、挂载。...原创 2020-07-07 21:41:15 · 145 阅读 · 0 评论 -
5.vue文档API(3),created的初始化阶段与mounted挂载阶段以及渲染相关
简介:原创 2020-07-08 23:15:22 · 977 阅读 · 0 评论 -
6.vue文档API(4),updated的更新阶段以及数据与函数
数据:在vue实例中的一个对象,用于存储数据。可在渲染的html中进行调用。代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vueTest</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>&l原创 2020-07-09 23:48:31 · 738 阅读 · 0 评论 -
7.vue文档API(5),destroyed的销毁阶段与key属性
简介:vue的销毁,销毁的不是相关元素,甚至vue实例也没有被销毁,而是数据与dom关系。销毁调用的方法:触发销毁的函数,调vue实例对象的$destroy函数即可。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vueTest</title> <script src="https://cdn.jsdelivr.ne原创 2020-07-10 12:46:18 · 1411 阅读 · 0 评论 -
8.vue文档API(5),组件
组件:之前vue实例,必须挂载到一个指定的DOM节点上,这样的话,太过死板,不灵活。所以,就有了组件,可以任意的挂载到一个vue实例下。组件本身,就可以看作是一个vue实例,和vue实例一样,具有生命周期。注册与渲染:只用组件之前,需要先注册注册的方式分为两种,一种是全局Vue注册, 这样的话,可以在任意的vue实例下调用该组件;另一种就是局部注册,具体的实现这里有:https://blog.csdn.net/weixin_47870554/article/details/106946942原创 2020-07-10 22:30:51 · 126 阅读 · 0 评论 -
9.vue实例信息、属性继承、自定义以及内部事件
实例信息$data:对实例地data对象属性地访问; $props:对组件实例地props对象属性地访问; $el:访问实例使用的根 DOM 元素; $options:访问实例所有属性; $isServer:当前 Vue 实例是否运行于服务器。; $attrs:包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class和style除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class和style除外),并且可以...原创 2020-07-11 00:44:58 · 380 阅读 · 0 评论 -
10.webpack中使用vue
初始化npm。npm init -ynpm安装vue。npm install vue --save-devnpm安装vue相关编译器npm i vue-loader vue-template-compiler --save-devnpm安装babelnpm install @babel/cli @babel/core @babel/preset-env @babel/preset-react babel-loader --save-devnpm安装we原创 2020-07-11 17:38:22 · 103 阅读 · 0 评论 -
11.初步使用vue-router
vue-router:Vue Router 是Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式,在 IE9 中自动降级 自定义的滚动条行为https://router.vuejs.org/zh/guide..原创 2020-07-12 12:18:44 · 218 阅读 · 0 评论 -
12.vue-router相关API(1)router-link和router-view
官网链接:https://router.vuejs.org/zh/api<router-link>:<router-link>组件支持用户在具有路由功能的应用中 (点击) 导航。 通过to属性指定目标地址,默认渲染成带有正确链接的<a>标签,可以通过配置tag属性生成别的标签.。另外,当目标路由成功激活时,链接元素自动设置一个表示激活的 CSS 类名。to:表示目标路由的链接。<!DOCTYPE html><html...原创 2020-07-12 17:47:30 · 385 阅读 · 0 评论 -
13.vue-router相关API(2)Router
Router 构建选项:routes:用于将路径和页面组件绑定。interface RouteConfig = { path: string, // 路径 component?: Component, // 单个视图组件 name?: string, // 命名路由 components?: { [name: strin原创 2020-07-13 20:21:10 · 239 阅读 · 0 评论 -
14.初步使用Vuex
Vuex:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 可以帮助我们管理共享状态,并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。开始:在之前的基础上,添加vuex依赖。npm install vuex --save-dev相关文件:webpack.config.js:https://blog.csdn.net/weixin_4787055.原创 2020-07-14 15:54:37 · 187 阅读 · 0 评论