1、安装node.js和npm。
2、安装淘宝镜像： npm install -g cnpm --registry = http://registry.npm.taobao.org
3、安装vue-cli脚手架构建工具： cnpm install -g vue-cli
4、用vue-cli构建项目： vue init webpack firstVue (在项目目录下cmd,输入命令，firstVue为项目名称)
5、运行项目： npm run dev
1、在项目中引入Vue.js
（1）下载Vue.js源码：在官网上点击“开发版本”或“生产版本”即可获取相应源码，复制到vue.js文件中，并在项目中引用即可。
（2）CDN方式：<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
（3）NPM方式：npm install vue
2、挂载点、模板、实例
<html>
<head>
<title>vue.js页面</title>
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="root"><span>我的名字是{{name}}</span></div>
<script type="text/javascript">
new Vue({
el:'#root',
data:{
name:'hello world'
}
});
</script>
</body>
</html>
挂载点： vue实例的挂载点，vue实例只会处理挂载点内部的数据
<div id="root"> </div>
模板：挂载点内部的dom元素称为模板，模板可以直接写在挂载点内部，也可以写在vue实例的template中。
（1）挂载点内部模板：
<span>我的名字是{{name}}</span>
（2）vue实例中模板：
new Vue({
el:'#root',
template:'<span>我的名字是{{name}}</span>',
data:{
name:'hello world'
}
});
（3）实例：vue实例会自动填充模板中的数据。
new Vue({
el:'#root',
data:{
name:'hello world'
}
});
3、数据、事件、方法
（1）插值表达式：
1、{{name}}
2、<span v-text = "name"></span> （name中的数据会转义，原封不动的输出）
3、<span v-html = "name"></span> （name中的数据不会转义，可能会输出html内容）
（2）事件: v-on:click = "事件名称"（ v-on:click简写成 @click）
<div v-on:click="handleClick">点击我</div>
（3）方法：方法定义在vue实例的methods中。
new Vue({
el:'#root',
data:{
name:'hello world'
},
methods:{
handleClick:function(){
this.name = "abc";
}
}
});
4、dom属性绑定和双向数据绑定
（1）dom属性绑定: v-bind:属性名=“key值”。（v-bind:可以简写成:）
<div v-bind:title="title">title</div>
new Vue({
el:'#root',
data:{
name:'hello world',
title:'this is title'
}
});
（2）双向数据绑定: v-model = "key值"。（双向绑定）
<input v-model="address"/>
<div>{{address}}</div>
new Vue({
el:'#root',
data:{
name:'hello world',
title:'this is title',
address:'xian'
}
});
5、计算属性和侦听器
（1）计算属性：计算属性是由其他数据计算得到的。
姓：<input v-model="firstName"/>
名：<input v-model="lastName">
<div>{{fullName}}</div>
new Vue({
el:'#root',
data:{
name:'hello world',
title:'this is title',
address:'xian',
firstName:'',
lastName:''
},
methods:{
handleClick:function(){
this.name = "abc";
}
},
computed: {
fullName:function(){
return this.firstName +''+ this.lastName;
}
}
（2）侦听器：侦听某一个数据的变化。
<div>{{count}}</div>
new Vue({
el:'#root',
data:{
name:'hello world',
title:'this is title',
address:'xian',
firstName:'',
lastName:'',
count:0
},
methods:{
handleClick:function(){
this.name = "abc";
}
},
computed: {
fullName:function(){
return this.firstName +''+ this.lastName;
}
},
watch:{
fullName:function(){
this.count++;
}
}
});
6、v-if、v-show、v-for指令
（1）v-if
<div v-if="show">hello world</div>
<button @click="showClick">toggle</button>
new Vue({
el:'#root',
data:{
show:true
},
methods:{
showClick:function(){
this.show = !this.show;
}
}
});
（2）v-show
<div v-show="show">hello world</div>
<button @click="showClick">toggle</button>
new Vue({
el:'#root',
data:{
show:true
},
methods:{
showClick:function(){
this.show = !this.show;
}
}
});
v-if是将该元素从dom中直接删除。v-show是为该元素添加了style="display: none;"，只是隐藏而已，没有删除。
（3）v-for
<ul>
<li v-for = "(item,index) of list" :key="index">元素：{{item}},下标：{{index}}</li>
</ul>
new Vue({
el:'#root',
data:{
list:[1,2,3]
}
});
7、组件
组件：页面的某一部分，每一个vue组件都是一个vue实例（都可以包含methods、computed等）。
（1）全局组件
<ul>
<todo-item></todo-item>
</ul>
//全局組件
Vue.component('todo-item',{
template:'<li>item</li>'
});
（2）局部组件
<ul>
<todo-item></todo-item>
</ul>
//局部組件
var TodoItem = {
template:'<li>item</li>'
}
new Vue({
el:'#root',
components:{
'todo-item':TodoItem
}
});
todoList示例
<html>
<head>
<title>to do list页面</title>
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="root">
<div>
<input v-model="todoContent"/>
<button @click="handleClick">提交</button>
</div>
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el:'#root',
data:{
todoContent:'',
list:[]
},
methods:{
handleClick:function(){
this.list.push(this.todoContent);
this.todoContent = '';
}
}
});
</script>
</body>
</html>
image.png
todoList组件示例
<html>
<head>
<title>to do list页面</title>
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="root">
<div>
<input v-model="todoContent"/>
<button @click="handleClick">提交</button>
</div>
<ul>
<todo-item v-for="(item,index) of list" :key="index" :content="item"></todo-item>
</ul>
</div>
<script type="text/javascript">
//全局組件
Vue.component('todo-item',{
template:'<li>{{content}}</li>',
props:['content']
});
//局部組件
// var TodoItem = {
// template:'<li>item</li>'
// }
new Vue({
el:'#root',
// components:{
// 'todo-item':TodoItem
// },
data:{
todoContent:'',
list:[]
},
methods:{
handleClick:function(){
this.list.push(this.todoContent);
this.todoContent = '';
}
}
});
</script>
</body>
</html>
8、父子组件交互和通信
父组件通过属性给子组件传值，子组件通过vm.$emit( event, […args] )向外发布触发事件和参数，父组件可以监听事件。
<html>
<head>
<title>to do list页面</title>
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="root">
<div>
<input v-model="todoContent"/>
<button @click="handleClick">提交</button>
</div>
<ul>
<todo-item v-for="(item,index) of list" :key="index" :content="item" :index = "index" @delete="handleDelete"></todo-item>
</ul>
</div>
<script type="text/javascript">
//全局組件
Vue.component('todo-item',{
//props:子组件接收父组件传过来的值。
props:['content','index'],
template:'<li @click="handleClick">{{content}}</li>',
methods:{
handleClick:function(){
//子组件发布触发事件delete和参数index。
this.$emit('delete',this.index);
}
}
});
//局部組件
// var TodoItem = {
// template:'<li>item</li>'
// }
new Vue({
el:'#root',
// components:{
// 'todo-item':TodoItem
// },
data:{
todoContent:'',
list:[]
},
methods:{
handleClick:function(){
this.list.push(this.todoContent);
this.todoContent = '';
},
//父组件监听delete事件和参数，并做相应处理。
handleDelete:function(index){
this.list.splice(index,1);
}
}
});
</script>
</body>
</html>
9、vue-cli使用
// 全局安装 vue-cli
$ npm install --global vue-cli
//创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
//安装依赖
$ cd my-project
$ npm run dev
网友评论