文章目录
0.准备工作
https://cn.vuejs.org/v2/guide/installation.html
下载好的vue.js可以放在js文件中。
实验工具：vscode编译器。
1.声明式渲染
声明式渲染：将数据渲染进DOM中，也就是网页中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>声明式渲染</title>
<script src="./js/vue2.js"></script>
</head>
<body>
<div class="app">
{{message}}
</div>
<script>
var app=new Vue({
//element的缩写是el，作用：挂载元素 。
el:".app", //id是# class是.
data:{
message:"学习Vue!"
}
})
</script>
</body>
</html>
参考网址：
https://cn.vuejs.org/v2/guide/index.html
2.条件渲染
条件渲染：通过条件的判断，将数据渲染在网页上，类似于后端的if语句。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>条件渲染</title>
<script src="./js/vue2.js"></script>
</head>
<body>
<div id="app">
<div v-if="type === 'A'">看书</div>
<div v-else-if="type === 'B'">跑步</div>
<div v-else-if="type === 'C'">编程</div>
<div v-else>其他</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
type:'C' //通过修改type的值，来改变渲染的数据
}
})
</script>
</body>
</html>
参考网址：
https://cn.vuejs.org/v2/guide/conditional.html
3.列表渲染
列表渲染：对多个数据进行渲染，并且代码中有数组的影子，类似于后端的for语句。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表渲染</title>
<script src="./js/vue2.js"></script>
</head>
<body>
<ul id="example-1">
<li v-for="color in colors">
{{color.message}}
</li>
</ul>
<script>
var app = new Vue({
el:"#example-1",
data:{
colors:[
{message:'red'},
{message:'green'},
{message:'blue'}
]
}
})
</script>
</body>
</html>
参考网址：
https://cn.vuejs.org/v2/guide/list.html
4.事件处理
事件处理：在网页中单机某个按钮，就会调用方法，执行JavaScript代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件处理</title>
<script src="./js/vue2.js"></script>
</head>
<body>
<div id="example-1">
<button v-on:click="greet">Greet</button>
</div>
<script>
var app = new Vue({
el:"#example-1",
data:{
message:"play chess"
},
methods:{
greet:function(){
alert(this.message);
}
}
})
</script>
</body>
</html>
参考网址：
https://cn.vuejs.org/v2/guide/events.html
5.表单输入绑定
表单输入绑定：一般在表单中输入内容之后，会进行双向绑定，会不断地选择方法更新所对应的数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单输入绑定</title>
<script src="./js/vue2.js"></script>
</head>
<body>
<div id="app">
<!-- 双向绑定 -->
<input type="text" v-model="message"/> <!-- 输入绑定 -->
<p>输入的内容:{{message}}</p> <!-- 单向绑定 -->
<select v-model="selected">
<option disabled value="">请选择</option>
<option>高级</option>
<option>中级</option>
<option>初级</option>
</select>
<span>选择的级别:{{ selected }}</span>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"OK",
selected:''
}
})
</script>
</body>
</html>
参考网址：
https://cn.vuejs.org/v2/guide/forms.html
6.vue组件
vue组件：可以重复使用的vue文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue组件</title>
<!-- 组件是一组被重复使用的模板 -->
<script src="./js/vue2.js"></script>
</head>
<body>
<div id="app">
<ul>
<my-component-li v-for="item in items" v-bind:item="item"></my-component-li>
</ul>
</div>
<script>
//定义一个组件
Vue.component("my-component-li",{
props:["item"],
template:'<li>{{item}}</li>'
});
var app = new Vue({
el:"#app",
data:{
items:["egg","fruit","food"]
}
})
</script>
</body>
</html>
参考网址：
https://cn.vuejs.org/v2/guide/components.html
7.计算属性
计算属性：将计算后的结果缓存起来，转换成静态。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算属性</title>
<!-- 计算属性：将计算后的结果缓存起来，转换成静态。 -->
<script src="./js/vue2.js"></script>
</head>
<body>
<div id="app">
<p>当前时间方法：{{getCurrentTime()}}</p>
<p>当前时间属性：{{getCurrentTime1}}</p>
</div>
<script>
var app = new Vue({
el:"#app",
methods:{
getCurrentTime:function(){
return Date.now();
}
},
//计算属性
computed:{
getCurrentTime1:function(){
return Date.now();
}
}
})
</script>
</body>
</html>
从图中观察，得出的计算属性会转成静态，而另一个方法获取的时间会一直变化。
参考网址：
https://cn.vuejs.org/v2/guide/computed.html
8.插槽
插槽：在某一个部分进行数据的使用，类似于自定义组件、自定义标签。例如，定义标题组件、内容组件等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>插槽</title>
<script src="./js/vue2.js"></script>
</head>
<body>
<div id="app">
<todo>
<todo-title slot="todo-title" v-bind:title="title"></todo-title>
<todo-items slot="todo-items" v-for="(item,index) in items" v-bind:item="item" v-bind:index="index" v-on:remove="removeItems"></todo-items>
</todo>
</div>
<div>
<slot name="todo-title"></slot>
<ul>
<slot name="todo-items"></slot>
</ul>
</div>
<script>
//定义 待办事项 组件
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(){
this.$emit("remove");//自定义事件
}
}
});
var app = new Vue({
el:"#app",
data:{
title:'标题',
items:["book","water","river"],
},
methods:{
removeItems:function(index){
this.items.splice(index,1); //删除
}
}
})
</script>
</body>
</html>
参考网址：
https://cn.vuejs.org/v2/guide/components-slots.html