vue.js
Vivianluolita
这个作者很懒,什么都没留下…
展开
-
前端安装
1.node http://www.runoob.com/nodejs/nodejs-install-setup.htmlhttp://www.cnblogs.com/zhouyu2017/p/6485265.html翻译 2017-08-24 20:32:57 · 264 阅读 · 0 评论 -
全局配置(Vue.extend( options ))
1 Vue.extend( options )用法: 使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。data 选项是特例,需要注意 - 在 Vue.extend() 中它必须是函数div id="mount-point">div>// 创建构造器var Profile = Vue.extend({ template: '{{firstName翻译 2018-01-10 14:48:58 · 3421 阅读 · 2 评论 -
vue学习笔记(v-text v-html v-on v-model)-panda
1 v-text v-htmlh1>v-text v-htmlh1> div id="app"> span>{{message}}span> span v-text='message'>span> span v-html='todo'>span> div> script type="text/javascript">翻译 2018-01-15 17:10:25 · 553 阅读 · 0 评论 -
vue学习笔记(v-if v-else v-show v-for)-panda
第一季 vue基本指令v-if v-else v-showh1>v-if v-else v-showh1> div id="app"> div v-if='islogin'>你好 leediv> div v-else>请登录div> div v-show='isshow'>你好 v-showdiv> div> sc翻译 2018-01-15 14:30:31 · 1340 阅读 · 0 评论 -
vscode相关
http://blog.csdn.net/qq_26562641/article/details/78604129原创 2017-12-26 14:52:25 · 347 阅读 · 0 评论 -
Vue基础(vue实例data)
一、创建一个 Vue 的实例 (1)MVVM: http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html (2)每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的:var vm = new Vue({ // 选项})(3)API 文档(浏览完整的选项列表): 当创建一个 Vue 实例时,你可以传入一个选项对象。原创 2017-12-11 17:46:33 · 9298 阅读 · 0 评论 -
Vue基础(组件)
什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。所有的 Vue 组件同时也都是 Vue 的实例,所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期转载 2017-12-27 17:04:58 · 572 阅读 · 0 评论 -
Vue基础(列表渲染)
列表渲染 用 v-for 把一个数组对应为一组元素: (1)我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名。<ul id="example-1"> <li v-for="item in items"> {{ item.message }} <翻译 2017-12-12 19:33:32 · 493 阅读 · 0 评论 -
Vue基础(条件渲染)
v-if (1)在字符串模板中,比如 Handlebars,我们得像这样写一个条件块:<!-- Handlebars 模板 -->{{#if ok}} <h1>Yes</h1>{{/if}}在 Vue 中,我们使用 v-if 指令实现同样的功能:<h1 v-if="ok">Yes</h1>也可以用 v-else 添加一个“else 块”:<h1 v-if="ok">Yes</h1><h1翻译 2017-12-12 15:05:05 · 513 阅读 · 0 评论 -
Vue基础(Class 与 Style 绑定)
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。绑定 HTML Class (1)对象语法 1、我们可以传给 v翻译 2017-12-12 11:46:56 · 1156 阅读 · 1 评论 -
Vue基础(计算属性和观察者)
计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:<div id="example"> {{ message.split('').reverse().join('') }}</div>在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次翻译 2017-12-11 22:17:32 · 476 阅读 · 0 评论 -
Vue基础(表单输入绑定)
基础用法 你可以用 v-model 指令在表单 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。 v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。翻译 2017-12-20 16:17:17 · 785 阅读 · 0 评论 -
Vue基础(模板语法)
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,在应用状态改变时,Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。如果你熟悉虚拟 DOM 并且翻译 2017-12-11 20:40:44 · 394 阅读 · 0 评论 -
Vue基础(事件处理)
http://www.jb51.net/article/95802.htm监听事件 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。<div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked {{翻译 2017-12-13 22:03:25 · 716 阅读 · 0 评论 -
Vue2.0学习文档(Vue介绍)
一、引入 <script src="http://cdn.bootcss.com/vue/2.3.4/vue.js"></script> <script src="https://unpkg.com/vue"></script>二、简单指令 1、起步文本插值<div id="app"> {{message}} </div>var app=new Vue({翻译 2017-12-08 16:34:39 · 8134 阅读 · 0 评论 -
Vue.js安装配置
1.安装(命令行工具) vue.js官网2.main.js报错解决 main.js报错3.安装依赖 cnpm install 会多出node_modules文件夹4.在src目录下进行开发APP.vue5.npm 控制node版本 http://www.jianshu.com/p/07c3456e875a node安装express: http://xiaoyaojones.blog.原创 2017-08-30 21:10:27 · 300 阅读 · 0 评论 -
vue.js简单实例
1.理解项目重构 https://mp.weixin.qq.com/s?__biz=MzA3NTYzODYzMg==&mid=2653577777&idx=1&sn=4b5377051bd849b85af17bcf8c05174c&scene=4#wechat_redirecthttps://segmentfault.com/a/11900000040600342.vue基本指令 http://原创 2017-08-30 23:01:08 · 481 阅读 · 0 评论 -
Vue.js的helloworld-demo
1.webstrome配置命令行 http://blog.csdn.net/qq350490977/article/details/701576272.调试命令行 https://zhidao.baidu.com/question/179323188974843484.html3、http://www.cnblogs.com/mq0036/p/5243209.html原创 2017-09-04 23:00:09 · 455 阅读 · 0 评论 -
vue学习笔记(v-text v-html v-on v-model)-panda
1.v-bindh1>v-bindh1> div id="app"> img v-bind:src="imgSrc" width="200px"> div> script type="text/javascript"> var app= new Vue({ el:'#app', data转载 2018-01-29 13:04:39 · 395 阅读 · 0 评论