初次接触vue,我是怎么学习的

又到了review的时候,话不多说,这次放出,最初的学习笔记。
Vue
我将Vue看成了一门新得编程语言来学,基础的语法知识我认为就以下这些重点。
一、数据绑定语法
1、数据绑定最基础的形式是文本插值,使用 { {}} 语法(双大括号),三个大括号标签可以输出真的HTML字符串。双大括号标签也可以用在 HTML 特性 (Attributes) 内,


也可以实现单次插值绑定,{ { * msg }}。
js
var data={msg:‘Hello Vue.js!’};
new Vue({
el: ‘#demo’,
data: data
})
data.msg=“Hello World!”;
html

This will never change: { { msg }}
This will never change: { {* msg }}
This will never change: Hello World! This will never change: Hello Vue.js! var data={msg:'Hello'}; 2、过滤器,以管道符|表示,可以串联多个滤波器 内置的过滤器。其实只是一个JavaScript函数。 { {msg | lowercase | capitalize}}串联起来没弄通 带有v-的指令,计算属性computed var vm = new Vue({ el: '#example', data: { a: 1 }, computed: { // 一个计算属性的 getter b: function () { // `this` 指向 vm 实例 return this.a + 1 } } })
a={ { a }}, b={ { b }}
a=1,b=2

二、Class与Style绑定
class对象,v-bind:class一个对象,以动态地切换class。v-bind:calss指令可以与普通的class特性共存。可以将数组传给它,用来应用一个class列表。
v-bind:style对象语法,它是一个JavaScript对象,也可绑定数组

Style 对象语法
var vm = new Vue({ el: 'div', data: { activeColor: 'red', fontSize: 30 } })

三、渲染指令
渲染指令包括,v-if、v-show、v-else、v-for、template v-if、template v-for…用法同平常的,在其后加条件什么的。加入template元素后,可以切换多个元素,这里所说的多个元素,就是不局限于单条指令。

Title

Paragraph 1

Paragraph 2

Yes

另外,v-show指令,跟v-if存在区别的,详见博客http://blog.csdn.net/qq_24122593/article/details/52764224

四、表单控件绑定 在input标签里实现
可以在表单的input元素上使用v-model来创建双向数据绑定。会根据input元素类型自动选取正确的绑定模式。placeholder为默认显示提示。
check-box可以实现多个勾选逻辑值,v-model绑定验证,绑定值的时候用v-bind。radio。
重要的是select,
例如动态选项,加入v-for渲染,代码如下

{ { option.text }} Selected: { { selected }}

new Vue({
el: ‘div’,
data: {
selected: ‘A’,
options: [
{ text: ‘One’, value: ‘A’ },
{ text: ‘Two’, value: ‘B’ },
{ text: ‘Three’, value: ‘C’ }
]
}
})
另外要保持时间的同步,除了上面使用双向绑定之外,也可以使用参数特性,保持同步。如下,参数特性针对v-model
lazy  在默认情况下,v-model 在input 事件中同步输入框值与数据,可以添加一个特性lazy,从而改到在 change 事件中同步
number 自动将用户的输入保持为数字
debounce设置最小的延时,在每次敲击之后延时同步输入框的值域数据。如果每次更新都要进行高耗操作,它较为有用,不会延迟input事件:它延迟写入底层数据。

五、自定义
自定义指令,可以完成将数据的变化映射到DOM的行为。Vue.directive(id,definition)传入指令和定义对象注册一个全局自定义对象。定义对象需要提供一下钩子函数。如下
bind: 仅调用一次,当指令第一次绑定元素的时候。
update: 第一次是紧跟在 bind 之后调用,获得的参数是绑定的初始值;以后每当绑定的值发生变化就会被调用,获得新值与旧值两个参数。
unbind:仅调用一次,当指令解绑元素的时候。

Vue.directive(‘my-directive’, {
bind: function () {
console.log(‘my-directive’)
},
update: function (value) {
this.el.innerHTML ='value - '+ value
}
})
var demo = new Vue({
el: ‘#demo’,
data: {
someValue: ‘hello!’
}
})
 所有的钩子函数将被复制到实际的指令对象中,钩子内 this 指向这个指令对象。如果指令需要多个值,可以传入一个JavaScript对象字面量。指令可以使用任意合法的JavaScript表达式。

六、处理器之类的
1、v-on 指令监听DOM事件,例子如下

Greet
var vm = new Vue({ el: '#example', data: { name: 'Vue.js' }, // 在 'methods' 对象中定义方法 methods: { greet: function (event) { // 方法内 'this'指向 vm alert('Hello ' + this.name + '!') // `event` 是原生 DOM 事件 alert(event.target.tagName) } } }) 2、内联语句处理器,除了绑定一个方法,也可以内联JavaScript语句。
Say Hi Say What
3、事件修饰符event.preventDefault() 或event.stopPropagation()、

七、组件,组件实例的作用域是孤立的。
1、Vue.extend()创建一个组件构造器,
// 定义
var MyComponent = Vue.extend({
template: ‘

A custom component!

})
// 注册
Vue.co
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值