Vue小结

发布时间:2019-06-01 14:00:14发布者:Mr.Zhang阅读(421)

一、本尊建议的学习顺序: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