使用vue,js第一步先是安装(http://cn.vuejs.org/)
在官方文档中就可以直接下载并用 <script>标签引入，记住本地的Vue.js的位置，通过会被注册为一个全局变量。如：
<script type="text/javascript" src="D:\软件小组/vue.js"></script>
vue介绍
vue是一套构建用户界面的 渐进式框架，Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
最基本的实现方法：
<div id="app" >
{{message}} //输出的纯文本用双大括号括着
</div>
<script type="text/javascript" >
var vm=new Vue({
el:'#app', //元素的id
data:{ //元素包含的数据
message:"good"
}
})
可以通过控制台console改变数据
这样的话可以多次改变数据，而通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新，另外一种就是在
{{message}}改为{{*message}},同样也只能赋值一次
<div id="app" >
{{*message}}
</div>
<script type="text/javascript" >
var vm=new Vue({
el:'#app',
data:{
message:"hello"
}
})
vm.message="wonderful";
</script> //hello
如果要输出真正的 HTML ，你需要使用v-html指令：
<div id="app" >
<div v-html="name"></div> //name为HTML代码，直接可以输出不需要双大括号
</div>
<script type="text/javascript" >
var vm=new Vue({
el:'#app',
data:{
name:"Amy",
}
})
</script>
注意，你不能使用 v-html来复合局部模板，因为 Vue 不是基于字符串的模板引擎。组件更适合担任 UI 重用与复合的基本单元。
你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容插值。*
条件与循环
<div id="app" >
<p v-if="look">{{message}} //v-if 语句的形式，通过look的布尔值决定是否执行
</p>
</div>
<script type="text/javascript" >
var vm=new Vue({
el:'#app',
data:{
message:"good",
look:true
}
}) //good
在通过控制台输出vm.look=false使得good的输出消失
循环：
<div id="app" >
<div v-if="look" >
<p v-for="item in items">{{item.message}} 相当于 i in array的循环
</p>
</div>
</div>
<script type="text/javascript" >
var vm=new Vue({
el:'#app',
data:{
items:[ //数组和对象的要小心这些括号
{message:"good"},
{message:"study"},
{message:"children"}
],
look:true
}
})
</script>
还可以在控制台上增添新的
message值
vm.items.push({message:"better"})
事件
v-on事件
<div id="app" >
<button v-on:click="hello">Hello</button> v-on进行连接click点击函数
</div>
<script type="text/javascript" >
var vm=new Vue({
el:'#app',
methods:{ //方法
hello:function() {
alert("hey,girl");
}
}
})
</script>
<a v-on:click="doSomething"></a>
<a @click="doSomething"></a>
Vue 也提供了 v-model 指令，它使得在表单输入和应用状态中做双向数据绑定变得非常轻巧。如：
<div id="app" >
{{message}}
{{name}}
<br>
<input v-model="name">
</div>
<script type="text/javascript" >
var vm=new Vue({
el:'#app',
data:{
message:"hello",
name:''
}
})
</script>
v-bind指令绑定class
<style type="text/css">
.active{
color:red;
}
.static{
background:green;
}
</style>
<div id="app" v-bind:class="{active:isActive,static:isStatic}">
{{message}}
</div>
<script type="text/javascript" >
var vm=new Vue({
el:'#app',
data:{
isActive:true,
message:'beauty',
isStatic:true
},
})//class属性的bind的
：
//绑定Style属性
<style type="text/css">
.active{
font-family:'Comic Sans Ms';
background:blue;
}
</style>
<div id="app">
<div v-bind:class="{active:isActive}">
<div v-bind:style="{color:activeColor,fontSize:fontSize}">
{{message}}
</div>
</div>
</div>
<script type="text/javascript" >
var vm=new Vue({
el:'#app',
data:{
activeColor:'orange',
message:"dodo",
isActive:true,
fontSize:'50',
}
})
//如果是想同时绑定两个东西，应该要多个包装，否则就会没有什么效果直接忽略后面的绑定，例如不能在同一个div中用bind绑定两个
bind语法
<a v-bind:href="url"></a>
<a :href="url"></a>
计算属性
在模板中绑定表达式是非常便利的，但是它们实际上只用于简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护。如：
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
computed例子：
<div id="app">
<p>{{message}}</p>
<p>{{reverseMessage}}</p>
</div>
<script type="text/javascript" >
var vm=new Vue({
el:'#app',
data:{
message:'live'
},
computed:{
reverseMessage:function() {
return this.message.split('').reverse().join('')
}
}
})
结果：
live
evil
这个目的同样可以用methods的形式实现，但是对于methods，是每次执行都会重新调用一次函数，再从头开始，而对于计算属性来说，是基于它的依赖缓存，也就是说只要message的值不变，计算属性会一下子就出现之前出现的结果，而method又要经过冗长的过程
Vue.js 提供了一个方法 $watch ，它用于观察 Vue 实例上的数据变动
computed: {
classObject:function() {
return {
active:this.isActive && !this.error,
'text-danger':this.error && this.error.type==='fatal', //这是什么意思
}
}
}
v-if条件渲染
<div id="app">
<div v-if="ok">{{message}}</div>
</div>
<script type="text/javascript" >
var vm=new Vue({
el:'#app',
data:{
message:"dodo",
ok:true
}
})
</script> //注意的是v-if不能直接写在根元素上
template方法
<template>元素当做包装元素，并在上面使用 v-if，可以用来切换多个元素
<div id="app" >
<template v-if="ok">
<div v-bind:style="{color:activeColor}">
<h1>Title</h1>
<p>Paragraph</p>
</div>
</template>
{{message}}
</div>
<script type="text/javascript" >
var vm=new Vue({
el:'#app',
data:{
activeColor:'orange',
message:"dodo",
ok:true
}
})
</script>
可以用 v-else指令给 v-if 或 v-show添加一个 “else” 块：
v-else元素必须紧跟在 v-if或 v-show 元素的后面——否则它不能被识别
<div id="app" >
<template v-else>
{{message}}
</template>
</div>
<script type="text/javascript" >
var vm=new Vue({
el:'#app',
data:{
activeColor:'orange',
message:"dodo",
ok:true
}
}) //无效果
v-show另一个根据条件展示元素的选项是 v-show 指令
用法大体上一样：
<h1 v-show="ok">Hello!</h1>
与v-if不同的是有 v-show的元素会始终渲染并保持在 DOM 中。v-show
是简单的切换元素的 CSS 属性 display
注意： v-show不支持 <template>语法，但是不会报错。
template v-for句式
<div id="app" >
<ul>
<template v-for="item in items">
<li>{{item.message}}</li>
<li v-bind:class="{active:isActive}"></li>
</template>
</ul>
</div>
<script type="text/javascript" >
var vm=new Vue({
el:'#app',
data:{
isActive:true,
activeColor:'orange',
items:[
{message:"dodo"},
{message:"foolish"}
]
}
})
</script>
列表渲染
<style type="text/css">
.active{
font-family:'Comic Sans Ms';
background:blue;
}
</style>
<div id="app" >
<ul>
<template v-for="(value,key) in items"> //遍历
<li v-bind:class="{active:isActive}"> //绑定class
{{$index}}.{{key}}:{{value}}</li> //输出值
</template>
</ul>
</div>
<script type="text/javascript" >
var vm=new Vue({
el:'#app',
data:{
isActive:true,
activeColor:'orange',
items:{
wonder:"dodo",
message:"foolish"
}
}
})
</script>
<div id="app" v-for="item in items">
{{item.message}}
</div>
<script type="text/javascript" >
var vm=new Vue({
el:'#app',
data:{
items:[{message:"baby"}]
}
})
</script>
结果：
baby
在控制台输入
vm.items.push({message:"good"})
再输入
vm.items.pop()
输出：
数组的变异方法手段还有
push()pop()-
shift()//从头部开始删除元素 -
unshift()//从头部开始增加元素 splice()sort()reverse()
#########注意
由于 JavaScript 的限制， Vue 不能检测以下变动的数组：
- 当你直接设置一个项的索引时，例如：
vm.items[indexOfItem] = newValue - 当你修改数组的长度时，例如：
vm.items.length = newLength
解决第一个问题的方法：
// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice`
example1.items.splice(indexOfItem, 1, newValue)
var vm=new Vue({
el:'#app',
data:{
items:[{message:"baby"},
{message:"hello"},
{message:"good morning"}
]
}
})
vm.items.splice(2,1,{message:'beauty'}) //改变数组中特定位置元素的值
解决第二个问题的方法：
example1.items.splice(newLength)
对于所有的数据绑定， Vue.js 都提供了完全的 JavaScript 表达式支持。然而这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，语句不会解析
{{number+1}} <!--把语句包含在双大括号内--!>
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}
事件修饰符
通过由点(.)表示的指令后缀来调用修饰符,处理 DOM 事件细节
stopselfpreventcapture
<a v-on:click.stop="doThis"></a>
<form v-on:submit.prevent="onSubmit"></form>
<a v-on:click.stop.prevent="doThat"></a>
<form v-on:submit.prevent></form>
<div v-on:click.capture="doThis">...</div>
<div v-on:click.self="doThat">...</div>
#######按键修饰符
最常用例子：
<input v-on:keyup.enter="submit">//用回车键进行操作提交
其他的常用键
- enter
- tab
- delete
- esc
- space
- up
- down
- left
- right
