1. 第一个Vue程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<title>my first vue program</title>
</head>
<body>
<div id="app">
{{message}}
{{another_message}}
</div>
<script>
//can use vm object to modify the members
var vm = new Vue({
el: "#app",
data: {
message: "hello world",
another_message: "another hello world"
}
})
</script>
</body>
</html>
2. 基本语法
1. v-bind
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<title>my first vue program</title>
</head>
<body>
<div id="app">
<span v-bind:style="binding_message">{{real_message}}</span>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
binding_message: "color:red",
real_message: "hello world"
}
})
</script>
</body>
</html>
2. v-if, v-else
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<title>my first vue program</title>
</head>
<body>
<div id="app">
<span v-if="condition == true">true</span>
<span v-else>false</span>
<span v-if="choice === 'A'">A</span>
<span v-else-if="choice === 'B'">B</span>
<span v-else-if="choice === 'C'">C</span>
<span v-else>else</span>
<script>
var vm = new Vue({
el: "#app",
data: {
condition: false,
choice: "C"
}
})
</script>
</body>
</html>
3. v-for
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<title>my first vue program</title>
</head>
<body>
<div id="app">
<li v-for = "item in items">{{item.message}}</li>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
items:[
{message:"A"},
{message:"B"},
{message:"C"},
{message:"D"},
{message:"E"}
]
}
})
</script>
</body>
</html>
3. 事件绑定
1. v-on
v-on可以监听DOM事件
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<title>my first vue program</title>
</head>
<body>
<div id="app">
<button v-on:click="sayHello">click me</button>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
message:"hello world"
},
methods: {
sayHello: function(){
alert(this.message);
}
}
})
</script>
</body>
</html>
2. 双向绑定（v-model）
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<title>my first vue program</title>
</head>
<body>
<div id="app">
输入文本区域：<input type="text" v-model="message">
<p>你输入了{{message}}</p>
<br>
<input type="radio" name="sex" value="male" v-model="sex"> male
<input type="radio" name="sex" value="female" v-model="sex"> female
<p>你选中了：{{sex}}</p>
<br>
<select v-model="latter">
<option disabled>请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
<option>F</option>
</select>
<p>你选中了：{{latter}}</p>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "123",
sex:'',
latter: ""
},
methods: {
}
})
</script>
</body>
</html>
4. Vue标签（组件）
1. 内联组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<title>my first vue program</title>
</head>
<body>
<div id="app">
<my-vue-component v-for="obj in items" v-bind:item="obj"></my-vue-component>
<hello></hello>
<hello></hello>
<hello></hello>
<hello></hello>
</div>
<script>
Vue.component("my-vue-component", {
//可接受参数，接受item，绑定obj，通过v-for打印item（即obj）
props: ["item"],
template: "<p>{{item}}</p>"
});
Vue.component("hello", {
template: "<p>hello world</p>"
});
var vm = new Vue({
el: "#app",
data: {
items: ["a","b","c","d","e","f","g"]
}
});
</script>
</body>
</html>
5. 网络通信( axios)
1. what
- 浏览器端和node.js下的异步通信
- 主要作用是实现ajax的异步通信
2. 使用
1. npm install axios
2. 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<style>
[v-clock]{
display:none
}
</style>
<body>
<div id="app">
<p>the content</p>
<div v-for = "item in info.items">
<p>name = {{item.name}} content = {{item.content}}</p>
</div>
<p>the JSON file</p>
<div>{{info}}</div>
</div>
<script>
var vm = new Vue({
el: "#app",
mounted() {//可以插入在vue加载过程
axios.get("./data.json").then(response => {
this.info = response.data;
})
},
props:[
"props_info"
],
data: {
},
data() {
return {
info: {
items:null
}
}
},
});
</script>
</body>
</html>
6. 计算属性
talk is cheap, this is the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<!-- compute in real time -->
<div>current time is {{currentTime_compute()}}</div>
<!-- compute but will store the outcome in memory -->
<!-- it is like a attribute -->
<div>current time is {{currentTime_store}}</div>
<script>
console.log(vm.currentTime_compute());
console.log(vm.currentTime_compute());
console.log(vm.currentTime_store());
console.log(vm.currentTime_store());
</script>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
},
methods: {
currentTime_compute: function(){
return Date.now();
}
},
computed:{
currentTime_store: function(){
return Date.now();
}
}
});
</script>
</body>
</html>
7. 内容分发
1. slot
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<todo>
<todo-title slot="todo-title" :title="todoTitle"></todo-title>
<todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items>
</todo>
</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"],
template: "<li>{{item}}<button @click='remove'>delete</button></li>",
methods: {
remove: function(){
alert("111");
vm.removeItem();
}
}
});
var vm = new Vue({
el: "#app",
data: {
todoTitle: "Todo title",
todoItems: ["a","b","c","d","e"]
},
methods: {
removeItem: function(){
alert("hello world");
}
}
});
</script>
</body>
</html>
