Vue小结

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

时间: 2024-10-13 13:22:43

Vue小结的相关文章

[js]vue小结

vue基础 - vue是一个渐进式框架 vue (视图渲染) components(路由机制) vue-router(路由管理) vuex (状态管理) vuecli (构建工具) - 库和框架 库如jQuery,是调用它的函数实现功能, 框架如vue, 是在指定的地方写代码,框架帮我们调用,是库的升级版 - 声明式(如forEach,不必关注里面实现) vs 命令式(for等具体语句) vue响应式数据变化 Object.defineProperty用法,重新赋值会触发set方法 obj =

vue之条件语句小结

vue之条件语句小结 v-if, v-else 随机生成一个数字,判断是否大于0.5,然后输出对应信息: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>v-else of vue</title> <script src="vue.min.js"></script> </head> <

Vue学习小结(一)安装依赖与数据来源

不多说啥了,生活中都是各种阵痛与惊喜.最近在学习vue框架,刚写完一个小型的后台管理系统(https://github.com/michaelzhengzm/info-manager-systerm_ol),在这里做一个阶段性的小结: 一.构建项目与安装依赖 构建项目采用vue-cli脚手架搭建,npm.cnpm.vue-cli这些知识的基础,网上一大片一大片的,就不过多的描述了.难理解的是里面的配置文件,初学的时候确实费了很多劲,先不用去管太多的配置文件,这些主要是以后上线打包的一些配置问题.

关于vue组件的一个小结

用vue进行开发到目前为止也有将近一年的时间了,在项目技术选型的时候隔壁组选 react的时候我们坚持使用vue作为前端的开发框架.虽然两者思想上的差异不大,但是vue的语法在代码的可读性以及后期的维护成本更加的适合,而且最近看到Apache对react的相关许可限制:这里不讨论react和vue的对比哪个好,技术框架没有最好的,只有适合项目才是最好的. 进入主题....... 组件,是vue的核心之一. 我们可以把页面各个子模块看成一个组件,可以独立拆分出来.这样不仅维护变得简单了,而且代码复

vue开发后台管理系统小结

最近工作需要用vue开发了后台管理系统,由于是第一次开发后台管理系统,中间也遇到了一些坑,想在这里做个总结,也算是对于自己工作的一个肯定.我们金融性质的网站所以就不将代码贴出来哈 一.项目概述 首先工作需求是这样的,开发一个公司的总后台,包含各个不同的模块,总体难度一般,没有开发ui图,用的vue-cli .elementui框架.webpack打包. 总需求的思维导图见链接  http://naotu.baidu.com/file/e8c31b43dfb2f18a3c523e0fa1393c0

小结vue的视图是如何将数据传递给model

shiroFilter里面设置的loginUrl一类的我暂时都没填.filterChainDefinitions在我看来是重点,可以实现配置的指定url的权限管理./admin/**=roles[admin]是指/admin/**路径需要admin权限. 在SQL Server实例中,资源隔离的基本单位是Resource Pool,正如其名,该对象是资源池,在创建Resource Pool时,指定该Pool拥有的CPU和Memory资源的数量范围.在SQL Server 2012版本中,最多可以

vue学习小结

new 一个vue对象的时候可以设置它的属性,其中最重要的包括三个,data,methods,watch. 其中data代表vue对象的数据,method代表vue对象的方法(要执行的函数),watch设置了对象的蒋婷方法. vue对象的设置通过html指令进行关联. 重要的指令包括: 1)v-text渲染数据 2)v-if控制显示 3)v-on绑定事件 4)v-for循环渲染

Vue学习知识小结

new 一个Vue对象的时候你可以设置它的属性,其中最重要的包括三个,分别是data,methods,watch. 其中     data代表                  Vue对象的数据 mthods代表             Vue对象的方法 watch设置了对象监听的方法 Vue对象里的设置通过html指令进行关联 重要的指令包括: v-text           渲染数据 v-html          渲染数据 {{msg}}      渲染数据 v-if          

Vue工作原理小结

本文能帮你做什么?1.了解vue的双向数据绑定原理以及核心代码模块2.缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现,本文相关代码主要摘自vue源码, 并进行了简化改造,相对较简陋,并未考虑到数组的处理.数据的循环依赖等,也难免存在一些问题,欢迎大家指正.不过这些并不会影响大家的阅读和理解,相信看完本文后对大家在阅读vue源码的时候会更有帮助<本文所有相关代码均在github上面可找到 https://github.com/DMQ/mvvm 相信大家对mvvm双向绑定应该都不陌生了,