vue

< html lang = "en" > < head > < meta charset = "UTF-8" > < title > 属性绑定和双向数据绑定 </ title > < script src = "./vue.js" > < / script > </ head > < body > < div id = "root" > < div title = "this is hello world" > hello world </ div >//title作用是当鼠标放在hello world 上面的时候，显示this is hello world </ div > < script > new Vue ({ el: "#root" , }) < / script > </ body > </ html > 提示语可变的情况： < html lang = "en" > < head > < meta charset = "UTF-8" > < title > 属性绑定和双向数据绑定 </ title > < script src = "./vue.js" > < / script > </ head > < body > < div id = "root" > < div v-bind:title = "title" > hello world </ div >/

　　在Web应用中，我们经常会使用表单向服务端提交一些数据，而通常也会在表单项中绑定一些如input、change等事件对用户输入的数据进行校验、更新等操作。在Vue.js中我们可以使用v-model指令同步用户输入的数据到Vue示例data属性中，同时会对radio、checkbox、select等原生表单组件提供一些语法糖使表单操作更加容易。 一、基本用法 　　 下面我们列举基本例子来看看如何使用v-model更新表单控。 　　 1.text 　　设置文本框v-model为name，代码示例如下 　　 <span>Welcome{{name}}</span> <br> <input type="text" v-model="name" placeholder="join DDFE"> 　　当用户操作文本框时，vm.name会自动更新为用户输入的值，同时，span内的内容也会随之改变。 　　2.checkbox 　　复选框checkbox在表单中会经常使用，下面我们来看看单个checkbox如何使用v-model。代码示例如下： <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{checked}}</label> 　　当用户勾选了checkbox时，vm.checked

一、mixins的理解 vue中提供了一种混合机制--mixins，用来更高效的实现组件内容的复用。最开始我一度认为这个和组件好像没啥区别。。后来发现错了。下面我们来看看mixins和普通情况下引入组件有什么区别？ 组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，单本质上两者还是泾渭分明，相对独立。 而mixins则是在引入组件之后，则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后，父组件的各种属性方法都被扩充了。 单纯组件引用： 父组件 + 子组件 >>> 父组件 + 子组件 mixins： 父组件 + 子组件 >>> new父组件 值得注意的是，在使用mixins时，父组件和子组件同时拥有着子组件内的各种属性方法，但这并不意味着他们同时共享、同时处理这些变量，两者之间除了合并，是不会进行任何通信的。 // App.vue <template> <!-- ... --> </template> <script> import {mixin} from "./base.js"; // 导入混合对象 export default { mixins: [mixin], // 记得一定要添加 mixins 属性，要求赋值一个数组，意味着可以使用多个混合对象 // ... created

swiper是一个在切图中好用到不行的图片轮播插件，包括3d轮播、h5滑屏等复杂应用都不在话下，到了vue项目一切逻辑完全颠覆了，没有获取dom的概念，还好有 vue-awesome-swiper组件，让我们可以无缝的继续使用swiper。如果没记错的话vue-awesome-swiper基于swiper3.x 开发得来。 1.npm安装 npm install vue-awesome-swiper –save 2.main.js全局安装 import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' // require styles import 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper, /* { default global options } */) 3.组件里调用 import 'swiper/dist/css/swiper.css' import { swiper, swiperSlide } from 'vue-awesome-swiper' export default { components: { swiper, swiperSlide } } 4、缩略图（普通的swiper很简单，网上有很多可以借鉴

vue双向数据绑定v-model的实现原理 定义组件com-one如下 <template> <div> <input type="text" @input = 'handlinput' :value="value"> </div></template><script> export default { props :['value'], name: "com-one", methods : { handlinput(e){this.$emit('input',e.target.value) console.log(e.target.value) } } } script>子组件自定义事件input自定义方法handlinput，在方法中$emit事件input,同时从父组件中获取变量value绑定到组件input中， 父组件监听子组件的发射的事件input,在data中定义value给子组件传递过去因为子组件通过$emit发射的事件传递一个参数因此监听的等于argments[0],这样当父组件中输入值子组件也会同时变化值这可以在vue-tool中看到，因此可以在父组件中可以用v-model来使用使用如下v-model="value"代替:value = value @input="value = arguments[0]"这样实现了父组件监听子组件的输入情况

