网站建设叁金手指花总6,绿色环保材料网站模板,泉州模板建站公司,婚纱摄影网文章目录vue一、js基础二、封装缓存三、组件1、组件创建、引入、挂载、使用2、组件间的传值- 父组件主动获取子组件的数据和方法#xff08;子组件给父组件传值#xff09;#xff1a;- 子组件主动获取父组件的数据和方法#xff08;父组件给子组件传值#xff09;#x… 文章目录vue一、js基础二、封装缓存三、组件1、组件创建、引入、挂载、使用2、组件间的传值- 父组件主动获取子组件的数据和方法子组件给父组件传值- 子组件主动获取父组件的数据和方法父组件给子组件传值-非父子组件间的传值广播方式Vuex方式 -- 解决不同页面组件间数据共享四、生命周期(钩子)函数五、请求数据的三种方式1、vue-resource2、Axios3、fetch-jsonp4、tips六、路由自动挂载组件以及加载数据1、配置路由2、实际使用1、配置2、 ‘/’ 路由出口放在根组件3、router-link 路由出口类似a标签4、Js编程式路由编程式导航由js代码主动发起路由5、vue路由的hash模式默认有#和history模式无#6、路由的嵌套3、路由传参4、路由模块化vue 每一个组件都是一个页面(html/templatejscss/scss)实现组件的完整性——组件化 main.js入口文件在这里可以引入用到的node_modules包(模块)以及插件即用即导入——模块化 App.vue 根组件(根页面) meta viewport 移动端窗口视口可以使用百度界面的meta标签的 viewport属性 若在全局样式有 html{font-size:62.5%} —— 将字体变为0.625倍为了适合移动端则此时的 1rem 就 相当于电脑的 1px 创建项目 第一次安装脚手架 cnpm install -g vue-cli 安装vue cli2脚手架 vue init webpack demo1 vue init webpack-simple demo1 npm run dev npm run build OR cnpm install -g vue/cli 安装vue cli3脚手架 vue create demo1 运行npm run serve 运行速度比2快了许多 编译npm run build vue cli3 提供了GUI界面来创建管理项目 vue ui 然后进入locallhost:8080 一、js基础 二、封装缓存 1、直接使用 2、封装后使用 三、组件 组件挂载。页面由组件组成。路由动态挂载组件。创建组件开头大写组件templatejsscss所有内容要被根节点包含起来组件必须包含根元素一般是div。自定义标签名不能重复。 1、组件创建、引入、挂载、使用 2、组件间的传值 组件间的传值可以是变量地址也可以是对象函数–地址还可以是整个组件类–地址 - 父组件主动获取子组件的数据和方法子组件给父组件传值 父组件主动获取子组件的数据和方法 - 子组件主动获取父组件的数据和方法父组件给子组件传值 子组件主动获取父组件的数据和方法: 父组件给子组件传值 例子 无论是传变量、函数还是组件父组件传值方式都是动态属性绑定子组件接收方式有两种一种props数组形式接收——props:[]一种props对象形式接收对象形式接收可以验证父组件传值的合法性 父组件传变量 子组件props数组接收变量 子组件props对象接收变量并验证验证不通过则会出现警告 -非父子组件间的传值 广播方式 例子 Vuex方式 – 解决不同页面组件间数据共享 Vuex是vue官方提供的状态管理插件解决不同页面组件间同一状态的数据共享问题和组件的数据持久化。 也可以通过localstorage缓存实现也可以使用SessionStorage实现 注:小项目中能不用Vuex就不用。 1、数据共享 2、数据持久化 直观体现在控制台的network中多次请求数据时如果用缓存则会多次请求若用Vuex则可以达到一次请求多次使用并且动态改变、共享。 四、生命周期(钩子)函数 五、请求数据的三种方式 1、vue-resource 2、Axios 3、fetch-jsonp 4、tips Axios不支持jsonp请求。而fetch-jsonp可以支持可以在vue、react中使用fetch-jsonp用法和Axios很像。vue-resource是vue的官方插件在man.js引入并使用后全局组件都可以直接使用这是一个被推荐的重要原因而Axios则是在哪里需要在哪引入Axios可以在vue、react中使用。要用箭头函数替代function避免指向被改变。安装依赖包时一定要加 --save这样会在package.json中声明版本下次install才能被找到。vue-resource、Axios、fetch-jsonp都可以在git上找到源码和安装使用方法 六、路由自动挂载组件以及加载数据 1、配置路由 补充第五步设置路由出口即在哪个作用域下渲染这些路由下的组件 2、实际使用 1、配置 2、 ‘/’ 路由出口放在根组件 3、router-link 路由出口类似a标签 4、Js编程式路由编程式导航由js代码主动发起路由 其实 点击 router-link组件内部调用的也是 router.push()方法 5、vue路由的hash模式默认有#和history模式无# 6、路由的嵌套 3、路由传参 get传参 post传参 4、路由模块化 路由模块化 —— 单独开一个js文件放路由配置然后export暴露在main.js中引入并挂载