vue

组件化开发 什么是组件化 如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。 但如果，我们讲一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了 组件化思想 组件化是Vue.js中的重要思想 它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用 任何的应用都会被抽象成一颗组件树 组件化思想的应用： 有了组件化的思想，我们在之后的开发中就要充分的利用它 尽可能的将页面拆分成一个个小的、可复用的组件 这样让我们的代码更加方便组织和管理，并且扩展性也更强 注册组件的基本步骤 组件的使用分成三个步骤： 创建组件构造器：调用Vue.extend()方法 注册组件：调用Vue.component()方法 使用组件：在Vue实例的作用范围内 我们来看看通过代码如何注册组件 <div id="app"> <!--3.使用组件--> <my-cpn></my-cpn> <script src="../js/vue.js"></script> <script> // 1.创建组件构造器对象 const cpnC = Vue.extend({ template: ` <div> <h2>我是标题</h2> <p>我是内容, 哈哈哈哈</p> <p>我是内容,

native是什么？ .native - 监听组件根元素的原生事件。 主要是给自定义的组件添加原生事件。 官网的解释： 你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。 通俗点讲：就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加’. native’事件是无法触 发的(我觉的这个说法一点也不通俗)。 举列说明 这时点击按扭没有任何反应。 这时点击按扭，出现弹窗，如下图： 这里候，就可以很明显的看出.native的作用了。 使用native的原因主要有两点： 在vue组件中，所有的原素必须在一个根结点上。 当想要在根结点响应数据，如果直接绑定v-on是不能响应的，这时，可以添加.native就可以了。 参考两篇文章，一个CSDN，一个博客园： https://blog.csdn.net/qq_29468573/article/details/80771625 https://www.cnblogs.com/musicbird/p/10130312.html 博客园中的代码有一点问题，CSDN上的代码没问题，但是讲的不大明白，合了一下，哈哈哈哈哈，有不对的请指出来哈。 来源： CSDN 作者： 小小妖妖 链接： https://blog.csdn.net/qwq1503/article/details

前天完成了一个新组件的开发，做的过程也是各种遇到问题，彻底弄懂了slot，巩固了一些flex布局和jquery的知识，比起自己第一次做组件开发，现在已经是能够下手做，遇到问题解决问题，还算有进步。 但是昨天写博客的时候，就在我快写完的时候，chrome崩溃了。。。我也崩溃了。。。写的东西全没有了！！！我还是继续重新码字吧。。。崩溃。。。 做的这个组件给它起个什么名字比较合理我想了半天也没想出来。。。 需求是这样的： 由两部分组成，上面是导航条，下面每一块显示内容。如下图。 导航条固定在顶部 点击导航里的每一个标签，该标签高亮，该标签相应的div自动跳到内容部分第一栏的位置（这里最后一栏无法跳到第一栏，因为要撑开整个页面） 滑动下面的内容，滑到哪个div对应的navs的标签高亮 核心代码写在下面～供参考哦 html插入nav-list模板： <div id="main"> <nav-list :navs="navs" :contents="contents"> <div v-for="con in contents" :class="'con_' + con.en_name" :slot="'con_' + con.en_name">{{ con.text }}</div> // :class要写在这里，而不要写在<slot>上 </nav-list> </div> 子组件模板：

在生成、导出、导入、使用 Vue 组件的时候，像我这种新手就会常常被位于不同文件的 new Vue() 和 export default{} 。它们含义到底是什么，又有什么异同呢？ 首先，Vue 是什么？ po 主的理解是 Vue 就是一个构造函数，生成的实例是一个巨大的对象，可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。 所以渲染的时候，可以使用构造 Vue 实例的方式来渲染相应的 html 页面： new Vue({ el: '#app' ... }) 　　 那么 export default {} 又是来干嘛的？ 这是在复用组件的时候用到的。假设我们写了一个单页面组件 A 文件，而在另一个文件 B 里面需要用到它，那么就要用 ES6 的 import/export 语法 ，在文件 A 中定义输出接口 export ** ，在文件 B 中引入 import ** ，然后再生成一个 Vue 实例 new Vue (**) ，把引入的组件用起来，这样就可以复用组件 A 去配合文件 B 生成 html 页面了。 所以在复用组件的时候， export 和 new Vue 缺一不可。 来源： https://www.cnblogs.com/liubingyjui/p/10801628.html

级联选择器 <el-cascader v-model="data" // 用来显示数据 :options="options" // options 里面的数据 就是级联选择器里面的内容 placeholder="请选择" :props="customProps" // element UI 默认input 框显示的值是 options 里的 label 值。如果 options 的键值对不是 value label ，就需要 props 来配置。 @change="handleNodeClick" ref="myCascader"> </el-cascader> 因为后台返回的数据不是label，和 value关键字 重新设置显示默认框对应的值： customProps:{ label:'typeName', children:'child', value : 'id' } v-model = "data" data 是个数组 树形选择器有一个同样的问题，就是默认是label 字段显示，如果后台返的不是label字段，同样要设置props https://blog.csdn.net/woshidamimi0/article/details/96592937 来源： https://www.cnblogs.com/rabbit-lin0903/p/12273582.html

