vue | 易学教程

vuejs 2.0 键盘事件

阅读更多关于 vuejs 2.0 键盘事件

<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script src="vue.js"></script> <script type="text/javascript"> window.onload = function(){ var vm = new Vue({ el:'#box', methods:{ show:function(ev){ if(ev.keyCode == 13){ alert('你按回车键了'); } }, } }); } </script> </head> <body> <div id="box"> <input type="text" placeholder="请输入" @keyup="show($event)"> <input type="text" placeholder="请输入" @keyup.13="show($event)"> </div> </body> </html> 当按下键盘的时候，执行show方法，然后再去执行相应的业务。两个input的效果都是一样的如果安13 也就是按键 enter 才会执行弹窗！！ @keyup.13 回车 @keyup.enter 回车 @keyup.left 左键 @keyup.right 右键 @keyup.up

VUE2中文文档：语法基础笔记

阅读更多关于 VUE2中文文档：语法基础笔记

声明式渲染 Vue.js 的核心是，可以采用简洁的模板语法来声明式的将数据渲染为 DOM： <div id="app"> {{ message }} //模板语法 </div> 　　 var app = new Vue({　　//新建vue实例（响应式） el: '#app',　　　　　　//挂载到#app data: { message: 'Hello Vue!'　　//数据 } }) 除了文本插值(text interpolation)，我们还可以采用这样的方式绑定 DOM 元素属性： <div id="app-2"> <span v-bind:title="message"> 　　　　//v-bind：属性=“数据” 鼠标悬停此处几秒，可以看到此处动态绑定的 title！ </span> </div> var app2 = new Vue({ el: '#app-2', data: { message: '页面加载于 ' + new Date().toLocaleString() } })　　由组件组合而成的应用程序在 Vue 中，一个组件本质上是一个被预先定义选项的 Vue 实例，在 Vue 中注册组件很简单： // 定义一个被命名为 todo-item 的新组件 Vue.component('todo-item', { template: '<li>这是一个

vue form表单验证

阅读更多关于 vue form表单验证

