一、本尊建议的学习顺序:https://zhuanlan.zhihu.com/p/23134551(侵删)
二、安装:
1、安装 Node.js,可以去Node.js的官网上下载;
2、(非必选)如果想日后方便使用,安装依赖包快一点,切一下淘宝 npm 的镜像,不会的百度:切换淘宝npm镜像 ,就会出来一大堆,自己看!
3、安装webpack,运行:npm install webpack -g,这里有全局安装和局部安装(区别在后面的 -g 参数),建议选全局的;
4、然后通过 vue-cli 的脚手架一步一步的搭建一个vue的项目,直到能跑起来为止。
详情:https://blog.csdn.net/six_six_six_666/article/details/82633731 (侵删)
5、文件夹目录:
三、部分知识整理:
1、vue单文件:
以*.vue结尾的文件,最终通过webpack也会编译成*.js在浏览器运行(webpack找人来理解你的单文件代码)
<style> /* pageFullScreen在index.css */ #xxxFullScreen { background-color: #eee; } </style> <template> <div class="pageFullScreen" id="xxxFullScreen"> </div> </template> <script> export default { data() { return { } }, activated() { } } </script>
①、template中只能有一个根节点(div);
②、script中按照export default{配置}来写;
③、style中可以设置scoped属性,让其只在template中生效。
2、src :存放人可以看懂的源代码,具备一定的功能划分;
dist:存放真实上线的代码(减少请求,混淆代码),机器能看懂的;
webpack.config.js 打包生成dist下的代码
3、vue与angular比较:
前者 是组块化(细分代码)、双向数据流(基于ES5中的defineProperty来实现的,IE9才支持;js内存属性发生改变,影响页面变化,反之也改变。)
后者是模块化、双向数据绑定。
4、部分指令:
v-text:元素的innerText只能在双标签中使用;
v-html:元素的innerHTML,不能包含{{xxx}};
v-if:元素是否移除或者插入;
v-show:元素是否显示或者隐藏;
v-model:双向数据绑定(页面<---->内存);<常在input、select、radio、textarea、checkbox等表单控件元素上>
v-bind:单向数据绑定(内存js改变影响页面,简写:可以省略);
v-for:可以使用操作数组(item,index),操作对象(value,key,index)
<key是类似trank by的一个属性,为的是告诉vue.js中的元素,与页面之间的关联,当试图删除元素的时候,是个单个元素的删除,而不是正版替换,所以需要关联其关系,设置>
5、父子组件: (prop单向绑定:父----->子)
父组件需要声明子组件,引入子组件对象;
①、父组件通过子组件的属性将值进行传递,方式有:
常量:prop1=“属性值”
变量:prop2=“变量名”
②、子组件需要声明:
根属性 props:[‘prop1‘,‘prop2‘]
在页面中直接使用{{prop1}} 在js中使用prop1?用this.prop1获取。
动态props:类似于用v-bind 绑定html特性到一个表达式,也可以用v-bind动态绑定props的值到父组件的数据中。
每当父组件的数据变化时,该变化也会传导给子组件。
6、过滤器:(Js函数,可以接受参数,可以串联;过滤器函数接受表达式的值作为第一个函数)
content 过滤器,vue中没有提供相关的内置过滤器,可以自定义过滤器;
组件内的过滤器+全局过滤器:
组件内关联过滤器就是options中的一个filters的属性(一个对象)
多个key就是不同过滤器名,多个value就是与key对应的过滤器方式函数体 vue.filter(名,fn)
比较:
全局:范围大,如果出现同名时,权利小;
组件内:范围小,如果出现同名时,权力大。
7、获取DOM元素:
前端框架就是为了减少DOM操作,但是特定情况下,也会给你留下后门;
在指定的元素上,添加 ref="名称A"
在获取的地方加入 this.$refs.名称A
如果ref放在原生DOM元素上,获取的数据就是原生DOM对象;可以直接操作;
如果ref放在了组件对象上,获取的就是组件对象;获取到DOM对象,通过this.$refs.sub.$el,进行操作。
四、核心插件----路由 vue-router
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 CSS class 的链接
- HTML5 历史模式或 hash 模式,在 IE9 中自动降级
- 自定义的滚动条行为
1、使用方式:
①、下载‘npm i vue-router-S’
②、在main.js中引入
③、安装插件‘vue.use(插件)‘
④、创建路由对象并配置路由规则;
⑤、将其路由对象传递给vue的实例,options中
⑥、留坑<router-view></router-view>
2、命名路由:
通过a标签点击,做页面数据跳转: 使用router-link标签(一个组件,用于设置一个导航链接;切换不同html内容)
①、去哪里:
<router-link to="/beijing"> 去北京</router-link>
②、去哪里
<router-link :to="{name:‘bj‘}"> 去北京</router-link>
更利于维护,如果修改了path,只修改路由配置中的path,该a标签会根据修改后的值生成href属性
3、参数router-link:
在vue-router中,有两大对象被挂载到了实例this:
$route(只读,具备信息的对象)、$router(具备功能函数的对象)
查询字符串:
1、去哪里:
<router-link :to="{name:‘detail‘,query:{id:1}}"> xxx</router-link>
2、导航(查询字符串path不能改)
{name:‘detail‘,query:‘/detail‘,组件}
3、去了干嘛:获取路由参数(要注意是query还是params和对应id名)
this.$route.query.id
path方式:
1、去哪里:
<router-link :to="{name:‘detail‘,params:{name:1}}"> xxx</router-link>
2、导航(path方式需要在路由规则上加上/:xxx)
{name:‘detail‘,path:‘/detail/:name‘,组件}
3、去了干嘛,获取路由参数(要注意是query还是params和对应name名)
this.$route.params.name
原文地址:https://www.cnblogs.com/21-forever/p/10957319.html