Vue快速入门
Vue快速入门
第一个Vue程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view层-->
<div id="app">
{{message}}
</div>
<!--第一步：导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
//MODEL:数据
data:{
message:"hello,vue!"
}
});
</script>
</body>
</html>
Vue基本语法
if判断
<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.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
//MODEL:数据
data:{
ok: true,
type: a
}
});
</script>
<h1 v-if="ok">Yes</h1>
<h1 v-else>NO</h1>
<h1 v-else-if ="type='a'">a</h1>
for循环
<div id="app">
<li v-for="item in items">
{{item.message}}
</li>
</div>
<!--第一步：导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
//MODEL:数据
data:{
items:[
{message: '狂神说Java'},
{message: '狂神前端'}
]
}
});
</script>
<li v-for="item in items">
{{item.message}}
</li>
事件
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view层-->
<div id="app">
<button v-on:click="vm.sayHi()">anniu</button>
</div>
<!--第一步：导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
//MODEL:数据
data:{
message: "java"
},
methods:{ //方法必须定义在Vue的Methon对象中,v-on:事件
sayHi: function (){
alert(this.message)
}
}
});
</script>
</body>
</html>
事件双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</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.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
message:""
}
});
</script>
</body>
</html>
绑定单选框
<!--view层-->
<div id="app">
<input type="radio" name="sex" value="男" v-model="message">男
<input type="radio" name="sex" value="女" v-model="message">女
<p>选中了谁：{{message}}</p>
</div>
<!--第一步：导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
message:""
}
});
</script>
绑定下拉框
<!--view层-->
<div id="app">
<select v-model="message">
<option value="" disabled>---请选择---</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>value:{{message}}</span>
</div>
<!--第一步：导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
message:""
}
});
</script>
Vue组件
<!--view层-->
<div id="app">
<geng v-for="item in items" v-bind:bang="item"></geng>
</div>
<!--第一步：导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
Vue.component("geng",{
props:['bang'],
template:'<li>{{bang}}</li>'
});
var vm = new Vue({
el:"#app",
data:{
items: ["java","linux"]
}
});
</script>
axios异步通信
<!--v-clock：解决闪烁问题-->
<style>
[v-clock]{
display: none;
}
</style>
</head>
<body>
<!--view层-->
<div id="app" v-clock>
<div>{{info.name}}</div>
<a v-bind:href="info.url">点我</a>
<div>{{info.page}}</div>
</div>
<!--第一步：导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data(){
return{
//请求的返回参数格式必须合适，必须和json字符串一样
info:{
name:null,
url:null,
page:null
}
}
},
mounted(){ //钩子函数 链式编程
axios.get('../data.json').then(response=>(this.info = response.data));
}
});
</script>
计算属性
<div id="app">
<p>{{currentTime1()}}</p>
</div>
<!--第一步：导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data: {
message:"hello"
},
methods: {
currentTime1: function (){
return Date.now(); //返回一个时间戳
}
},
computes:{ //计算属性 : methods,computed方法名不能重名，重名之后，只会调用methods的方法
currentTime2:function (){
return Date.now();
}
}
});
</script>
computed是一个属性，调用时用vm.currentTime2
而methods是方法，调用时用currentTime（）
计算属性可以想象成缓存
调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的，此时可以考虑将这个结果缓存起来，采用计算属性可以做到这一点，计算属性主要特性是为了将不经常变化的结果进行缓存，以节约系统的开销。
插槽
<!--view层-->
<div id="app">
<todo>
<todo-title slot="todo-title" v-bind:title="title"></todo-title>
<todo-items slot="todo-items" v-for="item in todoitems" v-bind:item="item"></todo-items>
</todo>
</div>
<!--第一步：导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.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>
自定义事件内容分发
<!--第一步：导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.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){
this.$emit('remove',index)
}
}
});
var vm = new Vue({
el:"#app",
data:{
title:"秦老师列表",
todoitems:['狂神说java','狂神说前端','狂神说Linux']
},
methods: {
removeItem:function (index){
console.log("删除了"+this.todoitems[index]);
this.todoitems.splice(index,1); //一次删除一个元素
}
}
});
</script>