最近项目中涉及到跨页面传参数和后台进行数据交互，看到需求之后第一反应就是用路由传参来解决；Vue中给我们提供了三种路由传参方式，下面我们一个一个的来看一下： 方法一：params传参： this.$router.push({ name:"admin", 　　　　//这里的params是一个对象，id是属性名，item.id是值(可以从当前组件或者Vue实例上直接取) params:{id:item.id} }) //这个组件对应的路由配置 { 　　//组件路径 path: '/admin', 　　//组件别名 name: 'admin', 　　//组件名 component: Admin, } 通过params传递参数，如果我们想获取id的 参数值，我们可以通过this.$route.params.id这种方式来打印出来就可以得到了；（注意：获取参数的时候是$route，跳转和传参的时候是$router） 方法二：路由属性配置传参： this.$router.push({ name:"/admin/${item.id}", }) //这个组件对应的路由配置 { 　　//组件路径 path: '/admin:id', 　　//组件别名 name: 'admin', 　　//组件名 component: Admin, } 通过路由属性配置传参我们可以用this.$route

1 Vue Cli 4.0安装 vue clie属于插件,发布在npm中的插件,都可以通过npm的方式安装;安装新软件,会自动覆盖以前的旧软件. #npm 安装 npm install -g @vue/cli #yarn安装 yarn global add @vue/cli #查看版本 vue --version 查看vue安装在哪些地方 which -a vue 2 Vue Cli 4.0使用 使用 vue创建项目 vue create mall 然后会提示你,预安装 默认安装bable和eslint.bable用来编译es6 的语法,eslint用来做项目的检查 回车之后,按照给出的提示,就可以跑起来项目 cd mall yarn serve #如果没有安装yarn,也可以用下面的命令 npm run serve 启动vue的ui系统 vue ui 启动之后,里面是没有项目的,需要导入. 也可以不进行前面的操作,先使用ui,来创建项目. 来源： CSDN 作者： MyQGirl_moon 链接： https://blog.csdn.net/MyQGirl666/article/details/104665519

vue组件通讯大致有三种：父传子，子传父，还有兄弟之间通讯。 第一种：父传子：主要通过props来实现的 具体实现：父组件通过import引入子组件，并注册，在子组件标签上添加要传递的属性，子组件通过props接收，接收有两种形式一是通过数组形式[‘要接收的属性’ ]，二是通过对象形式{ }来接收，对象形式可以设置要传递的数据类型和默认值，而数组只是简单的接收。 第二种：子传父：主要通过$emit来实现 具体实现：子组件通过通过绑定事件触发函数，在其中设置this.emit(‘要派发的自定义事件’，要传递的值)， emit(‘要派发的自定义事件’，要传递的值)，emit(‘要派发的自定义事件’，要传递的值)，emit中有两个参数一是要派发的自定义事件，第二个参数是要传递的值 然后父组件中,在这个子组件身上@派发的自定义事件,绑定事件触发的methods中的方法接受的默认值,就是传递过来的参数 第三种：兄弟之间传值有两种方法： 方法一：通过event bus实现 具体实现:创建一个空的vue并暴露出去，这个作为公共的bus,即当作两个组件的桥梁，在两个兄弟组件中分别引入刚才创建的bus，在组件A中通过bus. e m i t （ ’ 自 定 义 事 件 名 ’ ， 要 发 送 的 值 ） 发 送 数 据 ， 在 组 件 B 中 通 过 b u s . emit（’自定义事件名’

准备工作：需要之前配置好vue-cli脚架构，安装好cordova环境。下面开始对vue.js项目进行打包，打包环境为Android。 可以看下我的github：https://github.com/padipata ，里面有我自己写的vue项目，喜欢的给个关注呗。 1.添加cordova项目 $ cordova create myApp1 org.apache.cordova.myApp myApp2 其中： myApp1：cordova目录名 org.apache.cordova.myApp： 包名 myApp2： 项目名（在config.xml的<name>中查看） 2.在vue中添加cordova的配置 myApp1/www/index.html----->vue/index.html 将myApp1/www/index.html中所有的<meta>拷贝到vue/index.html中 将将myApp1/www/index.html中<script>关于cordova.js的引用拷贝到vue/index.html中 myApp1/www/js/index.js----->vue/vuex/main.js var app = { // Application Constructor initialize: function() { this.bindEvents(); },

一、直接使用属性传递的方式传递 父组件中传递的参数可以有很多个,如果子组件中未使用props接收的话,会逐级的往下面传递并且会挂载在当时组件的dom上,见下图 1、父组件给儿子组件传递参数 <template> <Son2 :name="'哈哈'" :age="20" :bookList="['三国演义', '西游记']" :details="{'name': '张三', address: '广东深圳'}" :isActive="false" ></Son2> </template> 2、在儿子组件中不接收 <template> <div> <p>son2组建: {{$attrs}}</p> </div> </template> <script> export default { // inheritAttrs: false, 如果不想要在dom上显示传递过来的属性,就加上这个 }; </script> 3、需要将剩余参数(当前组件未接收完的,全部传递到下一个子组件中) <Grandson2 v-bind="$attrs" /> 二、使用v-on="$listeners"进行跨组件传递事件 1、父组件中 <template> <div> <p>父组件</p> <Son2 :name="'哈哈'" :age="20" :bookList="['三国演义', '西游记']"