vue

父元素属性传子元素 html代码图: // 注册子组件 Vue . component ( "navbar" , { template : ` <nav> <button v-if="myshow">返回</button> <span>我是{{mytitle}}---{{mytext}}</span> <button v-show="myshow">主页</button> </nav> ` , //接受父组件传来的属性 props : [ "mytitle" , "myshow" , 'mytext' ] } ) //父组件 var vm = new Vue ( { el : "#box" , data : { text : "aaaa" } } ) 结果图: 子元素属性传父元素 html代码图: // 注册子组件 Vue . component ( "mychild" , { template : ` <div> child--<button @click="handleClick()">child</button> </div> ` , data ( ) { return { text : "child定义的状态" } } , methods : { handleClick ( ) { //把text状态传到组件中 //触发 this . $emit ( "aaa" ,

前言 本章我们来学习Vue组件通信中的可以算是所有内容，在此之前，您最好掌握Vue的基础语法、指令等内容，同时也建议您查看我其他的文章进行补充。 组件通信 父子组件关系 通过上图顺带给大家说明了父子组件的实现原理，以及组件间传值传DOM的实现思路，那么我们看看Vue的代码来感受一下 父向子传值 模板部分(此处传值也能使用组件内的变量) <div id="app"> <!-- 传递一个字符串常量haha --> <son v-bind:text="'haha'" /> </div> js部分 // 子组件 var Son = { // 要接收的字段名称 props:['text'], template:` <div> {{ text }} </div>` }; Vue.component('son',Son); // 父组件 new Vue({ el:'#app' }); 显示结果很显然是子组件的haha 子向父通信 试想一种情况，由父组件控制子组件的显示，而从子组件中点击X来实现子组件的隐藏，那么实际的控制权确实在父组件 要处理这个问题，大家第一反应应该就是相当通过子组件的点击事件，拿到父组件内控制显示与隐藏的变量并更改就可以了 代码如下 // 隐藏按钮点击函数 methods:{ clickChild(){ this.$parent.isShow = false; } }