<el-select v-model="ruleForm.region" placeholder="请选择活动区域"> <el-option label="区域一" value="shanghai"></el-option> <el-option label="区域二" value="beijing"></el-option> </el-select> 　　 ruleForm: { name: '', region: '', date1: '', date2: '', delivery: false, type: [], resource: '', desc: '' }, rules: { name: [ { required: true, message: '请输入活动名称', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } ], region: [ { required: true, message: '请选择活动区域', trigger: 'change' } ], 　　 v-model= "ruleForm.region"和 prop= "region"也必须保持一致来源： https://www.cnblogs.com/jessical626/p

vue基础语法

阅读更多关于 vue基础语法

一个简单的vue实例 1.进入vue官网： https://cn.vuejs.org/v2/guide/installation.html 两种方法;1)点击开发版本，进入vue.js,复制到自己的文件夹，主页里引入2）直接引入cdn 注：<script src="js/vue.js"></script>放在head标签之间，避免抖屏。 <head> <meta charset="utf-8" <title>Vue入门</title> <script src="./vue.js"></script> <body> <div id="root">{{msg}}</div> <script> new Vue({ el:"#root", data:{ msg:"hello world" } }) </body> el: "id的值",//引用id的值，Vue通过el与属性值root进行绑定 msg:"输出值"可直接填写任意输出值注意vue实例里不同属性用逗号隔开 2.挂载点，模板与实例之间的关系挂载点：指的是Vue实例下中el属性对应的""中的id所对应的dom节点(div)，即代码中el对应id的HTML标签模板：指的是在挂载点内部的这些内容都称作模板内容，可以写在挂载点内部也可以写在实例里的template中实例：即newVue中，Vue会结合模版和数据生成最终要展示的内容

vue基础介绍及使用

阅读更多关于 vue基础介绍及使用

1.vue基本使用 vm:el / data v:v-model / {{ }} 1. 引入Vue.js 2. 创建Vue对象 el : 指定根element(选择器) data : 初始化数据(页面可以访问) 3. 双向数据绑定 : v-model 4. 显示数据 : {{xxx}} 5. 理解vue的mvvm实现 > view：模板页面 > 自定义标签属性：指令 > 大括号表达式：获取模型数据 > viewModel：vue实体 > model：模型（data） > element: 指定用vue来管理页面中的哪个标签区域  <div id="test"> <input type="text" v-model="msg"><br> <input type="text" v-model="msg"> <p>hello {{msg}}</p> </div> <scrip type="text/javascript" src="../js/vue.js"></script> <scrip> const vm = new Vue({ // 配置对象 options // 配置选项(option) el: '#test', // element: 指定用vue来管理页面中的哪个标签区域 data: {

VUE初长成【部分小记】

阅读更多关于 VUE初长成【部分小记】

实例（具体的对象） Object.freeze() ，会阻止修改现有的属性，意味着响应系统无法再追踪变化。生命周期钩子的 this 上下文指向调用它的 Vue 实例。（ Vue.data ） v-html 请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。( 静态内容 ) Vue 实例的数据作用域下，每个绑定都只能包含单个表达式 v-on 　指令，它用于监听 DOM 事件 v-bind 指令可以用于响应式地更新 HTML 特性用方括号括起来的 JavaScript 表达式作为一个指令的参数： <a v-bind:[attributeName]="url"> ... </a> v-bind 缩写 v-bind:href → :href v-on 　缩写 v-on:click → @click this.error.type === 'fatal' ( 一种错误类型 ) 返回对象的计算属性来源： https://www.cnblogs.com/codesyofo/p/10773889.html

Vue2.5基础

阅读更多关于 Vue2.5基础

1.1 创建第一个Vue实例官方网站：https://cn.vuejs.org 学习 --> 安装刚开始学习Vue，使用最简单的安装方式，直接用<script>引入我们下载开发版本的Vue.js 创建一个index.html，引入Vue.js 使用Vue.js创建一个实例 <!DOCTYPE html>　　<html lang="en">　　<head>　　　　<meta charset="UTF-8">　　　　<title>Vue入门</title>　　　　<script src="./vue.js"></script>　　</head>　　<body>　　　　<div id="app">{{msg}}</div>　　　　<script>　　　　　　new Vue({　　　　　　　　el: "#app", //挂载点　　　　　　　　data: {　　　　　　　　　　msg: "hello world"　　　　　　　　}　　　　　　})　　　　</script>　　</body> </html> 1.2 Vue实例中的数据，事件和方法 v-text指令 <div v-text="number"></div> v-html指令 <div v-html="number"></div> 绑定事件 <div id="app"> <div v-on:click="clickFn">

Vue入门

阅读更多关于 Vue入门

VUE入门 <!DOCTYPE html> <html> <head> <title>VUE入门</title> <script src="vue.js"></script> </head> <body> <div id="zx125"></div> <script type="text/javascript"> new Vue({ el:"#zx125", template:'<p>{{zx}}</p>', data:{ zx:"HELLO VUE" } }) </script> </body> </html> el 挂载点 template 模板 {{zx}} 插值表达式 v-on:click=“zx” 也可以写成 @click=“zx” <!DOCTYPE html> <html> <head> <title>VUE入门</title> <script src="vue.js"></script> </head> <body> <div id="zx"></div> <script type="text/javascript"> new Vue({ el:"#zx", template:'<p @click="click1">{{msg}}</p>', data:{ msg:"HELLO VUE" }, methods:{ click1:function() { this

vue跨域，复杂请求，后端为beego

阅读更多关于 vue跨域，复杂请求，后端为beego

关于跨域，网上讲得很多，具体实施起来大多讲的不详细，贴我的vue端代码 require('es6-promise').polyfill() import fetch from 'isomorphic-fetch' const tokenstr = '保密' /** * post请求 * @param {String} options.url api地址 * @param {String} options.querydata querydata参数 * @return {Promise} Promise */ const _fetch = ({ url, querydata }, commit) => { if (commit) commit('START_LOADING') let _url = `http://127.0.0.1:88/v1${url}` return fetch(_url, { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'Authorization': 'Bearer ' + tokenstr }, body: querydata }) .then((res) => { if (commit) commit('FINISH_LOADING')

vue和微信小程序的区别、比较

阅读更多关于 vue和微信小程序的区别、比较

vue和微信小程序的区别、比较链接：https://segmentfault.com/a/1190000015684864 一、生命周期先贴两张图： vue生命周期小程序生命周期相比之下，小程序的钩子函数要简单得多。 vue 的钩子函数在跳转新页面时，钩子函数都会触发，但是小程序的钩子函数，页面不同的跳转方式，触发的钩子并不一样。 onLoad : 页面加载一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数。 onShow : 页面显示每次打开页面都会调用一次。 onReady : 页面初次渲染完成一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。对界面的设置如 wx.setNavigationBarTitle 请在 onReady 之后设置。详见生命周期 onHide : 页面隐藏当 navigateTo 或底部tab切换时调用。 onUnload : 页面卸载当 redirectTo 或 navigateBack 的时候调用。数据请求在页面加载请求数据时，两者钩子的使用有些类似， vue 一般会在 created 或者 mounted 中请求数据，而在小程序，会在 onLoad 或者 onShow 中请求数据。二、数据绑定 VUE :vue动态绑定一个变量的值为元素的某个属性的时候

订阅 vue