一angular是mvvm框架, 而vue是一个渐进式的框架, 相当于view层, 都有双向数据绑定, 但是angular中的双向数据绑定是基于脏检查机制, vue的双向数据绑定是基于ES5的getter和setter来实现,而angular是有自己实现一套模板编译规则,vue比angular更轻量, 性能上更高效, 比angular更容易上手, 学习成本低,vue需要一个el对象进行实例化, 而angular是整个html页面下的,单页面应用, 而vue可以有过个vue实例。 代码区别参考：https://blog.csd...
一、初始化一个vue项目vue init webpack vuemqttnpm installnpm run dev 二、安装mqttnpm install mqtt --save 三、编写vue组件 1 <template>2 <div id="app">3 <p>mqtt收到的数据：</p>4 <p>{{this.msg}}</p>5 </div>6 </template>7 8 <script>910import mqtt from‘mqtt‘1112 var client 13 const options = { 14 connectTimeout: 40000, 15 clientId: ‘‘, 16 username: ‘admin‘, 17 passwo...
0901自我总结Vue-CLI项目vuex仓库一.概念vuex仓库是vue全局的数据仓库，好比一个单例，在任何组件中通过this.$store来共享这个仓库中的数据，完成跨组件间的信息交互。vuex仓库中的数据，会在浏览器刷新后重置二.使用store.jsimport Vue from 'vue' import Vuex from 'vuex'Vue.use(Vuex);export default new Vuex.Store({state: {// 设置任何组件都能访问的共享数据course_page: '' },mutations: {// 通过外界的新值来修改仓库中...
使用图片选择组件，选取图片后会获取一个file let param = new FormData();param.append("img", e.file, e.file.name); //第一个参数为后端接收的路径，第二个参数为图片选择插件获取的file文件，第三个为图片文件的路径 传给后端即可原文：https://www.cnblogs.com/uimeigui/p/12755190.html
1 安装 npm install easemob-websdk --save 官方安装 ，这种安装要在依赖包配置初始化链接，提交代码时并没把配置提交 使用 hx-websdk 安装npm install --save hx-websdk 2 .使用 新建一个webim.js 放在聊天窗口组件同一层级，为了Emoji图片路径同步import store from ‘@/store/store‘ // window.Strophe = require(‘strophe.js‘).Strophe // let WebIM = require(‘easemob-websdk‘) import WebIM from "hx-websdk"; ...
1，在 methods 中<template> <div> <form @submit="addTodo"> <input v-model="title" type="text" name="title"> <input type="submit" value="添加" class="btn"> </form> </div></template> <script>export default { name:‘AddTodos‘, data() { return { title:‘‘, } }, methods: { addTodo(e){ e.preventDefault();//取消默认事件 //...
一、表单输入绑定（v-model 指令） 可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。 详细用法参见官方文档：https://cn.vuejs.org/v2/guide/forms.html二、局部组件和全局组件1、了解根组件template模板的优先级大于el，如下方式验证：<div id="app">{{ msg }} </div> <script>// 如果仅仅是实例化vue对象中 既有el 又有template，// 如果template中定义了模板的内容 那么template模板...
概述Vue套用Mui的外壳开发app项目，可以通过Mui的 manifest.json 文件添加权限 1.新建Mui项目首先，新建一个空的Mui项目 window.location.href = “app服务器的地址” 2.在Vue项目中引入Mui的js 微信支付export default {paywx(money) {// 支付var pays = {};var w = null;var PAYSERVER = ‘http://demo.dcloud.net.cn/payment/?payid=‘;var id = ‘wxpay‘;plus.payment.getChannels(function(channels) {for(var i in cha...
最近在某个项目中用到了Vue.js,从上手做开发到项目发布，一步步踩了不少坑。本文试图总结过去一个多月使用Vue.js中的一些经验，也算是一点心得体会吧，拿出来与大家分享，欢迎多多交流。Vue.js简介Vue.js is a JavaScript framework for building astonishing web applications. Vue.js is a JavaScript library for creating web interfaces. Vue.js is a tool that leverages the use of MVVM architecture.这是来自Vue.js官网的...
一提到文字上下滚动，我们就会想到用不同的程序去实现，而且页面中有文字滚动会增加这个网页的互动和可信度。1.Js最简单的方法是控制盒子的高度，使不断的重复添加<html><body><head> /**scroll css**/ #scrolldiv{height: 400px;overflow: hidden;} </head><div id="scrolldiv" class="scroll"><ul id="scroll1"><li>用户130****0834 刚刚 砸中<span class="yellow">500元京东卡</span> 正在兑换中</li><li>用户176****2746 ...
前记： 排版记录，点耽误时间，我就简单的来，下面是一个vue 过滤器的写法，demo 演示，限制一个字符串的长度。vue filter 的官网介绍 https://cn.vuejs.org/v2/guide/filters.html 下面就具体拿自己的一个例子介绍：某个filter.js// 限制汉字的个数 export const limitWordLength = Vue.filter(‘limitWordLength‘, (str, length, sufix) => {/* eslint-disable */let r = /[^\x00-\xff]/g // 双字节正则 let mif (str.r...
1.1runtime-compiler 和 runtime-only 的区别Runtime + Compiler:recommended for most users运行时+编译器:推荐给大多数用户编译过程 template-》ast-》render-》vdom-》真实DOMnew Vue({el: ‘#app‘,components: { App },template: ‘<App/>‘ }) Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere仅限运行时:大约...
VUE是什么就不说了，说白了，就是一对象，直接上干货var vm = new Vue({el: "选择器", 挂载到页面的那个元素里，即确定vue的作用范围 外部可通过vm.$el访问，得到的是一个原生dom元素，可进行对应操作a: ‘‘, //自定义属性 外部可通过vm.$options访问data: { }, //实例属性都在这里面，外部通过实例名,即vm.$data调用computed: { }, //计算属性，也是实例属性，只是以方法的形式存在，并可以有逻辑运算的属性method: { }, //实...
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><script src="vue.js"></script><title id="title">{{title}}</title> </head> <body> <div id="ask"><!--vue不能控制body和html的标签--><ul><li v-for="(v,k) in list">{{v.content}}<button v-on:click="remove(k)">删除</button></li></ul><textarea v-model="content" cols="30" rows="10"></textarea><button v-on:click="push(‘pre‘)">发表到前面</button>...
我们学习一门新语言或者框架时，第一件事是什么呢，那必然是向世界say Hello。创建一个Vue应用话不多说，先上代码，让我们感受一下Vue的核心功能<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head> <body><div ><input type="text" v-model="message">...