vue学习笔记3——外部引入css和路由的一部分
2017-09-04 16:53
666 查看
vue学习笔记3——外部引入css和路由的一部分
从外部引入css文件
在.vue文件中
后面加的scoped是H5新特性,可以锁定style的范围,此处这样写就是说引入的css只在当前的vue的主页生效。不加scoped的话,可能会影响其他vue文件中的样式。
此处可以补充学习scss(sass)
移动端应用在最外层index添加:
在入口文件main.js中import router from ,登录站点的时候,初次路由指向的初始文件夹的位置,会自动寻找里面对应的js文件
注意脚手架的格式要求十分严格
1.首先需要了解这是 es 6 的语法,表示 Vue 实例选项对象的 render 方法作为一个函数,接受传入的参数 h 函数,返回 h(App) 的函数调用结果。
2.其次,Vue 在创建 Vue 实例时,通过调用 render 方法来渲染实例的 DOM 树。
3.最后,Vue 在调用 render 方法时,会传入一个 createElement 函数作为参数,也就是这里的 h 的实参是 createElement 函数,然后 createElement 会以 APP 为参数进行调用,关于 createElement 函数的参数说明参见:Element-Arguments。
本人在网上只查了这么多。
我在查看网上的单页应用的demo的时候发现 他们的路由配置有两种:
1.router中,只有一个router.js文件,里面引入一个app后
直接const声明变量,再响应其他文件夹中文件
在部分vue文件中,自己新建路由
2.router中细分若干功能文件件,子页划分,我感觉这样对components的层级
和管理要求较高,对于第一种,比较好理解
vue学习笔记,是根据网上的一些帖子,自己在学习过程中实际情况,总结而来。每个人在学习过程中和实际操作中是有明显的个体差异的。本文仅作参考使用。
从外部引入css文件
在.vue文件中
<style scoped> @import '../../style/basic.css'; @import '../../style/del.css'; @import '../../style/media.css'; </style>
后面加的scoped是H5新特性,可以锁定style的范围,此处这样写就是说引入的css只在当前的vue的主页生效。不加scoped的话,可能会影响其他vue文件中的样式。
此处可以补充学习scss(sass)
移动端应用在最外层index添加:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui"> <meta name="screen-orientation" content="portrait"/> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="format-detection" content="telephone=no"> <meta name="full-screen" content="yes"> <meta name="x5-fullscreen" content="true">
在入口文件main.js中import router from ,登录站点的时候,初次路由指向的初始文件夹的位置,会自动寻找里面对应的js文件
注意脚手架的格式要求十分严格
new Vue({ router, store, //components: { App } vue1.0的写法 render: h => h(App) vue2.0的写法 }).$mount('#app') // 挂上去(我在此处省略了)
1.首先需要了解这是 es 6 的语法,表示 Vue 实例选项对象的 render 方法作为一个函数,接受传入的参数 h 函数,返回 h(App) 的函数调用结果。
2.其次,Vue 在创建 Vue 实例时,通过调用 render 方法来渲染实例的 DOM 树。
3.最后,Vue 在调用 render 方法时,会传入一个 createElement 函数作为参数,也就是这里的 h 的实参是 createElement 函数,然后 createElement 会以 APP 为参数进行调用,关于 createElement 函数的参数说明参见:Element-Arguments。
本人在网上只查了这么多。
我在查看网上的单页应用的demo的时候发现 他们的路由配置有两种:
1.router中,只有一个router.js文件,里面引入一个app后
直接const声明变量,再响应其他文件夹中文件
在部分vue文件中,自己新建路由
2.router中细分若干功能文件件,子页划分,我感觉这样对components的层级
和管理要求较高,对于第一种,比较好理解
vue学习笔记,是根据网上的一些帖子,自己在学习过程中实际情况,总结而来。每个人在学习过程中和实际操作中是有明显的个体差异的。本文仅作参考使用。
相关文章推荐
- <学习CSS>第三天笔记-css外观属性(颜色、行间距、对齐、首行缩进、字间距、单词间距 、颜色半透明、阴影)快捷方式、综合案例、引入CSS样式表(内部样式表、行内式、外部样式表)、三种样式表总结
- vue学习笔记5——路由相关配置,引入其他插件等
- CSS从基础到熟练学习笔记(一)引入CSS样式的三种方式以及多种样式的优先级
- vue学习笔记4——route,路由跳转等
- CSS学习笔记—CSS的引入方式
- Vue-cli项目中引入外部/第三方css/js/less文件具体步骤
- [置顶] Css 学习笔记--样式引入方式及按权重判断优先级
- HTML学习笔记(3)——CSS的引入,选择器和文本样式
- Vue 学习笔记 — css属性计算的问题
- Vue-cli开发笔记三----------引入外部插件
- Vue项目中引入外部文件的方法(css、js、less)
- vue项目中引入外部css以及js文件的方法
- vue2.0 路由 学习笔记
- 学习vue-cli时需要引入外部js库文件(如jquery)的问题,百度后解决了,再次备忘一下
- vue 引入外部css方法
- 【极客学院】-python学习笔记-Python快速入门(面向对象-引入外部文件-Web2Py创建网站)
- VUE 学习笔记之,如何对公共JS,CSS进行统一管理,全局调用
- [置顶] h5学习笔记:vue 路由部署服务器子目录问题
- Vue学习笔记之 路由路径
- (ASP.NET MVC4 入门学习笔记)学习自己建项目2----引入css和JS的配置、DBHelper及其他