DuCeh的博客

Vue.js 初步入门框架介绍什么是vueVue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。Vue 只关注视图层， 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue 学习起来非常简单，本教程基于 Vue 2.1.8 版本测试。学习vue的前提学习vue之前...

Vue.js 初步入门组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：使用简介注册一个全局组件：Vue.component('组件名称', {配置选项})注册一个私有组件：components:{'组件名称':{配...

Vue.js 初步入门watch：Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化。使用简介watch属性，可以监听data属性域中的数据变化，并可以事实采用函数相应变化。首先在data域中定义一个msg属性，用来被监听。data:{ msg:'hello vue'}接着，我们将data中的数据用v-model实时绑定到自定义的文本框中。&l...

Vue.js 初步入门computed：计算属性，在处理一些复杂逻辑时是很有用。我们在处理一些字符串或者一些表达式的计算的时候，写在插值表达式或者data域中是非常复杂且不美观的，比如这个：{{"abcde".toLocaleUpperCase()}}data:{ result1:"abcde".toLocaleUpperCase()}甚至可以写个方法来计算：methods...

Vue.js 初步入门vue有8大生命周期函数，“生命演变”如图所示：生命周期函数阶段分为四类：创建阶段、挂载阶段、更新阶段，和销毁阶段。beforeCreate:实例创建之前调用created：实例创建成功，此时 data 中的数据显示出来了beforeMount：数据中的 data 在模版中先占一个位置mounted:模版中的 data 数据直接显示出来了beforeUpd...

Vue.js 初步入门功能简介我们在前端编程时，有些功能vue并没有进行封装，我们需要这些功能的时候，就需要自己进行手动封装了，vue提供了自定义指令的功能，让我们可以随心所欲进行自定义指令的封装。举个简单的例子，如果我写了一个简单的表单，我想在一开始加载这个页面的时候就能第一时间聚焦到第一个输入账号的框上，解决方案有两种，第一种就是利用HTML5中input标签自带的属性autofocu...

Vue.js 初步入门日常上网会有这样的场景，当你登录一个网站的时候，可以点击网页上的登录按钮，或者也可以用手指点击回车键登录，js需要监听键盘的按下(onkeydown)或抬起(onkeyup)事件以进行一些操作。vue提供了这样的事件绑定按键的功能。按键修饰符：.enter .tab .delete .esc .space .up .down .left .right使用详情&l...

Vue.js 初步入门细节说明js中的数组在es6中增加了新的过滤器方法，.filter来过滤掉用户不想要的数据部分或者替换成自己想展现的数据。vue中也为我们提供了类似的过滤器用来过滤插值表达{{}}以及其他部分的数据，且它分为全局过滤器和（私有）局部过滤器。全局过滤器：Vue.filter('过滤器名称',function(data,arg1,arg2,...){return 过滤...

Vue.js 初步入门细节说明v-on中的方法名称一般会写作v-on:click=(xxx)，这是v-on:click=(xxx())的神略写法，唯一区别是，要是方法有形参，必须加上括号写上形参。如下：v-on:xxx=(xxx(xx))或者:xxx=(xxx(xx))v-text或者其他属性里的data域变量不用再加列如这样v-text="{{xxx}}"的插值表达式，直接...

Vue.js 初步入门属性介绍v-if ：对传入值进行判断，true则向用户显现元素，false则隐藏起来v-show ：对传入值进行判断，true则向用户显现元素，false则隐藏起来v-if & v-show 使用详解v-if顾名思义是用来做判断是否让元素显示的属性，而vue也提供了另一种v-show来用不同的方式实现这一功能。data:{ hello:"hello...

Vue.js 初步入门属性介绍v-for ：用来对元素、对象等进行遍历的属性使用详解1. v-forv-for1. 用v-for遍历简单数组data:{ list:[1,2,3,4,5,6]},<p v-for="(item,index) in list">{{item}}-----{{index}}</p>其中，list是数据集，item是...

Vue.js 初步入门方法简介使用class绑定样式。使用内联样式style绑定。使用详情原生js中，样式的绑定有两种，第一种是直接在标签属性style里赋予自己想自定义的属性：<div id="container"> <div style = "color:'blue'"> {{hello}} </div>...

Vue.js 初步入门属性介绍v-model ：唯一一个可以实现双向数据绑定的属性使用详解1.v-model原生js中，要是想将标签元素上嵌入自定义数据，必须增加一个data-*的属性来嵌入：<button type="button" data-myData = "hello vue.js" onclick="handleBtn(this)">按钮</button...

Vue.js 初步入门修饰符介绍.stop ：阻止冒泡

Vue.js 初步入门属性介绍v-bind : 用于给控件标签属性进行动态数据域的绑定v-on ： 用于给控件标签事件进行方法域的绑定使用详解1. v-bindvue中，对于标签属性的数据绑定操作是无法生效的，无论是以下代码块中任意一种的错误操作都无法绑定数据域中的msg对应的数据：msg:"hello vue.js"<input type="text" value...

Vue.js 初步入门属性介绍v-cloak : 用于将延迟而出现的数据渲染问题进行附加优化v-text : 用于将延迟而出现的数据渲染问题进行属性化优化v-html : 用于将数据域的HTML语句无法解析问题进行处理使用详情1. v-cloak这片代码块中的msg数据可能会因为网络或者设备问题出现延迟加载，相应缓慢的问题，如图所示：<p>{{msg}}<...

Vue.js 初步入门Vue.js Ajax(axios)Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。所以必须先引入axios.js文件。但凡知道一点JQuery基础的，都会对ajax请求有所了解，下面写一个简单的ajax请求：$.ajax({ url:"demo_test.txt", type:'GET', data:{k1:v1,k2:v...