vue | 易学教程

VUE环境项目运行以及搭建

阅读更多关于 VUE环境项目运行以及搭建

首先借用别人的博客 https://www.cnblogs.com/lgx5/p/10732016.html 已有项目运行VUE项目 ndoe -v npm -v npm install -g cnpm --registry=http://registry.npm.taobao.org npm install webpack -g cnpm install vue-cli -g 项目目录下（如果中途有报错）https://www.cnblogs.com/kidsitcn/p/4557548.html (冷门错误) npm install --msvs_version 2015 npm config set msvs_version 2012 --global https://www.jianshu.com/p/6053e9b35d9a (W10问题) //npm install --msvs_version=2015 npm run dev 得到地址+端口号启动单独构建项目 vue init webpack yourProject(项目名)一路enter即可，正常构建完成后npm run devhttp://localhost:8080 可以看到vue默认界面报错vue : 无法加载文件 C:\Users\...，因为在此系统上禁止运行脚本。有关详细信息，请参阅 htt ps:

elementUI vue Upload和vant Uploader的开发中的经验总结

阅读更多关于 elementUI vue Upload和vant Uploader的开发中的经验总结

由于工作的需要，基于vue框架的手机端和PC端项目做了好多个了，上传图片这个功能经常要用到，必要把他总结一下。 1.elementUI Upload 图片放大功能 < template > < div class = "app-container" > < el-upload action = "https://jsonplaceholder.typicode.com/posts/" list-type = "picture-card" multiple :on-preview = "handlePictureCardPreview" :on-remove = "handleRemove" > < i class = "el-icon-plus" > < /i > < /el-upload > < el-dialog :visible.sync = "dialogVisible" > < img width = "100%" :src = "dialogImageUrl" alt = "" > < /el-dialog > < /div > < /template > < script > export default { data ( ) { return { dialogImageUrl: '' , dialogVisible: false } methods: {

vue的路由守卫

阅读更多关于 vue的路由守卫

vue的路由守卫 vue路由守卫实现代码 router.beforeEach((to,from,next)=>{ if(to.path == '/login'){ next(); }else{ alert('您还没有登录，请先登录'); next('/login'); } }) 各参数含义 1.to 表示将要跳转到的组件 2.from原组件 3.next()进入到下一个组件的钩子函数 4.next(/login)进入指定的组件的钩子函数来源： CSDN 作者：曹豆芽链接： https://blog.csdn.net/qq_41108972/article/details/104307275

Vue中美元$符号的意思

阅读更多关于 Vue中美元$符号的意思

Vue中美元$符号的意思 vue的实例属性和方法除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $ ，以便与用户定义的属性区分开来。例如： var data = { a: 1 } var vm = new Vue({ el: '#example', data: data }) vm.$data === data // => true vm.$el === document.getElementById('example') // => true // $watch 是一个实例方法 vm.$watch('a', function (newValue, oldValue) { // 这个回调将在 `vm.a` 改变后调用 }) 所以在vue文档的API中还可以看到完整的实力属性和方法。表示为变量可以用来表示变量，比如变量 var s='asdsd'或var $s='asdasd'; es6中也可以采用${XXX}来在字符串中插入变量（这个记住要利用v-bind） Jquery中利用$作为选择器，其实是jquery库对原生JavaScript对选择元素进行的一种封装 vue的实例属性和方法除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $ ，以便与用户定义的属性区分开来。例如： var data = { a: 1 }

第一个Vue程序

阅读更多关于第一个Vue程序

第一个Vue程序 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架，发布于 2014 年 2 月。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库（如：vue-router，vue-resource，vuex）或既有项目整合。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body>  <div id="app"> {{message}} </div>  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script> <script> var vm = new Vue({ el: "#app", //model:数据 data: { message: "hello, vue" } }); </script> </body> </html> 来源： https://www.cnblogs.com/pinked/p/12306190.html

Vue数据绑定原理及简单实现

阅读更多关于 Vue数据绑定原理及简单实现

本篇文章中的代码只是部分片段，完整代码存放于github上 https://github.com/Q-Zhan/simple-vue 。进入正文~实现数据绑定主要是要实现两个方面的功能：数据变化导致视图变化，视图变化导致数据变化。后者比较容易实现，就是监听视图的事件，然后在回调函数中改变数据。所以重点是数据变化时如何改变视图。这里的思路是通过object.defineProperty()来对数据的属性设置一个set函数，设置后当数据改变时set函数就会被调用，我们就可以里面进行视图更新操作。具体实现过程如上图所示，我们需要一个监听器Observer来给所有的属性设置set函数。如果属性发生了变化，就要通知所有的订阅者Watcher。而这些Watcher统一存放在消息订阅器Dep中，这样比较方便统一管理。Watcher接受到来自Dep的通知后就执行相应的操作去更新视图。 Observer 监听器的核心代码如下： function observe(data) { if (!data || typeof data !== 'object') { return; } Object.keys(data).forEach(function(key) { // 遍历属性，递归设置set函数 defineReactive(data, key, data[key]); }); }

基于VUE利用pdf.js实现文件流形式的pdf显示

阅读更多关于基于VUE利用pdf.js实现文件流形式的pdf显示

首先推荐大家看一下这个demo vue-pdf.js-demo ，这里面包含固定本地地址，远程pdf地址，通过打开文件的方式打开pdf 这儿我们着重介绍一下通过文件流的形式打开pdf。（所谓文件流，就是通过ajax请求，返回的数据是文件流的形式） 1. 首先通过下载pdf.js的相关文件，当然我推荐直接拷贝 vue-pdf.js-demo 里面的文件，然后放到static目录里面 2. 第二步就是直接使用了在组件中合适的地方放入 iframe <iframe class="prism-player" :src="pdfUrl" width="100%" height="100%"></iframe> 3. 然后就是获取pdfUrl（这儿也推荐两种方式）第一种，直接调用文件流的请求地址 // 这儿的url，就是通过 axios 进行请求的地址，只不过换成了从导航url进行请求的方式 let url = process.env.BASE_API + '/coursePartDetail/getFileStreamByCoursePartDetailId?CoursePartDetailId=' + this.sectionMsg.id this.pdfUrl = `/static/pdf/web/viewer.html?file=${encodeURIComponent(url)

vue中利用Promise封装jsonp并调取数据

阅读更多关于 vue中利用Promise封装jsonp并调取数据

Promise就是一个给一步操作提供的容器，在这个容器里，有两个阶段无法改变的阶段，第一个阶段就是Pending(进行)，第二个阶段就是结果阶段，包含Fulfilled(成功)、Rejected(失败)两个结果。这两个结果不会改变。然后结果结束后就会用then来执行相应的结果。 new Promise((resolve,reject)=>{ 相应操作 if(异步操作成功){ resolve(value) }else{ reject(error) } }).then(value=>{ // 成功后操作 }，error=>{ // 失败后操作 }) 用Promise封装jsonp方法 import originJSONP from 'jsonp' // 这时候Url是不带参数的，我们让data变成参数，data在具体定义获取具体内容的时候再单独配置 export default function jsonp(url, data, option) { // 看url是否有问号的意思就是只在第一次加参数的时候加一个问号，剩下就是加& url += (url.indexOf('?') < 0 ? '?' : '&') + param(data) return new Promise((resolve, reject) => { originJSONP(url, option, (err,

vue项目、路由

阅读更多关于 vue项目、路由

vue项目及插件

阅读更多关于 vue项目及插件

vue项目的创建方法1: cmd中执行 vue ui vue会创建一个socket,方便快捷方法2: 命令行建立 vue create v-proj //创建项目名为v-proj的项目文件 >>>default (bable,eslint) //默认 manually select features //自定义 (*)bable //把es6语法解析为es5语法(防止沙雕浏览器无法解析es6) TypeScript //js编程还是ts编程 Progressive Web App(PWA) Support //前端优化组件,需要大量配置 (*)Router //前台路由 (*)Vuex //仓库 ,相当于全局的单例,每次页面刷新,重新加载仓库,为移动端准备,因为移动端不刷新 CSS Pre-processors //css预编译器 less sass两个语法来进行css逻辑编译时,先将他们预编译为css语法 Linter/Formatter //格式化代码,只有按照这个标准书写才不会报错 Unit Testing // 测试 E2E Testing // 测试 >>> Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y /

订阅 vue