App.vue <template> <div id="app"> <input type="text" v-model="todo" v-on:keydown="keydown($event)"> <button v-on:click="add">新增</button> <br> <h2>未完成</h2> <ul> <li v-for="(item,key) in list" v-if="!item.check"> <input type="checkbox" v-model="item.check" v-on:change="saveList()"> {{item}} -------- <button v-on:click="remove(key)">删除</button> </li> </ul> <br> <h2>已完成</h2> <ul> <li v-for="(item,key) in list" v-if="item.check"> <input type="checkbox" v-model="item.check" v-on:change="saveList()"> <input type="checkbox"> {{item}} -------- <button v-on:click="remove(key)">删除</button> </li> </ul> <

美团小程序框架mpvue(花名：没朋友)蹲坑指南 第一次接触小程序大概是17年初,当时小程序刚刚内侧,当时就被各种限制折腾的死去活来的,单向绑定, 没有promise,请求数限制,包大小限制,各种反人类,...反正我是感受到了满满的恶意. 最近接到一个工程类的小程序项目,做技术选型的时候,又把以前的东西捡起来看了看,重新熟悉了一下, 感觉小程序还是有在努力的,支持大部分es6语法了,还出了一个类Vue的框架wepy,还支持redux状态管理, 就大致建了个demo,跑了起来,感觉虽然没有vue那么酸爽,但是还是挺ok的,至少比原生的小程序语法亲民很多. 然后就开始用wepy搭项目,写静态页面(由于公司的开发模式是先写静态页面, 等待后端的同学接口出来了再绑定数据),虽然wepy用起来比原生的顺手, 但是还是有很多坑的,这里就不列举了..... 就在我们静态页面快写完的时候,某天晚上论坛的时候看到一条消息, 美团出了个小程序框架mpVue （不知道为什么，每次看到这个名字，我只想到3个字，没朋友,哈哈）, 大致看了一下 官方的介绍 ,主要有一下亮点: 跟vue一样的开发体验,包括vuex H5代码转换编译成小程序目标代码的能力 也就是说,不但可以用我们熟悉的vue语法开发,还有可能直接把你的h5页面编译成小程序. 该项目到目前位置，开源不到20天，已经收到将近7000个star

list页面要使用keep-alive，这里再app.vue里判断 app.vue <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> router.js 使用history模式 scrollBehavior里是具体代码，一开始是在scrollBehavior里获取 document.documentElement.scrollTop || document.body.scrollTop;但是第一次进入页面的时候滚动页面高度无法获取，所以就在list.vue里 beforeRouteLeave方法里设置高度，然后就可以在scrollBehavior return相应的高度了 export default new Router({ 　　mode: "history", 　　base: "/m/", 　　scrollBehavior(to, from, savedPosition) { 　　return { x: 0, y: to.meta.savedPosition || 0 }; }, routes: [ 　　{ 　　　　path: "/", 　　　

话不多说先上图 左右滚动，下面的随着滚动 html代码 <div class="course-container"> <div class="swiper-con" @touchstart="starPos" @touchend="endPos"> <div v-for="(swp,swip) of swiperList" :key="swip" class="swip-item" @click="jumpList(swp.name)" > <img :src="swp.src" class="swip-pic" /> <span class="swp-name">{{swp.name}}</span> </div> </div> <div class="swiper-dots"> <div class="nav-dots-box"> <span class="active-box" ref="dot" style="width:26.8924px;"></span> </div> </div> </div> css代码 .swiper-dots { margin-top: 20px; } .nav-dots-box { margin: 0 auto; position: relative; width: 10.667vw; height: 0.8vw; border-radius

　　最近一直在学习开发一个VUE项目，几乎没有前端基础摸爬滚打，就一边摸索HTML，JS，CSS一边模仿着已有代码开发，也还算能学到东西。 　　VSCode确实还不错，很轻量。在刚开始学写vue的时候，后台总是报各种错，什么空格多了少了，缩进不对，没用驼峰命名法都报错，很让人崩溃。后来才知道有个叫ESLint的东西: 官网入口: https://cn.eslint.org/ 　　　用了一段时间过后，觉得书写规范这个东西还是很重要的，之前写代码的时候，虽然也在意过，不过像这样严格的提醒是没有的，有时候也不注意了。 　　　不过好归好，每次代码写完跳出来十几个甚至几十个红色error/warning还是让人很难受。从网上找了点资料，发现可以在VS里添加辅助工具。 步骤如下: 1. 安装ESLint: 在vscode左侧的extension处搜索ESLint并安装 2. file->preference->settings ，如果不是文本框点击那个open settings(JSON) 3.在用户设置中填写如下配置： { "eslint.autoFixOnSave": true， "eslint.alwaysShowStatus": true， "eslint.validate": [ "javascript"， "javascriptreact"， { "language": "html