新开篇关于vue
2017-03-03 18:18
148 查看
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "PingFang SC Semibold" }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "PingFang SC Semibold"; min-height: 17.0px }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px "PingFang SC Semibold" }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "PingFang SC Semibold" }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px "PingFang SC Semibold" }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "PingFang SC"; color: #525252 }
p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px "PingFang SC Semibold" }
p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px "PingFang SC Semibold"; color: #ff906b }
p.p9 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "PingFang SC Semibold"; color: #ff906b; min-height: 17.0px }
p.p10 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px "PingFang SC Semibold" }
p.p11 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px "PingFang SC Semibold"; min-height: 20.0px }
p.p12 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Monaco; color: #42b983 }
p.p13 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Monaco; color: #2973b7 }
p.p14 { margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px "PingFang SC"; color: #2973b7 }
p.p15 { margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px "PingFang SC"; color: #2973b7 }
p.p16 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px "PingFang SC Semibold"; min-height: 18.0px }
p.p17 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px "PingFang SC Semibold"; color: #000000 }
p.p18 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px "PingFang SC Semibold"; color: #000000; min-height: 20.0px }
p.p19 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px "PingFang SC" }
p.p20 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px "PingFang SC" }
p.p21 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px "PingFang SC Semibold"; min-height: 28.0px }
span.s1 { font: 12.0px "PingFang SC" }
span.s2 { font: 19.0px "PingFang SC" }
span.s3 { font: 18.0px "PingFang SC" }
span.s4 { font: 20.0px "PingFang SC" }
span.s5 { font: 17.0px "PingFang SC" }
span.s6 { color: #000000 }
span.s7 { font: 12.0px Monaco; background-color: #f8f8f8 }
span.s8 { background-color: #f8f8f8 }
span.s9 { font: 13.0px "PingFang SC" }
span.s10 { font: 13.0px "PingFang SC"; color: #000000 }
span.s11 { font: 14.0px "PingFang SC" }
span.s12 { font: 14.0px "PingFang SC"; color: #000000 }
span.s13 { color: #2973b7; background-color: #f8f8f8 }
span.s14 { color: #42b983; background-color: #f8f8f8 }
span.s15 { font: 12.0px "PingFang SC"; background-color: #f8f8f8 }
span.s16 { font: 20.0px "PingFang SC"; color: #000000 }
span.s17 { color: #525252; background-color: #f8f8f8 }
span.s18 { font: 9.0px Monaco; background-color: #f8f8f8 }
span.s19 { font: 10.0px Monaco; background-color: #f8f8f8 }
span.s20 { font: 14.0px "PingFang SC"; color: #b70700 }
span.s21 { font: 12.0px "PingFang SC"; color: #525252; background-color: #f8f8f8 }
span.Apple-tab-span { white-space: pre }
参考链接:http://cn.vuejs.org/v2/guide/instance.html
了解vue组件的生命周期:
1.beforeCreate 即将创建
2.created 创建
3.beforeMount 即将挂载
4.mount。挂载
5.beforeUpdate 即将更新
6.updated 更新
7.beforeDestory 即将摧毁
8.destoryed 消灭
上述方法都能够在 el 方法同层内进行重写
构造器方法 new Vue()
扩展方法 Vue.extend()
属性以及方法
属性: 属性的任何设置都会影响到原始数据
对象.$属性 就等于其属性 只不过是用来防止混淆的
对象.$方法 也是同样
关于vue的模板语法
插值: 使用{{}}方法插入值
html: v-html 进行标签修饰即可
属性绑定 v-bind:需要绑定的属性 = “被绑定属性”
关于vue过滤器部分
该部分可以在filters方法内进行写入,
也能够在computed内使用计算属性(计算属性能够在后期进行了解)进行过滤
关于vue计算属性
计算属性在标签中也是实用{{}}来进行调用,然后在computed方法内进行实现,以及return进行过滤。此处的computed方法专门用于存储方法
*计算方法能够实现的,methods也能够实现。然而他们的不同在于计算属性是基于其依赖缓存,即传入参数不变,方法不会掉用,而是使用缓存进行返回
$watch方法 ,在watch内声明的属性在发生变化之后能够实现其后实现的方法,即属性变化,方法即被掉用,参见watch.html
关于计算属性setter
类似于oc内的get set方法,能够在方法的set get内进行数据处理
同时,属性也要在computed内进行方法的重写
关于观察watchers
用于监视设定的属性,属性改变后即会触发相关方法进行处理。
关于html与css,class的绑定
class
对象语法绑定:使用v-bind方法进行class绑定,可以与对象进行绑定,包括复杂对象
数组语法绑定:类似于对象绑定,只不过对象变为数组
组件绑定:即上述两种方式在组件上的应用
css
使用v-bind:style 方式进行绑定css属性
对象语法绑定<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
数组语法绑定<div v-bind:style="styleObject"></div>
styleObject对象由data内进行声明
自动添加前缀
关于条件渲染v-if
普通v-if <h1 v-if="ok">Yes</h1> ok需要返回布尔值
<template>中的v-if template标签酱整个需要条件 渲染的部分都包含起来进行判断,然后决定其内部的全部标签的渲染
v-else 使用后得到类似于if 的条件渲染效果
v-else-if 使用后得到类似于elseif条件渲染效果
key控制条件渲染的复用 :key值设置成同样或者未设置,组件将被复用,ke设置成不一样时,组件将被重新初始化,并且无保存
v-show于v-if:show方法大体与if相同,但是不支持template标签。并且if为惰性,未执行部分时不会进行编译,但show的话,所有情况都会编译保留,对于不同的情况只是作出简单的css切换
关于列表渲染v-for
基本用法:<li v-for="todo in todoList" ><div>{{todo.message}}</div></li>
template用法:该用法类似于template的if版本,能将多个标签进行列表渲染
对象迭代:同样能够对对象内的各个属性进行for,参数能够包含参键值,键名与索引
整数迭代:for n in 10
组件使用 : 暂时未能明白
另:数组更新检测办法:
变异方法会引起视图更新,非变异方法则不会引起视图的更新,(变异方法会引起原数据的变化,非变异方法则是对数据的副本进行操作),另外一种选择则是使用计算属性
关于事件处理器
监听事件 <button v-on:click="counter += 1">增加 1</button>
方法事件处理器:将处罚方法写在methods内
内联处理器方法:带有参数传值的方法事件处理器
事件修饰符:查看api
按键修饰符:查看api
按钮修饰符:查看api
关于表单控件绑定:v-model
基础用法
文本:直接使用{{}}方法
多行文本:将data属性设置为数组即可
复选框:v-model同值时,将data属性设置为数组就可以完成复选
单选按钮:input的type设置为radio,然后v-model相同就可以设置为单选按钮
选择列表
单选列表:data绑定bind到一个字符串类型
多选列表:data绑定bind到一个数组类型
动态选项:将data内的数组使用v-for方式在标签上列表渲染就可以得到,当然value也要进行数据绑定
绑定value:大致就是使用v-model 与value进行配合使用
复选框:进行复杂的数据绑定
单选按钮:同复选框
选择列表设置:即进行value的数据绑定,但是绑定的为对象
修饰符与组件:暂时未能明白
示例代码部分
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "PingFang SC Semibold"; min-height: 17.0px }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px "PingFang SC Semibold" }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "PingFang SC Semibold" }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px "PingFang SC Semibold" }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "PingFang SC"; color: #525252 }
p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px "PingFang SC Semibold" }
p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px "PingFang SC Semibold"; color: #ff906b }
p.p9 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "PingFang SC Semibold"; color: #ff906b; min-height: 17.0px }
p.p10 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px "PingFang SC Semibold" }
p.p11 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px "PingFang SC Semibold"; min-height: 20.0px }
p.p12 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Monaco; color: #42b983 }
p.p13 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Monaco; color: #2973b7 }
p.p14 { margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px "PingFang SC"; color: #2973b7 }
p.p15 { margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px "PingFang SC"; color: #2973b7 }
p.p16 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px "PingFang SC Semibold"; min-height: 18.0px }
p.p17 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px "PingFang SC Semibold"; color: #000000 }
p.p18 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px "PingFang SC Semibold"; color: #000000; min-height: 20.0px }
p.p19 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px "PingFang SC" }
p.p20 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px "PingFang SC" }
p.p21 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px "PingFang SC Semibold"; min-height: 28.0px }
span.s1 { font: 12.0px "PingFang SC" }
span.s2 { font: 19.0px "PingFang SC" }
span.s3 { font: 18.0px "PingFang SC" }
span.s4 { font: 20.0px "PingFang SC" }
span.s5 { font: 17.0px "PingFang SC" }
span.s6 { color: #000000 }
span.s7 { font: 12.0px Monaco; background-color: #f8f8f8 }
span.s8 { background-color: #f8f8f8 }
span.s9 { font: 13.0px "PingFang SC" }
span.s10 { font: 13.0px "PingFang SC"; color: #000000 }
span.s11 { font: 14.0px "PingFang SC" }
span.s12 { font: 14.0px "PingFang SC"; color: #000000 }
span.s13 { color: #2973b7; background-color: #f8f8f8 }
span.s14 { color: #42b983; background-color: #f8f8f8 }
span.s15 { font: 12.0px "PingFang SC"; background-color: #f8f8f8 }
span.s16 { font: 20.0px "PingFang SC"; color: #000000 }
span.s17 { color: #525252; background-color: #f8f8f8 }
span.s18 { font: 9.0px Monaco; background-color: #f8f8f8 }
span.s19 { font: 10.0px Monaco; background-color: #f8f8f8 }
span.s20 { font: 14.0px "PingFang SC"; color: #b70700 }
span.s21 { font: 12.0px "PingFang SC"; color: #525252; background-color: #f8f8f8 }
span.Apple-tab-span { white-space: pre }
参考链接:http://cn.vuejs.org/v2/guide/instance.html
了解vue组件的生命周期:
1.beforeCreate 即将创建
2.created 创建
3.beforeMount 即将挂载
4.mount。挂载
5.beforeUpdate 即将更新
6.updated 更新
7.beforeDestory 即将摧毁
8.destoryed 消灭
上述方法都能够在 el 方法同层内进行重写
构造器方法 new Vue()
扩展方法 Vue.extend()
属性以及方法
属性: 属性的任何设置都会影响到原始数据
对象.$属性 就等于其属性 只不过是用来防止混淆的
对象.$方法 也是同样
关于vue的模板语法
插值: 使用{{}}方法插入值
html: v-html 进行标签修饰即可
属性绑定 v-bind:需要绑定的属性 = “被绑定属性”
关于vue过滤器部分
该部分可以在filters方法内进行写入,
也能够在computed内使用计算属性(计算属性能够在后期进行了解)进行过滤
关于vue计算属性
计算属性在标签中也是实用{{}}来进行调用,然后在computed方法内进行实现,以及return进行过滤。此处的computed方法专门用于存储方法
*计算方法能够实现的,methods也能够实现。然而他们的不同在于计算属性是基于其依赖缓存,即传入参数不变,方法不会掉用,而是使用缓存进行返回
$watch方法 ,在watch内声明的属性在发生变化之后能够实现其后实现的方法,即属性变化,方法即被掉用,参见watch.html
关于计算属性setter
类似于oc内的get set方法,能够在方法的set get内进行数据处理
同时,属性也要在computed内进行方法的重写
关于观察watchers
用于监视设定的属性,属性改变后即会触发相关方法进行处理。
关于html与css,class的绑定
class
对象语法绑定:使用v-bind方法进行class绑定,可以与对象进行绑定,包括复杂对象
数组语法绑定:类似于对象绑定,只不过对象变为数组
组件绑定:即上述两种方式在组件上的应用
css
使用v-bind:style 方式进行绑定css属性
对象语法绑定<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
数组语法绑定<div v-bind:style="styleObject"></div>
styleObject对象由data内进行声明
自动添加前缀
关于条件渲染v-if
普通v-if <h1 v-if="ok">Yes</h1> ok需要返回布尔值
<template>中的v-if template标签酱整个需要条件 渲染的部分都包含起来进行判断,然后决定其内部的全部标签的渲染
v-else 使用后得到类似于if 的条件渲染效果
v-else-if 使用后得到类似于elseif条件渲染效果
key控制条件渲染的复用 :key值设置成同样或者未设置,组件将被复用,ke设置成不一样时,组件将被重新初始化,并且无保存
v-show于v-if:show方法大体与if相同,但是不支持template标签。并且if为惰性,未执行部分时不会进行编译,但show的话,所有情况都会编译保留,对于不同的情况只是作出简单的css切换
关于列表渲染v-for
基本用法:<li v-for="todo in todoList" ><div>{{todo.message}}</div></li>
template用法:该用法类似于template的if版本,能将多个标签进行列表渲染
对象迭代:同样能够对对象内的各个属性进行for,参数能够包含参键值,键名与索引
整数迭代:for n in 10
组件使用 : 暂时未能明白
另:数组更新检测办法:
变异方法会引起视图更新,非变异方法则不会引起视图的更新,(变异方法会引起原数据的变化,非变异方法则是对数据的副本进行操作),另外一种选择则是使用计算属性
关于事件处理器
监听事件 <button v-on:click="counter += 1">增加 1</button>
方法事件处理器:将处罚方法写在methods内
内联处理器方法:带有参数传值的方法事件处理器
事件修饰符:查看api
按键修饰符:查看api
按钮修饰符:查看api
关于表单控件绑定:v-model
基础用法
文本:直接使用{{}}方法
多行文本:将data属性设置为数组即可
复选框:v-model同值时,将data属性设置为数组就可以完成复选
单选按钮:input的type设置为radio,然后v-model相同就可以设置为单选按钮
选择列表
单选列表:data绑定bind到一个字符串类型
多选列表:data绑定bind到一个数组类型
动态选项:将data内的数组使用v-for方式在标签上列表渲染就可以得到,当然value也要进行数据绑定
绑定value:大致就是使用v-model 与value进行配合使用
复选框:进行复杂的数据绑定
单选按钮:同复选框
选择列表设置:即进行value的数据绑定,但是绑定的为对象
修饰符与组件:暂时未能明白
示例代码部分
相关文章推荐
- 关于boost的开篇
- 开篇,从Kingofark那转过来的 关于学习C++和编程的50个观点 2003修订版
- 转:关于swift 开篇的内容
- 关于vue学习中的一些
- 关于Vue.js 使用v-cloak后仍显示变量的解决方法
- 关于vue指令(directive)
- 关于学习OpenCV的学习笔记系列之-- 开篇
- [Vuejs] 关于vue-router里面的subRoutes
- 关于Vue.js 2.0 的 Vuex 2.0,你需要更新的知识库
- 开篇之作 关于c++中多个基类有相同的方法的解决办法
- 关于公开产品想法这件事的开篇
- P2P之我见,关于打洞的学问-------开篇
- 关于博客的开篇
- 开篇_关于这个博客
- 关于二维条码技术的思考 开篇
- 开篇:关于FlagshipEngine
- 不只是休闲:关于体感游戏的一些思考(一)--- 开篇和“随身”物件
- 关于开篇
- 关于vue的基础概念
- 关于Vue.js数组的变动观测0