Vuejs 源码:https://github.com/zhuangZhou/vuejs 下载Vue.js 官网:http://vuejs.org live-server使用 live-server是一个简单的服务器,具有热更新 使用npm进行全局安装 npm install -g live-server 在项目目录中启动 liver-server 内部指令 v-if & v-else & v-show 1.v-if v-if 用来判断是否在加载HTML的DOM,比如模拟用户登录 <…

1.环境配置 安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装完成后在命令行执行以下命令查看npm包管理器版本 npm -v npm中文文档:https://www.npmjs.cn/ 配置淘宝镜像 npm install cnpm -g --registry=https://registry.npm.taobao.org 然后执行 cnpm -v 查看版本信…

1.插值 A:<span>TEXT:{{text}}</span> {{text}}会被相应的数据类型text属性值替换,当text值改变时候,文本中的值也会相应的发生变化 B:有时候只需要渲染一次数据,后续的数据变化不再关心,可以通过"*"实现 <span>TEXT:{{*text}}</span> C:双大括号标签会将里面的值作为字符串来处理,如果值是HTML代码,可以使用过3个大括号表示 2.表达式 表达式: <!-- 合法表…

1.Vue.js介绍 当前前端三大主流框架:Angular.React.Vue.React前段时间由于许可证风波,使得Vue的热度蹭蹭地上升.另外,Vue友好的API文档更是一大特色.Vue.js是一个非常轻量级的工具,与其说是一个MVVM框架,不如说是一个js库.Vue.js具有响应式编程和组件化的特点.响应式编程,即保持状态和视图的同步,状态也可以说是数据吧:而其组件化的理念与React则一样,即“一切都是组件,组件化思想方便于模块化的开发,是前端领域的一大趋势. 2.内部指令 2-1.v-…

V-on指令 一.概述 v-on是用来绑定事件监听器,用在普通元素上时,只能监听原生 DOM 事件.用在自定义元素组件上时,也可以监听子组件触发的自定义事件. 在监听原生 DOM 事件时,方法以事件为唯一的参数.如果使用内联语句,语句可以访问一个 $event 属性:v-on:click="handle('ok', $event)". 示例 <!-- 方法处理器 --> <button v-on:click="doThis"></but…

V-model指令 摘要   限制: v-model只能用在:<input>    <select>    <textarea>  <components> 修饰符 .lazy - 取代 input 监听 change 事件 .number - 输入字符串转为数字 .trim - 输入首尾空格过滤 基础用法 v-model 会忽略所有表单元素的 value.checked.selected 特性的初始值而总是将 Vue 实例的数据作为数据来源.你应该通过 J…

V-bind指令 一.概述 v-bind  主要用于属性绑定,比方你的class属性,style属性,value属性,href属性等等,只要是属性,就可以用v-bind指令进行绑定. 示例: <!-- 绑定一个属性 --> <img v-bind:src="imageSrc"> <!-- 缩写 --> <img :src="imageSrc"> <!-- 内联字符串拼接 --> <img :src=&…

在做select2插件的时候遇到一些坑,最终解决如下: Vue.directive('select2', { inserted: function (el, binding, vnode) { var options = binding.value || {}; var defaultOpt = { placeholder: "--请选择--", allowClear: true }; options = _.assign(defaultOpt, options); $(el).sel…

v-on绑定事件监听器 直接撸代码: <div id="app"> <h2>计数器</h2> number:{{number}} <button v-on:click="add">+</button> <button @click="subtract">-</button> </div> <script src="https://cdn…

v-if.v-else-if.v-else以及v-show 条件指令v-if.v-else-if.v-else 类似于JavaScript里的if.else-if.else,这三个指令根据表达式的值对DOM/组件进行渲染/销毁. 值得注意的是,v-else-if必须跟在v-if之后,v-else必须跟在v-else-if或者v-if之后. 如果想一次性判断多个元素,可以将他们包裹在template之内,使用条件指令操作外层的template,template并不会包含在最终的渲染结果中. <di…