vue | 易学教程

简易Vue项目搭建

阅读更多关于简易Vue项目搭建

<--- 前言：因为用npm很慢，所以用淘宝镜像===>详细信息可以参考此链接（ https://npm.taobao.org/ ），因为服务器架在国内所以下载模块很快，如果直接用npm命令会很慢任意路径执行命令：“npm install -g cnpm --registry=https://registry.npm.taobao.org” 执行完后即可全局用cnpm来代替npm了，这样在其它项目安装上非常快速！ ---> 1、安装vue-cli和angular一样，安装vue的客户端管理工具，全局安装代码： cnpm install -g vue-cli 或者 cnpm install --global vue-cli。【显而易见前者代码更少方便，以上是全局安装，即哪个路径都可以用；但如果是开发环境（即某个路径下才能用）用的模块则：cnpm install 模块名 --save-dev，此时就会出现package.json文件然后就会在“devDependencies:{}"配置中看到了】 2、安装完vue-cli后就可以用vue的一些命令了，这就是vue-cli的作用。下一步就是创建一个基于webpack的项目了代码： vue init webpack 项目名字【注意：项目名只能是英文，不能有大写字母！否则会报错，如下sorry，name can no longer

vue运行机制总结

阅读更多关于 vue运行机制总结

new Vue()运行之后，Vue调用_init函数进行初始化，初始化生命周期，事件，props,methods,data,computed,watch等其中最重要的是通过Object.defineProperty设置setter和getter函数，用来实现响应式(数据自动更新)和依赖收集初始化后，调用 $mount挂载组件 -------------- 添加响应式数据： this.$set(this.obj,'name','dongfang') //因为是在初始化时就劫持监听数据，所以初始化后添加的数据要响应式，必须通过$set方法添加数据监听数组变异方法： vue文档链接当直接修改数组某一项值时，vue没法检测到，如 vm.items[1] = 'x' // 不是响应性的 vm.items.length = 2 // 不是响应性的 // Vue.set Vue.set(vm.items, indexOfItem, newValue) // Array.prototype.splice vm.items.splice(indexOfItem, 1, newValue) vue对如下数组方法进行了包装变异，调用这些方法操作后一样能触发视图更新。 push() pop() shift() unshift() splice() sort() reverse() --

Vue 列表与表格高亮设置

阅读更多关于 Vue 列表与表格高亮设置

