vue

文章目录 1，webpack需要npm安装 2，使用webpack打包工具，就不用在html页面引用js文件了，如何引用？ 3，webpack打包命令 3.1，全局webpack 3.2，局部安装webpack（本地） 3.3，webpack打包css文件 3.4，安装loader 3.5，webpack打包less文件 3.6，webpack打包图片文件 3.7webpack-ES6转ES5的babel 4，webpack-使用Vue的配置过程 5，创建Vue时template和el的关系 6，Vue的终极使用方案 7，webpack横幅plugin的使用 8，webpack-HtmlWebpackPlugin的使用 https://www.bilibili.com/video/av68424291/?p=84 1，webpack需要npm安装 webpack 是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理,它能有Grunt或Gulp所有基本功能。webpack的官网是 https://webpack.github.io/ ，文档地址是https://webpack.github.io/docs，官网对webpack的定义是MODULE BUNDLER

title: VUE学习 date: 2019-08-26 原本在个人博客上写了一些博文，现转移到CSDN上 VUE学习笔记 一、总体结构 el：’#id’ el为DOM元素中的id,id表示为div中的id名 (JavaScript是代码，HTML是标记，这是两种完全不同的东西，通过DOM使得二者可以进行交互） data,data中数据为vue中用到的数据，个人理解类似于js中的各个变量 data: { x: "***", y: "***" } methods,methods中聚集了js中的函数，可以通过return返回函数值 methods: { a: function(){ }, bfunction(c){ } } 例子： <div id="vue_det"> <h1>site : {{site}}</h1> <h1>url : {{url}}</h1> <h1>{{details()}}</h1> </div> <script type="text/javascript"> var vm = new Vue({ el: '#vue_det', data: { site: "菜鸟教程", url: "www.runoob.com", alexa: "10000" }, methods: { details: function() { return this.site + "

