vue

模板解析 基本流程 1、将el的所有子节点取出，添加到一个新建的文档fragment对象中 function MVVM (options) { this.$options = options var data = this._data = this.$options.data var me = this // 创建一个编译对象 this.$compile = new Compile(options.el || document.body, this) } function Compile (el, vm) { this.$vm = vm this.$el = this.isElement(el) ? el : document.querySelector(el) if (this.$el) { this.$fragment = this.node2fragment(this.$el) //取出el元素中所有的子节点保存到一个fragment对象中 this.init() this.$el.appendChild(this.$fragment) } } Compile.prototype = { node2fragment: function (el) { var fragment = document.createDocumentFragment(), child = this

最近使用vue做项目的时候，每次运行程序都会出现很多格式问题，有的问题可以很简单的看明白，例如：Expected indentation of 8 spaces but found 10，删掉两个空格就可以，还有一些不明白在说什么，在此做一个总结： Closing curly brace does not appear on the same line as the subsequent block.意思是右括号需要跟下一个代码块在同一行 Failed to mount component: template or render function not defined.Vue文件中template内需要包裹起来，一般使用div Block must not be padded by blank lines.多了空行，需要删掉 来源： CSDN 作者： webnet_ 链接： https://blog.csdn.net/webnet_/article/details/104510978

在render函数中使用判断可以提高 页面的多样性 // 这是render函数的使用方法 export default{ data(){ return{ isRed:true, arr:[1,2,3,4], inputValue:"" } }, // h 最终创建的是一个元素 // 第一个参数div 是表示创建一个div区域的元素 // 第二个参数class表示的是这个div上有一个属性 // 第三个参数可以是数组，表示div元素下的子元素 render(h){ // 在render函数中进行判断 if (this.isRed==true){ return h('div', { //第二个参数 class: { 'is-red': this.isRed } }, // 第三个参数 [h('p', '这是一个render true')]); }else{ return h('div', { //第二个参数 class: { 'is-red': this.isRed } }, // 第三个参数 [h('p', '我也是render函数isRed的值是false')]); } } } 来源： https://www.cnblogs.com/IwishIcould/p/12423399.html

安装node.js ,直接点击下一步至完成安装 Node.js 下载去 官网 即可 安装完成后打开cmd,输入命令 node -v 查看node版本号；输入命令 npm -v 查看npm版本号；以此来确定node安装成功 安装Vue-cli,输入命令 npm install --global vue-cli 安装完成后 ，输入命令 vue -V （这里的- V 必须大写）并回车，查看vue的版本号，测试是否安装成功 确定项目所在路径，比如我的项目是在D盘的某个文件夹中，路径是 D:\Vue项目实战\test ，进入该目录。（标红是要输入的命令） 输入命令 vue init webpack 创建项目，然后根据提示输入项目名称，项目作者等，标红部分为要填写的，或者要选择的内容 npm install 安装所有的模块 打开test文件夹，即可看到这些模块 输入命令 npm run dev ,启动项目 上个图中最后的网址，即可看见一下页面，项目创建成功。但是每一次都得手动输入网址很麻烦，我们再接着往下看 在vscode中打开test文件夹，找到config/index文件，按照图片提示修改 这样一来，在vscode界面用快捷键 ctrl+J 打开调试终端，直接输入命令 npm run dev ,就可以直接自动打开浏览器了 来源： CSDN 作者： weixin_41826065 链接：

< input type = "text" id = "text" > < p id = "show" > < / p > < script > var text = document . getElementById ( "text" ) , show = document . getElementById ( "show" ) ; var model = { } ; Object . defineProperty ( model , "name" , { configurable : true , // 默认为 false，决定该属性能不能被删除 get : function ( ) { // 当访问该属性时，此方法会被执行 console . log ( "model.name 被访问了" ) ; } , set : function ( newValue ) { // 当属性值被修改时，该方法会被执行 console . log ( "model.name 新值是：" , newValue ) ; text . value = newValue ; //修改view show . innerText = newValue ; } } ) ; text . oninput = function ( ) { model . name = this . value ; /

昨天做的tabs窗口，非常满意，今天乘胜追击，把它做成了可以根据自身大小改变显示样式，自身宽度过小时，tab页可以浮动停靠其一侧。具体效果： 左侧 右侧 向来喜欢简单明了的东西，所以想实现的简单一点，无奈现实不允许啊，功能实在有一丢丢复杂。硬着头皮搞了整整一下午，终于完成。 左侧跟右侧窗口，要使用同一个控件，尽量增加代码的可复用性，控件的状态就有些多：正常显示（普通tabs窗口），列表（显示图标跟标题，点击时弹出tab页），迷你列表（只显示图标，点击时弹出tab页）。 控件在界面左侧时，tab页弹出在其右侧。反之，控件在界面右侧时，tab页弹出在其左侧。 从正常tabs，缩小到列表显示时，所有tab都是不被激活的。从列表放大到正常tabs，要默认一个标签（tab）是被选中的。 这么多的状态要求，代码很容易就乱掉。不过还好，设计模式中有一个叫“状态模式”的，可以很好的解决这个问题，缺点就是初期代码量稍大，优点是便于后期管理。 昨天做了两个tabs控件，一个是WidgetTabs，另外一个是PageTabs，后者现在还能满足我们的需求，只需要修改WidgetTabs这一个就行。 昨天实现的一些代码删掉，首先重写模板，根据模板写脚本代码，可以让脚本代码更实用些，就像测试驱动的开发里，先写测试再写代码，是一个道理。 还有，差点忘了。昨天的代码里，把所有的style样式都放在style

对Vue进一步理解 1、Vue的特点（数据的双向绑定和组件化） A.响应式：可以实现数据和视图层的双向绑定，可以只关心数据，试图会自动同步，减少了DOM 操作 B.组件化、模块化：将大片的代码拆分成若干个小的模块，增强了代码的复用性和可读性，便于管理 2、vue与后台交互的方法 Get post put delete Get：将提交的数据放在URL中，即以明文的方式传递参数数据（以？分割URL地址和数据，参数间以&相连接）； 因为受URL长度限制，传递的数据量较小，最大不超过2kB; 会产生一个TCP数据包，会把header和data一并发出去，服务器响应200并传回相应的数据 Post：将提交的数据放在请求体中； 传递的数据量较大，一般不受限制，（大小取决于服务器的处理能力）； 会产生两个TCP数据包，浏览器会先把header发出去，浏览器响应100（continue）后，浏览器再发送data，服务器响应200，并回传相应的数据 get在浏览器回退的时候是无害的，而post会再次提交请求；get请求参数会被完整的保留在浏览器的历史记录中，而post不会；对于参数的数据类型，Get只接收ASCII字符，而post没有限制；get参数通过URL传递，post放在request body中 Post和get本质上是没有区别的；GET和POST是HTTP协议中两种发送请求的方法

注册组件 注册组件的基本步骤 组件的使用分成三个步骤： 创建组件构造器：调用Vue.extend()方法 注册组件：调用Vue.component()方法 使用组件：在Vue实例的作用范围内 我们来看看通过代码如何注册组件 <div id="app"> <!--3.使用组件--> <my-cpn></my-cpn> <script src="../js/vue.js"></script> <script> // 1.创建组件构造器对象 const cpnC = Vue.extend({ template: ` <div> <h2>我是标题</h2> <p>我是内容, 哈哈哈哈</p> <p>我是内容, 呵呵呵呵</p> </div>` }) // 2.注册组件 Vue.component('my-cpn', cpnC) const app = new Vue({ el: '#app', data: { message: '你好啊' } }) </script> 查看运行结果： 和直接使用一个div看起来并没有什么区别。 但是我们可以设想，如果很多地方都要显示这样的信息，我们是不是就可以直接使用 <my-cpn></my-cpn> 来完成呢？ 注册组件步骤解析 Vue.extend()： 调用Vue.extend()创建的是一个组件构造器。 通常在创建组件构造器时

简介 话不多说，把手拿来。 珍爱生命，远离后台。 背景 在前后端分离模式项目开发过程中，前端的界面展示、交互逻辑往往需要后台接口数据支撑，然而万恶的后台总跟不上有我们美丽的前端小姐姐进度。 于是我们不由得仰天长叹，难道就没有即无需依赖后台又能完美展示界面数据，即能保证前端交互的完整性又不太费事儿的方法吗？ 答案当然是有的~~~~ 下面就请我们的主角登场 Mockjs 介绍 Mock官网首页是这么定义的：生成随机数据，拦截 Ajax 请求。 传送门 & 示例 作用 减少开发成本 前后端分离其实从增加了开发成本，只是在它带来的优势上可以让我们忍受这种成本，但攻克这方面成本的目标却从未停止 剥离前后端开发时的耦合性 做完本阶段的开发详设之后，前端就可以开时本阶段的开发了，由于基础设定已经在详设阶段完成统一，前后端在开发过程中应该是可以完全独立的。但实际开发中前端往往留着某些接口回执逻辑等着与后台对接后填充，无法完全完成前端自身的界面展示及交互逻辑。而使用mockjs模拟接口及数据前端可以在最大程度上彻底分离开发时与后台的耦合成本，在开发时就基本完成全部前端逻辑编写 减少前后端接口对接时间 前后端完成独立开发后，就进入了前后台对接阶段，很多项目组就在此阶段会花费大量的调试时间及成本。然而实际上，如果前端做完了数据及交互的逻辑，后台完成了所有接口自测，此阶段应该是非常迅速的 前端自建项目演示

vue如何加入百度联盟广告，可以参考 ： http://www.cnblogs.com/beileixinqing/p/8379184.html 这里讲述vue如何加入百度ssp媒体的广告 这里是百度异步加载代码的说明 由于vue不能直接在页面中放置很多段js,script标签，所以最好的办法是采用异步加载的方式，vue引用的js只能放在index页面中，所以我们采用两段式使用方式，在head标签里引入 这里两端js代码使用方式注意一下，引用的js跟一段代码使用方式引用的js是不一样的。 我们复制两段式js代码放在vue的mounted下 (function() { var s = "_" + Math.random().toString(36).slice(2); document.write('<div id="' + s + '"></div>'); (window.slotbydup=window.slotbydup || []).push({ id: '121456464798', container: s, size: '20,3', display: 'inlay-fix' }); })(); 把前两行可以注释掉，把container改成我们自己的container id (function() { (window.slotbydup=window.slotbydup