vue

3 月，跳不动了？>>> Vue插件，用于从Vue上下文中使用本地Storage，会话Storage和内存Storage 一个vue封装的本地储存的方法。 安装 Npm npm install vue-ls --save Yarn yarn add vue-ls 使用 Vue-ls Storage API import Storage from 'vue-ls' ; options = { namespace : 'vuejs__' , // key键前缀 name : 'ls' , // 命名Vue变量.[ls]或this.[$ls], storage : 'local' , // 存储名称: session, local, memory } ; Vue . use ( Storage , options ) ; // 或 Vue.use(Storage); new Vue ( { el : '#app' , mounted : function ( ) { Vue . ls . set ( 'foo' , 'boo' ) ; // 设置有效期 Vue . ls . set ( 'foo' , 'boo' , 60 * 60 * 1000 ) ; //有效1小时 Vue . ls . get ( 'foo' ) ; Vue . ls . get ( 'boo' , 10 ) ;

状态过渡 Vue 的过渡系统提供了非常多简单的方法设置进入、离开和列表的动效。那么对于数据元素本身的动效呢，比如： 数字和运算 颜色的显示 SVG 节点的位置 元素的大小和其他的属性 所有的原始数字都被事先存储起来，可以直接转换到数字。做到这一步，我们就可以结合 Vue 的响应式和组件系统，使用第三方库来实现切换元素的过渡状态。 状态动画与侦听器 通过侦听器我们能监听到任何数值属性的数值更新。可能听起来很抽象，所以让我们先来看看使用 GreenSock 一个例子： <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script><div id="animated-number-demo"> <input v-model.number="number" type="number" step="20"> <p>{{ animatedNumber }}</p></div> new Vue({ el: '#animated-number-demo', data: { number: 0, tweenedNumber: 0 }, computed: { animatedNumber: function() { return this.tweenedNumber.toFixed

一、vue变量 所有的 vue变量 ，必须在data：中有注册（哪怕内容是空，相当于声明这个是变量，是vue变量而不是js变量）。这里的变量也可以运算。（注意：所有的框架一定要注意js变量和框架的变量，js变量和框架的变量是可以相互转换，获取的。框架的变量有这个框架变量的定义方法，如东信公司的DD变量的定义；如vue变量必须在data中定义（注册）或者methods（方法注册的地方）） 　　1、组件的data必须是函数。 　　2、vue 变量的修改（vue变量的改变，视图同步更新。）： this.age = 16 　　3、vue变量改变，视图不会同步更新的情况： 　　　　参考 我的 另外一篇博客： https://www.cnblogs.com/wfblog/p/10544303.html 二、vue函数 所有的方法事件函数，必须在methods中。methods中函数的 this指向vm，获取data中的值可以直接 this.name获得和修改。 　　其它的地方在实例创建之前（如生命周期beforeCreate函数中，全局中）获取data的值，必须指明对象，vm.name 获取。 　　 vue中可以调用外面全局的方法，外面全局环境中也可以调用vue中的方法，使用vm.fun。（这样就解决了，vue中不能jQuery操作DOM的问题了） 三、DOM中绑定vue数据 参考 https

1、新建页面的修改，集成富文本编辑 edit-post.vue（新建和修改都用该组件） <template> <div class="editor"> <span class="h5 text-left">标题</span> <Input v-model="title" size="large" placeholder="请输入标题~~~"/> <span class="h5 text-left">内容</span> <TinymceEditor ref="editor" v-model="content" :disabled="disabled" @onClick="onClick"></TinymceEditor> <Button @click="submitPost">发布</Button> <Button type="dashed" @click="submitPost">保存草稿</Button> <Button type="warning" @click="clear">重置</Button> </div> </template> <script> import TinymceEditor from '@/components/tinymce-editor' export default { name: "EidtPost", components: {

（1）什么是mvvm？ MVVM是Model-View-ViewModel的缩写。mvvm是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。 在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。 （2）mvvm和mvc区别？ mvc和mvvm其实区别并不大。都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。和当 Model 频繁发生变化，开发者需要主动更新到View 。 （3）vue的优点是什么？

路由：vue-router 1）name使用 路由配置 import Main from './views/Main' routes: [ { path: '/main', name: 'main', component: Main } ] 视图使用 <router-link :to="{name: 'main'}">主页</router-link> 2）router-link与系统a标签的区别 router-link：会被vue渲染成a标签，但是点击这样的a标签不能发生页面的转跳，只会出现组件的替换 a：也可以完成同样的效果，但是会发生页面的转跳 3）路由重定向 routes: [ { path: '/', name: 'home', component: Home }, { path: '/home', redirect: '/', // 重定向 } ] 4）路由传参-1 路由：router.js { // path如果是通过to直接访问，路由必须完全对应 // :id代表可以完成任意内容匹配，用变量id保存 // 请求/course/detail/1 和 /course/detail/abc，id变量分别存的1和abc // path: '/course/detail/1', // 死的 path: '/course/detail/:id', // 活的 name:

index.js如果在router目录下，代表这个js文件只是路由使用 main.js中为全局，需要引入使用到的组件，一般vue中不用写东西 vue中el挂载哪个就哪个组件为根目录， 传值数据绑定的时候在组件（即app.vue之类的），必须返回data值，写data数据格式为： export default { name: 'App',//组件名字 data(){//固定格式，里面和data一样 return{ message: 'Welcome to Your Vue.js App' } } } 路由： APP.vue里面写 <router-link to="/">hello</router-link> <router-link to="/news">news</router-link> <router-link to="/about">about</router-link> <script> export default { name: 'App',//组件名字 data(){//固定格式，里面和data一样 return{ message: 'Welcome to Your Vue.js App' } } } index.js里面写 import News from '@/components/News' import About from '@/components

*/ /*--> */ 一、真实DOM和其解析流程 浏览器渲染引擎工作流程，大致可分为5步： 创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting 第一步，用HTML分析器，分析HTML元素，构建一颗DOM树(标记化和树构建)。 第二步，用CSS分析器，分析CSS文件和元素上的inline样式，生成页面的样式表。 第三步，将DOM树和样式表关联起来，构建一颗Render树(这一过程又称为Attachment)。 每个DOM节点都有 attach方法 ，接受样式信息，返回一个render对象(又名renderer)。 这些render对象最终会被构建成一颗Render树。 第四步，有了Render树，浏览器开始布局，为每个Render树上的节点确定一个在显示屏上出现的精确坐标。 第五步，Render树和节点显示坐标都有了，就调用每个节点paint方法，把它们绘制出来。 DOM树的构建过程： 构建DOM树是一个渐进过程，为达到更好用户体验，渲染引擎会尽快将内容显示在屏幕上。它不必等到整个HTML文档解析完毕之后才开始构建render数和布局。 这三个过程在实际进行的时候又不是完全独立，而是会有交叉。会造成一边加载，一遍解析，一遍渲染的工作现象。 CSS的解析是从右往左逆向解析的(从DOM树的下－上解析比上－下解析效率高)

前言 使用vue也好有一段时间了，虽然对其双向绑定原理也有了解个大概，但也没好好探究下其原理实现，所以这次特意花了几晚时间查阅资料和阅读相关源码，自己也实现一个简单版vue的双向绑定版本，先上个成果图来吸引各位： 代码： 效果图： 是不是看起来跟vue的使用方式差不多？接下来就来从原理到实现，从简到难一步一步来实现这个SelfVue。由于本文只是为了学习和分享，所以只是简单实现下原理，并没有考虑太多情况和设计，如果大家有什么建议，欢迎提出来。 本文主要介绍两大内容： 1. vue数据双向绑定的原理。 2. 实现简单版vue的过程，主要实现{{}}、v-model和事件指令的功能。 相关代码地址： https://github.com/canfoo/self-vue vue数据双向绑定原理 vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的，那么vue是如果进行数据劫持的，我们可以先来看一下通过控制台输出一个定义在vue初始化数据上的对象是个什么东西。 代码： var vm = new Vue({ data: { obj: { a: 1 } }, created: function () { console.log(this.obj); } }); 结果： 我们可以看到属性a有两个相对应的get和set方法，为什么会多出这两个方法呢？因为vue是通过Object

<main> <div ref="HTML"></div> </main> <script> created() { this.createHtml(); }, methods: { cesi1() { // 这里是因为v-html里的东西，调不到this.methods的东西，因为methods里的代码是编译后在浏览器里运行的， // 内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。 alert("这里不会调用"); }, createHtml() { var str = ` <ul> <li style="color:red" onclick="cesi1()">测试</li> </ul> `; this.$refs.HTML.innerHTML += str // 解决的方式有很多中大家可已自行百度，例如使用事件代理 // 因为绑定的是原生事件本实例采纳的是以下解决方式 function cesi1(){ console.log('完美解决'); } // window.cesi1=function(){ // console.log('完美解决'); // } } } 来源： https://www.cnblogs.com/wgy0528/p/12570347.html