常用js框架之vue.js入门

学习vue.js我是参考菜鸟教程的：http://www.runoob.com/w3cnote/vue-js-quickstart.html

它的原理我理解起来就是模板，就是在自己的js中(model层)定义好一套标签，在html(view层)使用这些标签，到渲染的的时候使用核心vue.js(view-model中间层)，一一映射出来。

如下例子：

view层：

<div id="app">
{{ message }}
</div>

model层：

new Vue({
el:'#app',
data: {
message:'Hello World!'
}
});

中间view-model层vue.js在html中引入即可。可以发现在model层定义了一个Vue模板，new Vue()

参数很眼熟，没错就是json，不过这个json在vue体系中是固定格式{el:”,data:{}}

el中指定使用该vue实例的模块id，data中指定待会要替换的标签有哪些。

是不是很简单。

接下来就是各种使用规则了：

1.最简单的{{}}引用刚才已经用过了，这种使用于一般文本，如果不希望文本后续动态改变，可以用{{*}}

2.v-model=“”，功能类似{{}}，可以放在模块的属性中使用，比如

3.列表使用模板用 v-for

//view层
<div id="app">
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
</div>
//model层
<script>
new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue.js' },
{ text: 'Build Something Awesome' }
]
}
})
</script>

可以看到model层中，data的数据中定义了一个todos数组，所以使用v-for=”todo in todos”,相当于

for(var i=0;i<todos.length;i++){
var todo = todos[i];
}

这时候调用todo.text即可取到todos[i]中定义的text属性的值

另外{{ $index }}可以取到当前下标

4.条件判断

<h1 v-if="true">Yes</h1>
<h1 v-else>No</h1>

if else实在太熟悉了，v-if的值应该是一个返回boolean的表达式，如果里面需要写很多模块内容，可以用template封装，如下：

<template v-if="false">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
<template v-else>
<h1>Title1</h1>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</template>

v-show作用与v-if类似，不同的是v-show的元素会始终渲染并保持在 DOM 中,且v-show不支持标签。

<h1 v-show="true">Hello!</h1>

5.过滤器，看以下代码，通过“|”符号链接，可以对message字符串做后续处理

<div id="app">
<p>{{message}}</p>
<p>{{message | uppercase}}</p>
<p>{{message | reverse | uppercase}}</p>
</div>
<script>
Vue.filter('reverse', function (value) {
return value.split('').reverse().join('')
})
new Vue({
el: '#app',
data: {
message:'www.runoob.com'
}
})
</script>

uppercase是内部定义的方法所以没有定义，reverse方法得手动定义Vue.filter(filter名称，filter处理函数)

处理函数中的value代表被过滤的值也就是前面的message，注意处理函数最后要return一个值才生效。

以上是data相关的内容，当然如果在data中设置多个字段也是可以的，依照json的格式写就哦了。

new Vue({
el: '#app',
data: {
message:'www.runoob.com',
items:[{text:'text1'},{text:'text2'},{text:'text3'}]
}
})

7.http://vuejs.org/guide/index.html在官网上继续看，vue中的方法模板

使用的是methods字段，是这样定义的

new Vue({
el:'#app',
data:{message:'我去！！'},
methods:{
reverseMessage:function(){
this.message = this.message.split("").reverse().join("");
}
}
})

这里定义了一个反转方法模板，操作的是data里的message，从它的用法上this.message暂且猜测this代表的是data，所以可以操作message。

最后引用

<button v-on:click="reverseMessage">reverseMessage</button>

可以看出v-on应该还有很多其他事件，这里选用了click点击事件。

ok，入门就这些了。