现在来系统地学习一下vue（参考vue.js官方文档）:
vue.js是一个构建数据驱动的web界面的库，其目标是实现响应的数据绑定和组合的试图组件。
vue.js拥抱数据驱动的视图概念，这意味着我们能在普通的html模板中使用特殊的用法将dom“绑定”到底层数据。一旦创建了绑定，dom将于数据保持同步。
以下参考代码与上面的模型相对应
<!-- 这是我们的 view -->
<div id="example-1">
hello {{ name }}!
</div>
// 这是我们的 model
var exampledata = {
name: 'vue.js'
}
// 创建一个 vue 实例或 "viewmodel"
// 它连接 view 与 model
var examplevm = new vue({
el: '#example-1', // 在一个id为'example-1'的实体上挂载
data: exampledata // 数据流
})
通常我们会把model写在vue实例当中，下面写法与上面写法效果一样：
<!-- 这是我们的 view -->
<div id="example-1">
hello {{ name }}! <!--- vue的数据模型用{{datamodel}}包裹起来 --->
</div>
// 创建一个 vue 实例或 "viewmodel"
// 它连接 view 与 model<br><script>
var examplevm = new vue({
el: '#example-1', // 在一个id为'example-1'的实体上挂载
data: {
name: 'vue.js'
} // 数据流
})<br></script>
这样一段程序执行后，在#example-1这个控件中就会显示‘hello vue.js!'。
下面来看看指令(directives)：
指令是特殊的带有前缀 v- 的特性，指令的值限定为绑定表达式，比如一个if的指令：
<p v-if="greeting">hello!<p>
还有绑定指令，即将某些属性值与一些值相绑定，比如：
<input :type = "questitem.type", :name = "questitem.name"/>
这里省略了“v-bind”，使得input的属性值赋值具有“计算”的效果。
计算属性
这里介绍一下$watch的用法，用于当一个数据需要根据其他的数据而变化时的情况：
<script><br>var vm = new vue({
el: '#demo',
data: {
firstname: 'foo',
lastname: 'bar',
fullname: 'foo bar'
}
})<br></script>
vm.$watch('firstname', function (val) { // 当firstname改变时，立马更新vm.fullname
this.fullname = val + ' ' + this.lastname
})
vm.$watch('lastname', function (val) { // 当lastname改变时，立马更新vm.fullname
this.fullname = this.firstname + ' ' + val
})
在这里，所有的数据的对象都可以通过vm.firstname等来访问。
v-model
顾名思义，就是vue当中的数据模型，它用来绑定vue实例中的数据：
<!--- bi-direction bound --->
<div id="app">
<p>{{message}}</p>
<input v-model="message"> <!--model，input输入的数据会立即反馈到vue实例中-->
</div>
<script>
new vue({
el: '#app', // view
data: {
message: 'hello vue.js'
}
})
</script>
比如要用来绑定一个表单控件，就是把选择的值显示出来：
<!--- 表单控件绑定-单选 --->
<div id="myselect"> // 外面这一层我一开始没有加，然后就出错了，el好像一般是挂载在<div>构件上
<select v-model="selected"> // data的数据类型是selected，值是选取的值
<option seleceted>a</option>
<option>b</option>
<option>c</option>
</select>
<span>selected: {{ selected }}</span>
</div>
<script>
new vue({
el: '#myselect',
data:{
selected:[]
}
})
</script>
v-if, v-else
这个指令可以用的很灵活，比如我在表单中生成新题目，有“单选题”、“多选题”、“文本题”三种，那么针对不同的题目应该显示的控件有所不同，这时可以使用如下语法：
<div v-if="questitem.type === 'textarea'"> // 注意是三个等号
<textarea></textarea>
</div>
<div v=else>
<div></div>
</div>
v-for
这个用于对数组元素的遍历，举个例子：
<ul id="demo">
<li
v-for="item in items"
class="item-{{$index}}"> <!--- $index指的是当前数组元素在数组中的位置 --->
{{parentmessage}} - {{$index}} - {{item.message}} <!--一个view结构-->
</li>
</ul>
<button id="btn1">点击我</button>
<script>
var demo= new vue({
el: '#demo',
data:{
parentmessage: 'parent',
items:[
{message: 'foo'},
{message: 'bar'}
]
}
})
</script>
以上代码的意思是遍历demo实例中的items数组，将里面的每一个数组元素（'foo'，'bar'）分别在<li>标签中显示出来
为了避免对整个列表进行渲染，经常会使用：track-by = "$index"，表示只对当前数组元素进行操作。
至此，关于vue的最基本的东西已经介绍完，需要更多的api资料可以参考： http://cn.vuejs.org/api/
vue文件的结构以及数据流的控制
在vue文件中，我们经常可以看到这样的格式：
<template>
<div> </div>
</template>
<script>
export default{
data(){ ...
},
methods:{ // 自定义方法，可对data进行处理
method1(){ ... }
...
},
components: { ... }
vuex: {
getters:{ // 获取store的数据
questionnaire: state => state.currentquestionnaire
}
actions: { //用来分发数据容器store中mutations方法
action1(){ dispatch("set_quest", item) } // dispatch用来调用父组件store的"set_quest"方法
action2(){ ... }
}
directives: {
'my-directive': {
bind: function(){ //钩子函数，只调用一次，在指令第一次绑定到元素上时调用 }
update: function(newvalue, oldvalue) { //钩子函数，在bind之后以初始值为参数第一次调用，之后每当绑定至变化时调用 }
unbind: function(){ //钩子函数，只调用一次，在指令从元素上解绑时调用 }
}
}
// 自定义指令，在<template>中以<div v-my-directives = ""> 方式调用
}
</script>
<style> </style>
<template>中放置的是这个页面（或者页面的一部分）所拥有的控件，而<script>中定义的是vue的数据对象和方法，<style>中定义的是控件的css样式。
在methods中经常使用到“this”关键字，该关键字指向vue组件实例。
event.target: 触发事件的具体控件，不产生冒泡作用，是谁就是谁，这个在锁定事件触发的控件时经常用到，比如：
<div @click.stop = "additem($event)">
<span data-type = "radio">单选题</span>
<span data-type = "checkbox">多选题</span>
<span data-type = "textarea">文本题</span>
</div>
<script>
export default{
method: {
additem(event){
let target = event.target
if(target.nodename.tolowercase() === 'span') { // 当点击了选择的按钮后
this.showmask = true // 显示弹出框
this.questitem.type = target.dataset.type // 设置问题的类型
}
}
}
</script>
最后讲讲this.$els: 一个对象，包含注册有v-el的dom元素
<div class = "promt-header">
<div>
<label> 问题名称： </label>
<input type = "text", placeholder = "请输入标题" v-el: item-title/>
</div>
</div>
<div class = "promt-footer" @click.stop = "handleinput(&event)">
<button type = "button" data-operation = "confirm"> 确定 </button>
<button type = "button" data-operation = "cancel"> 取消 </button>
</div>
<script>
methods: {
handleinput(event) {
let target = event.target
if(target.nodename.tolowercase() !== 'button') {
return
}
let itemtitle = this.$els.itemtitle
let itemselections = this.$els.itemselections
if(target.dataset.operation === "confirm") {
if(this.questitem.type === "textarea") {
this.addtextarea(itemtitle)
} else {
this.addselections(itemtitle, itemselections)
}
} else {
this.handlecancel()
}
},
}
</script>
上面的代码是不完整的，但是可以看到，v-el把该控件挂载在一个名字为item-title的实体中，我们可以通过this.$els.itemtitle将其提取出来
要使用该控件的属性值（输入值），可以这样：
this.$els.itemtitle.value
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
更多探索vue.jscomponent内容实现。