< div id = "app-5" > < p > { { message } } < / p > < button v - on : click = "reverseMessage" > 反转消息 < / button > < / div > < script > var app5 = new Vue ( { el : '#app-5' , data : { message : 'Hello Vue.js!' } , methods : { reverseMessage : function ( ) { this . message = this . message . split ( '' ) . reverse ( ) . join ( '' ) } } } ) < / script > split(’ ‘)会把数据拆分为一个数组,括号里的’ ‘是把数据拆分为每个字符串的意思 reverse( )是翻转的意思，把数据反过来 join(’ ')是重组的意思，把数组合成一个字符串 来源： CSDN 作者： cathy18c 链接： https://blog.csdn.net/cathy18c/article/details/104196780

下面来简单介绍下Vue： vue是渐进式JavaScript框架（MVVM的JS框架） 特点：易用（使用成本低），灵活（生态系统完善，适用于任何规模的项目），高效（体积小，优化好，性能好） 其高效性具体表现为： 1.运行效率高 采用虚拟dom 减少真实dom的操作使项目的运行效率大大提高； 2.开发效率高 采用了组件化开发 。 因此将开发者的精力从dom操作解放出来，转移到数据操作上 详细介绍请进入 vue官网 接下来看一下怎样创建及使用vue 1.可以直接下载并用 script 标签引入，Vue 会被注册为一个全局变量。 2.或者直接引入CDN： <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 引入之后就可以在js中实例化vue //创建一个vue的实例 let vm =new Vue({ el:"#app", // 将vue的实例和dom中的某一个元素进行绑定 绑定的元素以及子节点都会被实例进行处理 data:{ // data里的数据直接可以通过插值法 {{表达式变量}} 进行渲染 name:'你好世界', state:true } }) html页面中 <!-- 和实例绑定了 就会用vue的语法进行处理 --> <div id='app'> {{name}} </div> <!--

UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量级的基本UI组件合集 vue-material - 通过Vue Material和Vue 2建立精美的app应用 muse-ui - 三端样式一致的响应式 UI 库 vuetify - 为移动而生的Vue JS 2组件框架 vonic - 快速构建移动端单页应用 eme - 优雅的Markdown编辑器 vue-multiselect - Vue.js选择框解决方案 vue-table - 简化数据表格 VueCircleMenu - 漂亮的vue圆环菜单 vue-chat - vuejs和vuex及webpack的聊天示例 radon-ui - 快速开发产品的Vue组件库 vue-waterfall - Vue.js的瀑布布局组件 vue-carbon - 基于 vue 开发MD风格的移动端 vue-beauty - 由vue和ant design创建的优美UI组件 vue-blu - 帮助你轻松创建web应用 vueAdmin - 基于vuejs2和element的简单的管理员模板 vue-syntax-highlight -

element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量级的基本UI组件合集 vue-material - 通过Vue Material和Vue 2建立精美的app应用 muse-ui - 三端样式一致的响应式 UI 库 vuetify - 为移动而生的Vue JS 2组件框架 vonic - 快速构建移动端单页应用 eme - 优雅的Markdown编辑器 vue-multiselect - Vue.js选择框解决方案 vue-table - 简化数据表格 VueCircleMenu - 漂亮的vue圆环菜单 vue-chat - vuejs和vuex及webpack的聊天示例 radon-ui - 快速开发产品的Vue组件库 vue-waterfall - Vue.js的瀑布布局组件 vue-carbon - 基于 vue 开发MD风格的移动端 vue-beauty - 由vue和ant design创建的优美UI组件 vue-blu - 帮助你轻松创建web应用 vueAdmin - 基于vuejs2和element的简单的管理员模板 vue-syntax-highlight - Sublime

转自：https://blog.csdn.net/lishanleilixin/article/details/84025459 UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量级的基本UI组件合集 vue-material - 通过Vue Material和Vue 2建立精美的app应用 muse-ui - 三端样式一致的响应式 UI 库 vuetify - 为移动而生的Vue JS 2组件框架 vonic - 快速构建移动端单页应用 eme - 优雅的Markdown编辑器 vue-multiselect - Vue.js选择框解决方案 vue-table - 简化数据表格 VueCircleMenu - 漂亮的vue圆环菜单 vue-chat - vuejs和vuex及webpack的聊天示例 radon-ui - 快速开发产品的Vue组件库 vue-waterfall - Vue.js的瀑布布局组件 vue-carbon - 基于 vue 开发MD风格的移动端 vue-beauty - 由vue和ant design创建的优美UI组件 vue-blu - 帮助你轻松创建web应用

UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量级的基本UI组件合集 vue-material - 通过Vue Material和Vue 2建立精美的app应用 muse-ui - 三端样式一致的响应式 UI 库 vuetify - 为移动而生的Vue JS 2组件框架 vonic - 快速构建移动端单页应用 eme - 优雅的Markdown编辑器 vue-multiselect - Vue.js选择框解决方案 vue-table - 简化数据表格 VueCircleMenu - 漂亮的vue圆环菜单 vue-chat - vuejs和vuex及webpack的聊天示例 radon-ui - 快速开发产品的Vue组件库 vue-waterfall - Vue.js的瀑布布局组件 vue-carbon - 基于 vue 开发MD风格的移动端 vue-beauty - 由vue和ant design创建的优美UI组件 vue-blu - 帮助你轻松创建web应用 vueAdmin - 基于vuejs2和element的简单的管理员模板 vue-syntax-highlight -

UI组件 框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量级的基本UI组件合集 vue-material - 通过Vue Material和Vue 2建立精美的app应用 muse-ui - 三端样式一致的响应式 UI 库 vuetify - 为移动而生的Vue JS 2组件框架 vonic - 快速构建移动端单页应用 vue-blu - 帮助你轻松创建web应用 vue-multiselect - Vue.js选择框解决方案 VueCircleMenu - 漂亮的vue圆环菜单 vue-chat - vuejs和vuex及webpack的聊天示例 radon-ui - 快速开发产品的Vue组件库 vue-waterfall - Vue.js的瀑布布局组件 vue-carbon - 基于 vue 开发MD风格的移动端 vue-beauty - 由vue和ant design创建的优美UI组件 bootstrap-vue - 应用于Vuejs2的Twitter的Bootstrap 4组件 vueAdmin - 基于vuejs2和element的简单的管理员模板 vue-ztree - 用 vue 写的树层级组件 vue-tree -

其实已经完全是Day6了嘛哈哈哈哈哈哈。 webpack的使用单独整理成笔记了，在 这里 。 下面是关于Vue的watch和computed的，内容不多。 < ! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < title > watch和computed < /title > < script src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > < /script > < script src = "https://unpkg.com/vue-router/dist/vue-router.js" > < /script > < /head > < body > < div id = "box" > < input type = "text" v-model = "firstname" > + < input type = "text" v-model = "lastname" > = < input type = "text" v-model = "fullname" > < hr > < input type = "text" v-model = "first" > + < input type = "text" v