目录
组件内部绑定事件需要使用到this.$emit("事件名"，参数)；
一、Vue的核心是：
数据驱动+组件化
借鉴了AngularJS的模块化开发和React的虚拟Dom（虚拟dom就是把Dom操作放到内存中执行）。
二、Vue的CDN：
<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
三、Vue常用属性：
-
v-if v-else
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-if</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
</div>
<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
ok: true
}
});
</script>
</body>
</html> 
-
v-else-if
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-else-if</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
<h1 v-if="type==='A'">A</h1>
<h1 v-else-if="type==='B'">B</h1>
<h1 v-else-if="type==='C'">C</h1>
<h1 v-else>D</h1>
</div>
<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
type: 'A'
}
});
</script>
</body>
</html> 
-
v-for
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--view层 模板-->
<div id="app">
<li v-for="(item,index) in items">
{
{item.message}}----{
{index}}
</li>
</div>
<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
items: [
{message:'想这世界简单1'},
{message:'想简单2'},
{message:'想简单3'}
]
}
});
</script>
</body>
</html>
-
v-on绑定事件，可简写为@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue绑定事件</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
<button v-on:click="sayHi">click Me!</button>
</div>
<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
message:"想这世界简单点"
},
methods: {//方法必须定义在Vue的Methods对象中,v-on:事件
sayHi:function(event) {
alert(this.message);
}
},
});
</script>
</body>
</html> 
-
v-model数据双向绑定
-
输入框绑定
-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue数据双向绑定</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
输入文本：<input type="text" v-model="message">{
{message}}
</div>
<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
message:"123"
}
});
</script>
</body>
</html> 
-
文本区域绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue数据双向绑定</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
输入文本：<textarea rows="" cols="" v-model="message"></textarea>{
{message}}
</div>
<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
message:"123"
}
});
</script>
</body>
</html>
-
单选框绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue数据双向绑定</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
性别：
<input type="radio" value="男" v-model="pz">男
<input type="radio" value="女" v-model="pz">女
<p>选中了：{
{pz}}</p>
</div>
<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
pz:""
}
});
</script>
</body>
</html>
-
select下拉框绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue数据双向绑定select</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
下拉框：
<select name="" id="" v-model="pz">
<option value="" disabled>---请选择---</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<p>选中了：{
{pz}}</p>
</div>
<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
pz:""
}
});
</script>
</body>
</html> 
-
v-bind给组件绑定参数，简写为：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue组件</title>
</head>
<body>
<div id="app">
<!--组件：传递给组件中的值：props -->
<zzz v-for="item in items" v-bind:pppp="item"></zzz>
</div>
<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
//定义一个Vue组件component
Vue.component("zzz",{
props:['pppp'],
template: '<li>{
{pppp}}</li>'
});
var vm=new Vue({
el:"#app",
data:{
items:["Linux","Windows","ios"]
}
});
</script>
</body>
</html> 
四、组件化：
-
组合组件slot插槽
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>slot 内容分发</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
<todo>
<todo-title slot="todo-title" :title="title"></todo-title>
<todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items>
</todo>
</div>
<script src="js/v2.6.10/vue.js"></script>
<script>
<!--slot:插槽-->
Vue.component("todo",{
template:'<diV>\
<slot name="todo-title"></slot>\
<ul>\
<slot name="todo-items"></slot>\
</ul>\
</div>'
}),
Vue.component("todo-title",{
props:['title'],
template:'<div>{
{title}}</div>'
}),
Vue.component("todo-items",{
props:['item'],
template:'<li>{
{item}}</li>'
})
var vm=new Vue({
el:"#app",
data:{
title:"想让这世界简单点",
todoItems:[
"java",
"linux"
]
}
});
</script>
<!--动态拔插-->
</body>
</html>-
组件内部绑定事件需要使用到this.$emit("事件名"，参数)；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义事件</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
<todo>
<todo-title slot="todo-title" :title="title"></todo-title>
<todo-items slot="todo-items" v-for="(item,index) in todoItems"
:item="item" v-bind:index="index" v-on:remove1="removeItems(index)"></todo-items>
</todo>
</div>
<script src="js/v2.6.10/vue.js"></script>
<script>
//slot:插槽
Vue.component("todo",{
template:'<diV>\
<slot name="todo-title"></slot>\
<ul>\
<slot name="todo-items"></slot>\
</ul>\
</div>'
}),
Vue.component("todo-title",{
props:['title'],
template:'<div>{
{title}}</div>'
}),
Vue.component("todo-items",{
props:['item','index'],
//只能绑定当前组件方法
template:'<li> {
{index}}------{
{item}}<button @click="remove">删除</button></li>',
methods:{
remove:function(index){
//remove1是自定义事件名
//this.$emit 自定义分发事件
this.$emit('remove1',index);
}
}
})
var vm=new Vue({
el:"#app",
data:{
title:"想让这世界简单点",
todoItems:["java","linux"]
},
methods:{
removeItems:function(index){
console.log("删除了"+this.todoItems[index]+"OK");
this.todoItems.splice(index,1);//一次删除一个元素
}
}
});
</script>
<!--动态拔插-->
</body>
</html>-
计算属性的特色，缓存计算数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算属性</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
{
{message}}
<p>{
{currentTime1()}}</p><!--调用方法-->
<p>{
{currentTime2}}</p><!--调用属性-->
</div>
<script src="js/v2.6.10/vue.js"></script>
<script>
var vm=new Vue({
el:"#app",
<!-- Model : 数据-->
data:{
message:"Hello Vue!"
},
methods:{
currentTime1:function(){
return Date.now();//返回时间戳
}
},
computed: {
currentTime2:function() {//methods和computed里面的方法不能重名，重名之后只会调用methods中的方法
this.message;
return Date.now();//返回时间戳
}
},
});
</script>
<!--调用方法时，每次都需要进行计算，既然有计算过程则必定会产生开销，那如果这个结果是不经常变化的呢？此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点，计算属性的主要特性就是为了将不经常变化的计算结果缓存，以节约我们的系统开销-->
</body>
</html>遵循Soc关注度分离原则，Vue是纯粹的视图框架，并不包含，比如Ajax之类的通信功能，为了解决通信问题，我们需要使用Axios框架做异步通信。
五、网络通信 axios
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>axios</title>
<!-- v-clock:解决闪烁问题-->
<style>
[v-clock]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-clock>
<div>
{
{info.name}}
</div>
<div>
{
{info.address.s}}
</div>
<a v-bind:href="info.url">点我跳转</a>
</div>
<script src="js/v2.6.10/vue.js"></script>
<script src="js/v2.6.10/axios.js"></script>
<script>
var vm=new Vue({
el:"#app",
//data: 属性 vm
data(){
//请求的返回字符串格式，必须跟json字符串一样
return{
info:{
name:null,
author:null,
address:{
s:null,
c:null
}
}
}
},
mounted(){//钩子函数 链式编程 ES6新特性
axios.get('package.json').then(response=>(this.info=response.data));
}
});
</script>
</body>
</html>//json文件内容
{
"name": "vue_test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"author": "想让这世界简单点",
"license": "ISC",
"url":"https://www.baidu.com/",
"address":{
"s":"山东",
"c":"济南"
},
"links":[
{
"url":"www.baidu.com",
"name":"姓名"
},
{
"url":"www1.baidu.com",
"name":"姓名2"
}
]
}
上面的这些东西仅仅是一些Vue的基础语法，能完成简单的单页应用，还不算真正的Vue开发。
Vue开发都是基于Node.js，实际开发采用vue-cli脚手架开发，vue-router路由，vuex做状态管理；Vue UI，界面我们一般使用ElementUI（饿了么出品），或者ICE（阿里巴巴）来快速搭建前端项目。