菜鸟的Vue基础快速入门
菜鸟的Vue快速入门
- 说明
- 一、前期准备
- 二、常用方法
-
- demo案例
- if-else
- for循环
- 事件绑定
- 异步请求（axios）
- 组件基础
- 表单属性绑定
- 计算属性
- 插槽
- 自定义内容转发
- 三、补充
说明
本文参考了主要整理了一些Vue常用语法，给出相应代码，存在有大量不足的地方，建议参考Vue官网文档进行学习
注意：本文仅为记录学习轨迹，如有侵权,联系删除
一、前期准备
工具采用idea 2019，开始前下载Vue.js插件
设置vue新建文件模板
模板
<template>
</template>
<script>
export default {
name:"${NAME}"
}
</script>
<style scoped>
</style>
二、常用方法
demo案例
跟后端一样，前端逐渐趋向于系统化，有条件语句、循环语句、自己的服务器（nodejs）、可独立运行、测试和部署，不可否认的是前端正在逐渐崛起。
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
{
{ message }}
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var vm = new Vue({
el:'#app',
data:{
message:'hello vue！'
}
})
script>
body>
html>
引进虚拟Dom、MVVM模型等，具体概念查看Vue官网，这里主要展示代码，多玩一下代码就可以感受到Vue强大及其使用。
if-else
就跟后端的条件差不多
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app-1">
<p v-if="seen">现在你看到我了</p>
<p v-else>现在你看不到我了</p>
</div>
<div id="app-2">
<p v-if="type=='A'">this is A</p>
<p v-else-if="type=='B'">this is B</p>
<p v-else-if="type=='C'">this is C</p>
<p v-else>this is none</p>
</div>
<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app1 = new Vue({
el: '#app-1',
data: {
seen: true
}
})
var app2 = new Vue({
el:'#app-2',
data: {
type: 'A'
}
})
</script>
</body>
</html>
for循环
这里的for循环语法跟python有点像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="app-1">
<li v-for="item in items">
{
{
item.message}}
</li>
</ul>
<ul id="app-2">
<li v-for="(item, index) in items">
{
{
parentMessage }} - {
{
index }}
<p v-if="index == 0"> {
{
item.message0 }}</p>
<p v-if="index == 1"> {
{
item.message1 }}</p>
<p v-if="index == 2"> {
{
item.message2 }}</p>
</li>
</ul>
<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app1 = new Vue({
el: '#app-1',
data: {
items:[
{
message:'第一个元素'},
{
message: '第二个元素'},
{
message: '第三个元素'}
]
}
})
var app2 = new Vue({
el: '#app-2',
data: {
parentMessage:'this is parent',
items:[
{
message0: '第一个元素'},
{
message1: '第二个元素'},
{
message2: '第三个元素'}
]
}
})
</script>
</body>
</html>
事件绑定
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="app-1" v-on:click="sayHello">click me</button>
<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#app-1',
data:{
message:'this is message'
},
methods:{
//事件的绑定，方法必须定义在Vue的methods对象中，v-on:事件
sayHello:function (event) {
alert(this.message);
}
}
})
</script>
</body>
</html>
异步请求（axios）
异步请求是最关键的一个技术
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>异步请求(axios)</title>
</head>
<body>
<!--get的异步请求-->
<div id="app1">
名字:{
{
info.data.name}}<br>
年龄:{
{
info.data.age}}<br>
</div>
<hr>
<!--post的异步请求-->
<div id="app2">
名字:{
{
info.data.name}}<br>
年龄:{
{
info.data.age}}<br>
</div>
<hr>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
// get的异步请求
new Vue({
el: '#app1',
data () {
return {
info: null
}
},
mounted () {
axios
.get('../json/data.json')//这里一般请求后端的接口，接口返回一个json字符串
.then(response => (this.info = response))//将请求返回的数据赋值给info
.catch(function (error) {
// 请求失败处理
console.log(error);
});
}
})
// post的异步请求
new Vue({
el: '#app2',
data () {
return {
info: null
}
},
mounted () {
axios
.post('../json/data.json')//这里一般请求后端的接口，接口返回一个json字符串
.then(response => (this.info = response))//将请求返回的数据赋值给info
.catch(function (error) {
// 请求失败处理
console.log(error);
});
}
})
</script>
</body>
</html>
组件基础
组件化开发，提高代码可复用性，详细参考Vue官网
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>组件基础</title>
</head>
<body>
<!--<p>组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 <button-counter>。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：</p>-->
<div id="bc">
<button-counter></button-counter><br>
<button-counter></button-counter><br>
<button-counter></button-counter><br>
<button-counter></button-counter>
</div>
<hr>
<!--通过title给组件blog-post传值-->
<div id="bp1">
<blog-post1 title="this is blog-1"></blog-post1>
<blog-post1 title="this is blog-2"></blog-post1>
<blog-post1 title="this is blog-3"></blog-post1>
</div>
<hr>
<!--自定义blog-post2组件,循环传值（复杂）-->
<div id="bp2">
<blog-post2 v-for="item in items" v-bind:value="item"></blog-post2>
</div>
<hr>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 这里有两种组件的注册类型：全局注册和局部注册。至此，我们的组件都只是通过 Vue.component 全局注册的
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: ''
})
//自定义blog-post1组件,需要给title传值进去（简单）
Vue.component('blog-post1',{
props:['title'],
template:'{
{title}}
'
})
//自定义blog-post2组件,循环传值（复杂）
Vue.component('blog-post2',{
props:['value'],
template:'{
{value}}
'
})
new Vue({
el: '#bc' })
new Vue({
el: '#bp1' })
new Vue({
el:'#bp2',
data:{
items:['A','B','C']
}
})
</script>
</body>
</html>
表单属性绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单输入绑定</title>
</head>
<body>
<hr>
<div id="app-1">
#文本 <br>
<input v-model="message" placeholder="edit me">
<p>Message is {
{
message}}</p>
</div>
<hr>
<div id="app-2">
#多行文本 <br>
<span>Multiline message is:{
{
message}}</span><br>
<textarea v-model="message"></textarea>
</div>
<hr>
<div id="app-3">
#复选框 <br>
<input type="checkbox" id="jack" value="jack" v-model="checkedNames">
<input type="checkbox" id="john" value="john" v-model="checkedNames">
<input type="checkbox" id="mike" value="mike" v-model="checkedNames">
<input type="checkbox" id="tony" value="tony" v-model="checkedNames">
<p for="checkbox">Checked names: {
{
checkedNames}}</p>
</div>
<hr>
<div id="app-4">
#单选按钮 <br>
<input type="radio" id="mela" value="男" v-model="picked">男
<input type="radio" id="femela" value="女" v-model="picked">女
<p for="checkbox">Picked : {
{
picked}}</p>
</div>
<hr>
<div id="app-5">
#选择框单选 <br>
<select v-model="selected">
<option disabled value="">---请选择---</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<p>Selected: {
{
selected}}</p>
</div>
<hr>
<div id="app-6">
#选择框多选 <br>
<select v-model="selected" multiple style="width: 50px;">
<option disabled value="">---请选择---</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<p>Selected: {
{
selected}}</p>
</div>
<hr>
<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app-1',
data: {
message: ''
}
})
new Vue({
el: '#app-2',
data: {
message: ''
}
})
new Vue({
el: '#app-3',
data: {
// checkedNames: ''
checkedNames: []
}
})
new Vue({
el:'#app-4',
data:{
picked:''
}
})
new Vue({
el:'#app-5',
data:{
selected:''
}
})
new Vue({
el:'#app-6',
data:{
selected:[]
}
})
</script>
</body>
</html>
计算属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性</title>
</head>
<body>
<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app1",
data:{
message:"hello world"
},
methods:{
currentTime1:function () {
return Date.now();//返回一个时间戳
}
},
computed:{
//计算属性（相当于缓存）:metheds,computed方法名不能重名，重名之后之后调用methods的方法
currentTime2:function () {
this.message;
return Date.now();//返回一个时间戳
}
}
});
</script>
</body>
</html>
插槽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插槽</title>
</head>
<body>
<div id="app1">
<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>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//slot
Vue.component("todo",{
template:'' +
'' +
' '
+
' {
{title}} '
});
Vue.component('todo-items',{
props: ['item'],
template:'{
{item}} '
});
new Vue({
el:'#app1',
data:{
title:"this is title",
todoItems:['C/C++','Java','Python']
}
});
</script>
</body>
</html>
自定义内容转发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义内容分发</title>
</head>
<body>
<div id="app1">
<todo>
<todo-title slot="todo-title" v-bind:title="title"></todo-title>
<todo-items slot="todo-items"
v-for="(item,index) in todoItems"
v-bind:item="item"
v-bind:index="index"
v-bind:key="index"
v-on:remove="removeItems(index)"></todo-items>
</todo>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//slot
Vue.component("todo",{
template:'' +
'' +
' '
+
' {
{title}} '
});
Vue.component('todo-items',{
props: ['item','index'],
template:'' +
'' +
' {
{item}}' +
' ' +
'',
methods: {
remove:function (index) {
this.$emit('remove',index);
}
}
});
var vm = new Vue({
el:'#app1',
data:{
title:"this is title",
todoItems:['C/C++','Java','Python']
},
methods:{
removeItems:function (index) {
console.log("删除了"+this.todoItems[index]+"OK");
this.todoItems.splice(index,1);//一次删除一个元素
}
}
});
</script>
</body>
</html>
三、补充
上面的一些方法，建议去官网了解了相关的概念后再看，在知道相关概念后学习效率最高，其次个人觉得只要看得懂代码，知道怎么用即可，没必要深究，毕竟现在时间宝贵，讲究高效学习，后面的开发也不会用这种原生的代码，很多都是用的框架，Vue则会使用Vue-cli脚手架进行快速开发和独立部署，即所谓的前后端分离。