点击li 元素设置高亮的方法 <li v-for="(item,index) in lists" :key="index" :class="{ activeLi: currentLi == item }" @click="handleClick(index)" class="pointer"> {{item}} </li> handleClick(index) { let list = this.lists[index]; this.currentLi = list }, .activeLi{ background:#ecf5ff; } 表格的高亮可以设置 highlight-current-row <el-table :data="tableData" border @row-click="handleRowClick" highlight-current-row > 如果进入页面默认某一行高亮可以使用 setCurrentRow()方法为el-table 设置ref="table" 假如设置第二行高亮 this.$refs.table.setCurrentRow(this.tableData[1]); 来源： oschina 链接： https://my.oschina.net/u/2612473/blog/3178407

iView 在Vue中使用遇到的问题

阅读更多关于 iView 在Vue中使用遇到的问题

一、Tree 树形控件问题：树形控件在参照官方最后一个自定义render例子时，无法对树节点进行选中 return h( "span", { style: { display: "inline-block", cursor: "pointer", color: node.node.selected ? "#2d8cf0" : "#fff" //根据选中状态设置样式 }, on: { click: () => { if (!node.node.selected) this.$refs.tree.handleSelect(node.nodeKey); //手动选择树节点 } } }, 二、Table 表格结合 Page 分页问题：在表格使用多选框时，分页切换后，上一页的选中状态无法保存。解决方案：定义一个存储所有选中的数组this.selectRow = []，选中状态发生变化时，向数组中增删选中目标。在翻页事件中，加入下面的代码： //翻页事件 changePage(page) { this.currentPage = page; this.tableData.map(row => { //判断是否在选中列表中 f['_checked'] = $.inArray(row.name,this.selectRow) != -1; }) } 三、Table 表格

vue表格之:formatter=fun

阅读更多关于 vue表格之:formatter=fun

作用：对从数据库中取出的数据进行处理后展示。示例1： partner1为从数据库中查询出的展示字段，值为数字id，需要转化成中文名称 partners为全量查询结果，包含了id与中文名称的一一对应关系 getPartnerName为数据处理函数，用以找到与id对应的中文名称  <el-table-column prop="partner1" :formatter="getPartnerName" align="left" show-overflow-tooltip label="伙伴名称" width="150"></el-table-column> getPartnerName(row, col) { console.log('partners', this.partners) for (var i in this.partners) { if (this.partners[i].pid === row.partner1) { return this.partners[i].shortname } } } 示例2：时间格式化 // 时间格式化 dateFormat (row, column) { var date = row[column.property] if (date === undefined) { return '' } return

Vue、PHP、Bootstrap联手打造简单数据管理表格

阅读更多关于 Vue、PHP、Bootstrap联手打造简单数据管理表格

这是一个用Vue、Bootstrap和PHP一起写的小实例，回顾总结了一下之前学习的知识，顺带添加点学习乐趣。先上效果图：用到的知识有：Vue数据绑定及组件、Bootstrap界面、PHP-AJAX交互、MySQL存储，其他细节的就不说了。建立的文件有三个：一个HTML文件（Vue.html，js内嵌在HTML中）、两个PHP文件（getData.php、addData.php）。首先构建前端界面：　　 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>测试HTML</title> 6 <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"> 7 <link href="https://cdn.bootcss.com/tether/1.3.6/css/tether.min.css" rel="stylesheet"> 8 <style type="text/css"> 9 #app-1{ 10 width: 50%; 11 margin:auto; 12 margin-top: 6%; 13 } 14 .btn{ 15 cursor:

vue中表格el-table-column数据翻译字段

阅读更多关于 vue中表格el-table-column数据翻译字段

<el-table-column prop="isstate" label="状态"></el-table-column> 以上是显示后台返回的1 or 0 需求是要求从1和0 改成已审核和未审核 <el-table-column prop="isstate" :formatter = "stateFormat" label="审核状态"></el-table-column> 使用 :formatter = "stateFormat" 在methods区： methods: { stateFormat(row, column) { if (row.isstate === 0) { 　　　　　　　　return '未审核' 　　　　　　} else if (row.isReview === 1) {　　　　　　　　 return '已审核' }　　　　} 　　} 　　然后页面就可以了，页面显示已审核和未审核了。来源： https://www.cnblogs.com/2001-/p/10966800.html

VUE项目搭建

阅读更多关于 VUE项目搭建

创建空白文件夹UWO $ mkdir uwo $ cd uwo/ 创建package.json文件 $ npm init 创建index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Vue Example</title> </head> <body> <h3>{{ message }}</h3> <script src="dist/build.js"></script> </body> </html> 创建main.js 文件 import Vue from 'vue' new Vue({ el: 'body', data: { message: "Hello Vue" } }) 创建webpack.config.js配置文件 module.exports = { // 这是一个主文件包括其他模块 entry: './src/main.js', // 编译的文件路径 output: { //`dist`文件夹 path: './dist', // 文件 `build.js` 即 dist/build.js filename: 'build.js' }, module: { // 一些特定的编译规则 loaders: [ { // 让webpack去验证文件是否是

vue循环语句

阅读更多关于 vue循环语句

循环使用 v-for 指令。 v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。 v-for 可以绑定数据到数组来渲染一个列表： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> </head> <body> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <div id="demo"> <ol> <li v-for="site in sites"> {{site.name}} </li> </ol> </div> <script> new Vue({ el: '#demo', data: { sites:[ {name:"cyy1"}, {name:"cyy2"}, {name:"cyy3"} ] }, methods:{ }, filters:{//过滤器 } }) </script> 模板中使用 v-for： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> </head> <body> <script src=

用模块化的方式写vuejs

阅读更多关于用模块化的方式写vuejs

引子 vuejs 是一个入门简单的框架，具有使用简单，扩展方便的特点。随着webpack的流行，vuejs也推出了自己的load，vue-loader，可以方便的打包代码。最近写了一个 json viewer-ac ，就是完全使用vue-loader带来的模块化特性，写的比较开心，也得到了不少经验。这里记录一下。文件结构 <template> <div> <app-header></app-header> </div> </template> <style> ... </style> <script> import AppHeader from './AppHeader.vue' export default { name:'app', props:['data'] data() { return {} }, methods: { handleClick() {} }, components: { AppHeader } } </script> template 里是模板代码，这里一般是一个闭合的html标签，比如一个div。 style 里是css代码，这个代码是作用到整个页面的，如果只想作用到当前的模板中，需要用 scoped 属性 <style scoped> 如果想用一些css预处理器，比如sass，只需要声明lang，然后vue-loader就会自动的加载，当然

订阅 vue