vue | 易学教程

5、vueJs基础知识05

阅读更多关于 5、vueJs基础知识05

vue2.0相比于1.0的变化　　 1、在每个组件模板中，不再支持片段代码，需要一个根元素包裹　　　　　组件中模板: 之前: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </template> 现在: 必须有根元素，包裹住所有的模板代码 <template id="aaa"> <div> <h3>我是组件</h3> <strong>我是加粗标签</strong> </div> </template> 　　2、关于组件定义　　　　a、Vue.extend 这种方式，在2.0里面有，但是有一些改动，这种写法，即使能用，咱也不用——废弃　　　　　　　b、Vue.component(组件名称,{ 　　　　　　　　在2.0继续能用　　　　　　data(){} 　　　　　　methods:{} 　　　　　　template: 　　　　}); 　　　　c、 2.0推出一个组件，简洁定义方式（json形式）：　　　　var Home={ 　　　　　　template:' ' -> 类似于之前的 Vue.extend() 　　　　}; 　　3、生命周期　　　　　　　vue1.0: 　　　　　　init 　　　　　　created 　　　　　　beforeCompile 　　　　　　compiled 　　　　　　ready　 √ ->

vue2.0组件间事件派发与接收

阅读更多关于 vue2.0组件间事件派发与接收

在vue的开发中，经常会在两个组件间进行事件的通信在vue1.0中我们使用$dispatch 和 $broadcast child.vue: this.$dispatch('eventName',this.data); parent.vue: event:{ 'eventName':function(data) { // 执行的方法 } } 但是在vue2.0中$dispatch 和 $broadcast被弃用，因为基于组件树结构的事件流方式实在是让人难以理解，并且在组件结构扩展的过程中会变得越来越脆弱,并且这只适用于父子组件间的通信。官方给出的最简单的升级建议是使用集中的事件处理器,而且也明确说明了一个空的vue实例就可以做到,因为Vue 实例实现了一个事件分发接口在vue2.0中在初始化vue之前，给data添加一个名字为eventhub 的空vue对象 new Vue({ el: '#app', router, render: h => h(App), data: { eventHub: new Vue() } }) 某一个组件内调用事件触发 this.$root.eventHub.$emit('eventName', event.target); 另一个组件内调用事件接收, 在组件销毁时接除事件绑定,使用$off方法 created() { this.$root

Vue.js的组件化编程

阅读更多关于 Vue.js的组件化编程

分享：很高兴今天有机会来跟大家聊一聊 Vue.js。分享前我想告诉大家的是，Vue.js 是一个前端框架，这个很重要。为什么我没有选择 React？React 相对于整个开发业务来讲是比较「重」的，而且实现的方式其实挺超前的。我虽然并不讨厌 React，但是由于 Vue 更加简单和轻便，可能对于一些相对简单的团队来讲，是一个更好的选择。本次分享中，我会先介绍一下 Vue.js 的历史，然后重点讲讲掘金在开发中总结的一些组件化编程经验，最后说一说我们是怎么使用 Vue.js 的首先介绍一下 Vue js，它是一个很「高大上」的前端库。用库的目的是为了能在最少的时间里写出最多的代码，能够在产品经理找你麻烦之前就把整个项目搞定。我认为这是一个好的库所具有的意义。 MVVM 这类前端框架，它本身就是一个设计模式。这是一种可以用同一种方法解决一些普遍问题的思路，是一个抽象的概念。而 ViewModel 这个东西在这中间，相当于一个黑箱子。如果我们不使用 MVVM 会怎么样呢？举个例子：当网站数据改变的时候，我们要手动做一下操作，把某一部分展示的 UI 重新渲染一遍，这会是一个很麻烦的过程。但是如果我们使用 MVVM 框架，当数据发生变化之后，UI 改变的这个部分就会由这个框架来帮我们搞定，这相当于它造了一个「轮子」，我们在上面跑就可以了，这就是 MVVM。什么是前端框架

VUE 2.0在IE中打开页面空白的原因及解决方法

阅读更多关于 VUE 2.0在IE中打开页面空白的原因及解决方法

前言因为工作的需要，学习Vue2.0也有一段时间，最近在用Vue2.0的官方脚手架工具构建的项目，chrome中跑一直没有问题，但ie打开出现了bug：问题 ie打开vue2.0项目空白,控制台报错 vuex requires a Promise polyfill in this browser；原因 Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API ，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign）都不会转码。为了解决这个问题，我们使用一种叫做 Polyfill（代码填充，也可译作兼容性补丁）的技术。简单地说，polyfill即是在当前运行环境中用来复制（意指模拟性的复制，而不是拷贝）尚不存在的原生 api 的代码。解决安装 babel-polyfill 步骤 npm安装 npm install --save-dev babel-polyfill 或 c npm install --save-dev babel-polyfill 在main.js导入即可 import 'babel-polyfill' 如果也是用了官方脚手架vue-cli，还需要在webpack.config

vue内容绑定（v-model）

阅读更多关于 vue内容绑定（v-model）

v-model演示 v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上或者组件上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>v-model指令</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="box"> <input type="text" v-model.lazy="text1" placeholder="请输入姓名"> <p>姓名：{{text1}}</p> <input type="checkbox" v-model="text2"> <p>是否90后：{{text2}}</p> <input type="radio" value="男" v-model="text3"> <input type="radio" value="女" v-model="text3"> <p>性别：{{text3}}</p> <select v-model="text4

VUE项目实现音乐播放器(二)-------排行榜页面

阅读更多关于 VUE项目实现音乐播放器(二)-------排行榜页面

今天，我们来实现播放器首页的排行榜页面的开发，也就是 src\components\Rank.vue ,效果截图：页面的图片、排行榜名称、歌曲等信息，来自QQ音乐的数据接口，我们用 vue-resource 插件的 Vue.http.jsonp() 获取接口数据，这个页面的难点是CSS布局，主要用到 display:flex 弹性布局，中间还有不少细节，我们一起来分析。首先，获取数据，用到的是Vuex，与其在每个需要获取接口数据的组件里调用接口，还不如将它们统一管理起来，写成一个公共的函数，通过 Vuex 的 Actions 的 this.$store.dispatch(' ') 获取即可。我们来看下具体实现，首先在 src\config 下，新建 api.js ，用于 export 接口地址、参数等信息，方便下一步直接 import 调用，代码如下： export default { rank_list: { url: 'https://c.y.qq.com/v8/fcg-bin/fcg_myqq_toplist.fcg', params: () => { return { format: 'jsonp', g_tk: 5381, uin: 0, inCharset: 'utf-8', outCharset: 'utf-8', notice: 0, platform:

Vue问题总结

阅读更多关于 Vue问题总结

3 月，跳不动了？>>> 1.用一个DOM元素赋值给一个data中的变量时，当这个DOM元素改变了其属性等，这个data中的变量不会被改变，导致不无得到最新状态的DOM。 this.audio = this.$refs.audio this.$refs.autio.src ='1.mp3' console.log(this.audio) //未更新状态的DOM 来源： oschina 链接： https://my.oschina.net/u/3757195/blog/3210350

vue格式化时间moment-timezone

阅读更多关于 vue格式化时间moment-timezone

一、在项目package-lock.json配置好moment-timezone { "name": "dashboard", "version": "0.1.0", "lockfileVersion": 1, "requires": true, "dependencies": { ....... "moment-timezone": { "version": "0.5.28", "resolved": "http://r.cnpmjs.org/moment-timezone/download/moment-timezone-0.5.28.tgz", "integrity": "sha1-8JPXidCR7XsFXYKqgagkZ/cuQzg=", "requires": { "moment": ">= 2.9.0" } }, ........ } } 二、在项目package.json { "name": "dashboard", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "core

04 使用脚手架创建vue项目并启动

阅读更多关于 04 使用脚手架创建vue项目并启动

在安装了相关工具之后，我们现在就可以创建一个分模块的vue项目了。 1、前提约束完成nodejs，vue-cli，webpack，webpack-dev-server的安装 https://www.jianshu.com/p/eb4d9e132f62 2、打开命令行，执行以下命令 vue init webpack vue-multymodule 回车，等待几分钟【取决于网络】 cd vue-multymodule 进入该项目 npm install 安装所需包，等待几分钟【取决于网络】 npm run dev 启动项目，等待几分钟【取决于网络】以下是项目结构： 3、在浏览器中输入提示的url http://localhost:8080 4、使用idea或者webstorm打开刚才创建的项目【注意，第一次要在开发工具中配置node路径】，按以下图示操作：以上的执行等价于在命令行中执行 “npm run dev”。 5、测试，在浏览器中输入http://localhost:8080，得到以下结果以上就是创建一个项目模板，分贝在命令行和idea中启动的过程。来源： https://www.cnblogs.com/alichengxuyuan/p/12558546.html

40行程序把Vue3的响应式集成进React做状态管理

阅读更多关于 40行程序把Vue3的响应式集成进React做状态管理

本文参考原文- http://bjbsair.com/2020-03-22/tech-info/2095/ 前言 vue-next是Vue3的源码仓库，Vue3采用lerna做package的划分，而响应式能力@vue/reactivity被划分到了单独的一个package中。如果我们想把它集成到React中，可行吗？来试一试吧。使用示例话不多说，先看看怎么用的解解馋吧。 // store.ts import { reactive, computed, effect } from '@vue/reactivity'; export const state = reactive({ count: 0, }); const plusOne = computed(() => state.count + 1); effect(() => { console.log('plusOne changed: ', plusOne); }); const add = () => (state.count += 1); export const mutations = { // mutation add, }; export const store = { state, computed: { plusOne, }, }; export type Store = typeof store;

订阅 vue