vue中用element组件库搭建搜索框进行搜索时，怎么进行关键字查询搜索呢 < ! -- 搜索框 -- > < el - input placeholder = "请输入内容" v - model = "queryInfo.query" clearable @clear = 'getGoodsList' > < el - button slot = "append" icon = "el-icon-search" @click = "getGoodsList" > < / el - button > < / el - input > input是搜索框，button是搜索按钮，如何引入并且实现ui界面就不详细说明，主要是如何实现搜索功能 一、在el-input中用v-model绑定一个参数对象，我这里绑定了一个query的查询参数 data ( ) { return { // 查询参数对象 queryInfo : { query : '' , pagenum : 1 , pagesize : 10 } , 二、当在input搜索输入关键字后，点击搜索按钮就应该调用获取数据列表的函数，我这里的数据列表函数是getGoodsList，getGoodsList一般是created生命周期函数中定义。目前就可以实现搜索功能！ created ( ) { this .

v-model <!-- v-model会将msg的值赋予输入框，输入框的值改变了会影响数据--> <input type="text" v-model="msg"> v-text <!-- v-text==={{}} 防止{{}}出现在页面上--> <div v-text="msg"></div> v-once <!-- v-once只绑定一次，当数据再次发生变化也不会导致页面刷新--> <div v-once>{{msg}}</div> v-html <!-- v-html把html字符串当做html渲染,一定是可以信任的html--> <div v-html="p"></div> 来源： https://www.cnblogs.com/wangshouren/p/11677669.html

vue中使用高德地图api 引入高德js api webpack配置高德api 组件中使用高德api 引入高德js 首先注册高德api帐号，申请到key 然后在vue-cli创建的 html中引入 webpack配置高德api vue-cli 3.0 之后webpack的配置使用了vue.config.js来配置 在vue.config.js中添加如下代码， module . exports = { configureWebpack : { externals : { BMap : "BMap" } } } ; webpack配置高德api < template > < div style = "height: 100%" > < div id = "mapContainer" style = "width: 100%;height: 100%" > < / div > < / div > < / template > < script > import AMap from 'AMap' import { getInitData } from "../../api/map" import { MessageError } from "../../utils/util" export default { name : "Map" , data ( ) { return { map :

1、 下载mater 分支 的vue-devtools （目前是4.1.5版本） ( 切记一定要下载master 分支的，dev的目前测试npm run build 会失败 ) 下载地址： maser分支下载地址为 https://github.com/vuejs/vue-devtools/tree/master 2、将下载后的安装包解压到你喜欢的位置, cd进入到 vue- devtools-master 里面 , 执行cnpm i （得你自己安装cnpm） 3、继续执行npm run build , 如下图所示 4、打开谷歌浏览器，访问 chrome://extensions/ 选择 加载已解压的扩展程序 ，注意选择的文件夹路径为-- 你自己解压的盘符\vue-devtools-master\shells\chrome ，如下图代表成功 注意： 如果安装成功，重启项目后发现右上角没有vue 选项，则重启一下谷歌浏览器，重新打开F12调试即可！！ 来源： https://www.cnblogs.com/teamemory/p/12399191.html

最近使用ElementUI做项目的时候用Babel的插件babel-plugin-component做按需加载，使得组件打包的JS和CSS包体积大大缩小，加载速度也大大提升，所有想模仿做一个组件库也来做下按需加载。 首先用Vue CLI 3.0新建一个项目 vue create bes-ui 注意的是cli3的脚手架用的Babel7的配置，只有babel.config.js文件，所以要自己添加.babelrc文件。 项目结构 新建项目之后，可以按照自己的想法建文件结构，也可以按照babel-plugin-component官方文档的目录构建： 上面有两种方式，前一种是组件单一主题方式，后一种是主题库的方式，大家可以自己选择，下图是bes-ui的目录结构： 这里大概介绍下文件用途： -dist：组件库测试项目打包文件 -examples：组件库的测试项目 -lib：组件库的源码 -local：组件库的国际化文件 -package：组件库打包后的压缩的js,css文件 -static：组件库的静态资源（css主题） 其他文件就不介绍了，都是脚手架生成的文件 组件介绍 这里组件库写了两个样例：component1，component2 。 每个组件都添加了自己的初始化install方法（用于按需加载时候独立使用），install方面里面加个日志，方便后面看看组件加载记录。

分享 Vue 官网教程上关于 v-model 的讲解不是十分的详细，写这篇文章的目的就是详细的剖析一下， 并介绍 Vue 2.2 v-model 改进的地方，然后穿插的再说点 Vue 的小知识。 在 Vue 中，有许多方法和 Angular 相似，这主要是因为 Angular 是 Vue 早期开发的灵感来源。然而，Augular 中存在许多问题，在 Vue 中已经得到解决。 v-model 用在 input 元素上时 v-model 虽然很像使用了双向数据绑定的 Angular 的 ng-model ，但是 Vue 是单项数据流， v-model 只是语法糖而已：↓ <input v-model="sth" /> <input v-bind:value="sth" v-on:input="sth = $event.target.value" /> 第一行的代码其实只是第二行的语法糖。然后第二行代码还能简写成这样：↓ <input :value="sth" @input="sth = $event.target.value" /> 要理解这行代码，首先你要知道 input 元素本身有个 oninput 事件，这是 HTML5 新增加的，类似 onchange ，每当输入框内容发生变化，就会触发 oninput ，把最新的 value 传递给 sth 。 如果你不知道 $event

实践 < ! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < title > vue-style绑定 < /title > < script src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > < /script > < style > .red { background: red ; } .yellow { background: #fff252; } < /style > < /head > < body > < div id = "box" > < button @click = "handleClick()" > click < /button > < div :style = "'background:'+(isActive?'red':'yellow')" > 我是动态绑定style < /div > < div :style = "styleobj" > 我是动态绑定style-对象写法 < /div > < div :style = "stylearr" > 我是动态绑定style-数组写法 < /div > < /div > < script > var vm = new Vue ( { el: "#box"

发表评论 把文本框做双向数据绑定 <textarea placeholder="请输入内容" maxlength="120" v-model="msg"></textarea> data中 msg: “” // 评论 输入的内容 为发表按钮绑定一个事件 <mt-button type="primary" size="large" @click="postComment">发表评论</mt-button> 校验评论内容是否为空，如果为空，则Toast提示用户 评论内容不能为空 main.js中Vue.http.options.root下面写 //使用ajax的post方式时，第三个参数一般都是一样的，所以每次都重写，还不如全局定义一下，就省略这个重复写的过程。 // 全局设置 post 时候表单数据格式组织形式 application/x-www-form-urlencoded Vue.http.options.emulateJSON = true; 通过 vue-resource 发送一个请求，把评论内容提交给 服务器 当发表评论OK后，重新刷新列表，以查看最新的评论 如果调用 getComments 方法重新刷新评论列表的话，可能只能得到 最后一页的评论，前几页的评论获取不到 换一种思路： 当评论成功后，在客户端，手动拼接出一个 最新的评论对象，然后 调用 数组的 unshift