浅入VUE
v-bind: —— 数据绑定，缩写为 ‘:’
<div id="app1">
<span v-bind:title="message">
悬停
</span>
</div>
<script src="js/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "hello Vue!"
}
});
var vm1 = new Vue({
el: "#app1",
data: {
message: "hello Vue!"
}
});
</script>
v-for —— 循环语句
<div id="app">
<li v-for="(item, index) in items">
{{item.message}} -- {{index}}
</li>
</div>
<script src="js/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
items: [
{message: '123'},
{message: 'zouzou3'},
{message: 'zouzou2'},
{message: 'zouzou1'},
{message: 'zouzou'}
]
}
});
</script>
v-if —— 条件分支语句
<div id="app">
<!-- <h1 v-if="ok">Yes</h1>-->
<!-- <h1 v-else>No</h1>-->
<h1 v-if="type==='A'">A</h1>
<h1 v-else-if="type==='B'">B</h1>
<h1 v-else>C</h1>
</div>
<script src="js/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
type: 'A'
}
});
</script>
v-on: —— 绑定事件，缩写 ‘@’
<div id="app">
<button v-on:click="sayHi()">click me</button>
</div>
<script src="js/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "zouzou"
},
methods: {
sayHi: function (event) {
alert(this.message);
}
}
});
</script>
v-model —— 数据双向绑定
<div id="app">
<!-- <input type="text" v-model="message"><br>-->
<!-- <textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>-->
<!-- {{message}}-->
<!-- <input type="radio" name="sex" value="男" v-model="qinjiang">男-->
<!-- <input type="radio" name="sex" value="女" v-model="qinjiang">女 <br>-->
<!-- 选中了： {{qinjiang}}-->
<select name="" id="" v-model="selected">
<option value="" disabled>请选择</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select> <br>
{{selected}}
</div>
<script src="js/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
selected: ''
}
});
</script>
组件
<div id="app">
<!-- 组件： 传递给组件的值； props参数接收-->
<qinjia v-for="item in items" v-bind:qin="item"></qinjia>
</div>
<script src="js/vue.min.js"></script>
<script>
Vue.component("qinjia",{
props: ['qin'],
template: '<li>{{qin}}</li>'
});
var vm = new Vue({
el: "#app",
data: {
items: ["java", "Linux", "HTML"]
}
});
</script>
axios传输数据
<div id="vue" v-clock>
<div>{{info.name}}</div>
<a v-bind:href="info.url">点我</a>
</div>
<script src="js/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#vue",
data() {
return{
info: {
name: null,
address: {
street: null,
city: null,
country: null
},
url: null,
}
}
},
mounted(){
axios.get('../data.json').then(response=>(this.info=response.data));
}
});
</script>
计算属性
<div id="vue">
<p>currentTime1：{{currentTime1()}}</p>
<p>currentTime2：{{currentTime2}}</p>
</div>
<script src="js/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#vue",
data: {
message: "Hello zou",
},
methods: {
currentTime1: function (event) {
return Date.now();
}
},
computed: {
currentTime2: function (event) {
return Date.now();
}
}
});
</script>
定义插槽
<div id="vue">
<todo>
<!-- vi-bind: 简写为 ':' -->
<todo-title slot="todo-title" :title="title"></todo-title>
<todo-items slot="todo-items" v-for="(item,index) in todoItems" :item="item"
:index="index" @remove="removeItems(index)"></todo-items>
</todo>
</div>
<script src="js/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
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>{{item}} <button @click="remove">删除</button></li>',
methods: {
remove : function (index) {
this.$emit('remove',index);
}
}
});
var vm = new Vue({
el: "#vue",
data: {
title: '啦啦啦',
todoItems: ['Java', 'JQ', 'Vue']
},
methods: {
removeItems: function (index) {
this.todoItems.splice(index,1)
}
}
});
</script>
配置路由
import Vue from 'vue';
import Router from "vue-router";
import main from '../views/main';
import Login from "../views/Login";
import UserList from "../views/user/List";
import UserProfile from "../views/user/Profire";
import NotFound from "../views/NotFound";
Vue.use(Router);
export default new Router({
mode: 'history',
routes: [
{
path: '/login',
component: Login
},
{
path: '/main',
component: main,
children: [
{
path: '/user/profile',
name: 'UserProfile',
component: UserProfile
},
{ path: '/user/list/:id', name: 'UserList', component: UserList, props: true }
]
},{
path: '/goHome',
redirect: '/main'
},{
path: '*',
component: NotFound
}
]
});
|