一、安装
1、基于nodeJs环境
安装node设置node权限
2、基于node，利用淘宝npm镜像安装相关依赖
在终端里直接输入：
(1)、(2)、vue ，回车，若出现vue信息表示成功
3、安装全局vue-cli 脚手架，用于帮助搭建所需模版框架
npm install -g vue-cli ， 回车等待安装....
4、创建项目
vue init webpack 项目名 ，回车
5、安装依赖
cd 项目名 ，回车进入到文件夹
cnpm install ，回车等待
项目结构里多了一个 node_modules 文件夹(改文件里的内容就是之前安装的依赖)
6、测试环境是否搭建成功
方法1: cnpm run dev (-port 新端口号／在config文件下的index文件下的prot字段修改为新端口号)
方法2:在浏览器输入localhost:8080 (默认端口号8080)
二、Vue.js 起步
1、语法格式如下：
var vm=new Vue({
//选项
})
实例一：
html:
<div id="app"><p>site:{{site}}；{{url}}</p><p>{{details}}</p></div>
JS:
var vm=new Vue({
el:‘#app‘,
data:{
site:‘百度‘,
url:‘www.baidu.com‘
},
methods:{
details:function(){
return this.site+"查询";
｝
}
})
页面结果：
site:百度；www.baidu.com
百度查询
实例二：
HTML:
<div id="app"><p>site:{{site}}；url:{{url}}</p></div>
JS:
var data={site:"百度"url:"www.baidu.com"}
var vm=new Vue({
el:‘#app‘,
data:data
})
document.write(vm.$data===data) //true
document.write("<br>");
document.writer(vm.$el===document.getElementById(‘app‘)) //true
页面结果：
site:百度；url:www.baidu.com
true
true
三、Vue.js 模版语法
数据绑定最常见形式就是使用{{...}} (双大括号)的文本插值：
<div id="app"><p>{{message}}</p></div>
1、v-html 指令
v-html指令用于输出html代码：
<div id="app">
<div v-html="message"></div>
<div>
new Vue({
el:‘#app‘,
data:{
message:"Hello Vue!"
}
})
2、v-bind 指令
属性中的值应用使用v-bind 指令
.class1{color:red;background:#444;}
<div id="app">
<label for="r1"></label><input id="r1" type="checkbox" v-model="class1">
<br>
<div v-bind:class="{‘class1‘:class1}">文字文字</div>
</div>
new Vue({
el:‘#app‘,
data:{
class1:false
}
});
3、表达式
<div id="app">
{{ 5+5 }} <br>
{{ ok ? ‘YES‘ : ‘NO‘ }} <br>
{{ message.split(‘‘).reverse().join(‘‘) }} <!--字符串反转-->
<div v-bind:id="‘list-‘+id">文字信息</div>
</div>
new Vue({
el:‘#app‘,
data:{
ok:true,
message:‘ABC‘,
id:1
}
})
10
YES
CBA
文字信息
4、指令
指令是带有v-前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到DOM上。
v-if
<div id="app"><p v-if="seen">现在你看到我了</p></div>
new Vue({
el:‘#app‘,
data:{
seen:true
}
})
这里的v-if指令将根据表达式seen的值(true或false)来决定是否插入p元素。
其他v-指令：
<a v-bind:href="url">a链接</a> <a v-on:click="doSomething">a链接</a> v-on指令，用于监听DOM事件。
<form v-on:submit.prevent="onSubmit"></form> 修饰符
5、双向数据绑定
在input输入框中我们可以使用v-model指令来实现双向数据绑定：
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
new Vue({
el:‘#app‘,
data:{
message:‘ABC!‘
}
})
6、过滤器
Vue.js允许你自定义过滤器，被用作一些常见的文本格式化。由“管道符”指示 ｜
7、缩写
v-bind 缩写:
v-bind:href="url" //完整写法
:href="url" //缩写
v-on 缩写 :
v-on:click="doSomething" //完整写法
@click="doSomething" //缩写
四、条件语句和循环语句
1、v-if / v-else / v-else-if /v-show 条件语句
<div id="app">
<div v-if="type===‘A‘">A</div>
<div v-else-if="type===‘B‘">B</div>
<div v-else-if="type===C">C</div>
<div v-else>Not A/B/C</div>
</div>
new Vue({
el:‘#app‘,
data:{
type:‘C‘
}
})
<h1 v-show="ok">Hello!</h1>
2、v-for 循环语句
<div id="app">
<ol v-for="site in sites">
<li>{{site.name}}</li>
</ol>
</div>
new Vue({
el:‘#app‘,
data:{
sites:[
{name:‘Ling‘},
{name:‘Hone‘},
{name:‘Fei‘}
]
}
})
结果：
1.Ling
2.Hong
3.Fei
三个参数索引。
<div id="app">
<ul>
<li v-for="(value,key,index) in object">
{{index}}.{{key}}:{{value}}
</li>
</ul>
</div>
new Vue({
el:‘#app‘,
data:{
object:{
"name":"百度"，
"url":"www.baidu.com"
}
}
})
结果：
1.name:百度
2.url:www.baidu.com
五、Vue.js 计算属性
1、计算属性关键词：computed。
<div id="app">
<div>原始字符串：{{message}}</div>
<div>计算后反转字符串：{{reversedMessage}}</div>
</div>
var vm=new Vue({
el:‘#app‘,
data:{
message:‘ABC!‘
},
computed:{
reversedMessage:function(){
return this.message.split(‘‘).reverse().join(‘‘)
}
}
})
原始字符串：ABC!
计算后反转字符串：!CBA
computed VS methods
我们可以使用methods来替代computed，效果上两个都是一样的，但是computed是基于它的依赖缓存，只有相关依赖发生时才会重新取值。而使用methods，在重新渲染的时候，函数总会重新调用执行。
可以说computed性能会更好，但是如果你不希望缓存，可以使用methods属性。
2、computed setter
computed属性默认只有getter，不过在需要时你也可以提供一个setter：
<div id="app">
<p>{{site}}</p>
</div>
var vm Vue({
el:‘#app‘,
data:{
name:‘Google‘,
url:‘www.google.com‘
},
computed:{
site:{
get:function(){
return this.name+‘ : ‘+this.url
},
set:function(newValue){
var names=newValue.split(‘ ‘)
this.name=names[0]
this.url=names[names.length-1]
}
}
}
})
vm.site=‘百度 www.baidu.com‘;
document.wirte("name:"+vm.name);
document.write("<br");
document.write("url:"+vm.url);
结果：
百度 ： www.baidu.com
name:百度
url:www.baidu.com
六、监听属性
我们可以通过 watch 来响应数据变化：
<div id="app">
千米<input type="text" v-model="kilometers"><br>
米：<input type="text" v-model="meters">
</div>
<div id="info"></div>
var vm=new Vue({
el:‘#app‘,
data:{
kilometers:0,
meters:0
},
watch:{
kilomerts:function(val){
this.kilomerts=val;
this.meters=val*1000;
},
meters:function(val){
this.kilomerts=val/1000;
this.meters=val;
}
}
});
//$watch 是一个实例方法。
vm.$watch(‘kilomerts‘,function(newValue,oldValue){
document.getElementById(‘info‘).innerHTML="修改前值为："+oldVlaue+",修改后值为："+newValue;
});
七、样式绑定
我们可以用v-bind 来设置样式属性。
v-bind:class设置一个对象，从而动态的切换class：
1、
<div v-bind:class="{active:isActive}"></div>
2、
<div v-bind:class="{active:isActive,item:hasItem}"></div>
3、
<div id="app"><p v-bind:class="objectClass"></p></div>
new Vue({
el:‘#app‘,
data:{
objectClass:{
active:true,
item:true
}
}
})
4、数组语法
<div v-bind:class="[isActive,hasItem]"></div>
5、还可以用三元表达式切换class
<div v-bind:class="[isActive,hasItem?item:‘‘]"></div>
八、事件处理
1、v-on
<botton v-on:click="counter+=1">增加1</button>
<p>这个按钮被点击了{{counter}}次</p>
new Vue({
el:‘#app‘,
data:{
counter:0
}
})
九、表单
1、input和textarea元素中使用v-model实现双向数据绑定：
<div id="app">
<p>input 元素：</p>
<input v-model="message" placeholder="编辑我.....">
<p>消息是：{{message}}</p>
<p>textarea 元素：</p>
<textarea v-model="message2" placeholder="编辑我....."></textarea>
<p style="white-space:pre">{{message2}}</p>
</div>
new Vue({
el:‘#app‘,
data:{
message:‘Googel‘,
message:‘谷歌 \r\n http://www.google.com‘
}
})
2、复选框
<div id="app">
<p>单个复选框</p>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{checked}}</label>
<p>多个复选框</p>
<input type="checkbox" id="baidu" value="Baidu" v-model="checkedNames">
<label for="baidu">百度</babel>
<input type="checkbox" id="google" value="Google" v-model="checkedNames">
<label for="google">谷歌</babel>
<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
<label for="google">淘宝</babel>
<br>
<span>{{checkedNames}}</span>
</div>
new Vue({
el:‘#app‘,
data:{
checked:false,
checkedNames:[]
}
})
十、组件
组件(Component)是Vue.js最强大的功能之一。
组件可以扩展HTML元素，封装可重用的代码。
注册一个全局组件语法格式如下：
trgName 为组件名，options为配置选项。注册后，我们可以使用以下方式来调用组件：
1、全局组件
注册一个简单的<aaa></aaa>,并使用它：
<div id="app"><aaa></aaa></div>
Veu.component(‘aaa‘,{
template:‘<h1>自定义组件！</h1>‘
})
new Vue({el:‘#app‘})
2、局部组件
var Child={
template:‘<h1>自定义组件！</h1>‘
}
new Vue({
el:‘#app‘,
data:{
‘aaa‘:Child //<aaa>将只能在父模版可用
}
})
3、动态Prop
<div id="app">
<input v-model="parentMsg"/>
<br>
<child v-bind:message="parentMsg"></child>
</div>
Vue.component(‘child‘,{
props:["message"],
template:‘<span>{{message}}</span>‘
})
new Vue({
el:‘#app‘,
data:{
parentMsg:‘父组件内容！‘
}
})
4、自定义事件
父组件是使用props传递数据给子组件，但如果子组件要把数据传递回去，9??需要使用自定义事件！
我们可以使用v-on绑定自定义事件，每个Vue实例都实现了事件接口(Events interface),即：
使用：$on(eventName)监听事件
$emit(eventName)触发事件
<div id="app">
<p>{{total}}</p>
<counter v-on:increment="increment"></counter>
<counter v-on:increment="increment"></counter>
</div>
Vue.component(‘counter‘,{
template:‘<button v-on:click="incrementHandler">{{counter}}</button>‘,
data:function(){
return {counter:0}
},
methods:{
incrementHandler:function(){
this.counter+=1
this.$emit(‘increment‘)
}
}
})
new Vue({
el:‘#app‘,
data:{
total:0
},
methods:{
increment:function(){
this.total+=1
}
}
})
如果你想在某个组件的根元素上监听一个原生事件。可以使用.native 修饰 v-on .
十一、自定义指令
1、页面载入时，input元素自动获取焦点
<div id="app">
<input v-focus>
</div>
Vue.directive(‘focus‘,{
function(el){
el.focus()
}
})
new Vue({el:‘#app‘})
2、指令参数
<div id="app">
<div v-lhf="{color:‘red‘,text:‘凌红飞 ??‘}"></div>
</div>
Vue.directive(‘lhf‘,function(el,binding){
el.innerHTML=binding.value.text
el.style.backgroundColor=binding.value.color
})
new Vue({el:‘#app‘})
十二、路由
<div id="app">
<rooter-link to="/foo">Go To Foo</rooter-link>
<rooter-link to="/bar">Go To Bar</rooter-link>
<rooter-view></rooter-view> <!--路由渲染到这里-->
</div>
／／ 1、定义路由组件
const Foo={template:‘<div>Hello Foo</div>‘}
const Bar={template:‘<div>Hello Bar</div>‘}
／／ 2、定义路由
const routes=[
{path:‘/foo‘,component:Foo},
{path:‘/bar‘,component:Bar}
]
／／ 3、创建router实例，然后传routers配置
const router=new VueRouter({
routes //(缩写)相当于 routes:routes
})
／／ 4、创建和挂载根实例。记得要通过router配置参数注入路由
const app=new Vue({
router
}).$mount(‘#app‘)