Vue.js 快速上手精华梳理-快速上手核心重点【建议收藏】
Vue.js 快速上手精华梳理-快速上手核心重点【建议收藏】
瑞新
发布于 2020-07-07 11:37:22
发布于 2020-07-07 11:37:22
文章目录
- Vue.js 快速上手精华梳理
- 初体验
- 条件指令
- 循环指令
- 处理用户输入
- 组件初体验
- 实例
- 模板语法
- 计算属性
- 监听器
- Class绑定
- Style绑定
- 条件渲染
- 列表渲染
- 事件处理
- 表单输入绑定
- 组件基础
- git提交-vue核心基础完结
- 彩蛋福利
PS：本文福利首发于公众号「让我遇见相似的灵魂」，获取最新Vue教程资源 回复关键字：Vue 左手代码，右手吉他，这就是天下:如果有一天我遇见相似的灵魂 那它肯定是步履艰难 不被理解 喜黑怕光的。如果可以的话 让我触摸一下吧 它也一样孤独得太久。 不一样的文艺青年，不一样的程序猿。
Vue.js 快速上手精华梳理
初体验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- app.message='hi bennyrhys' 可以到页面的console检验-->
<div id="app" v-bind:title="title">
{{message}}
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'hello vue!',
title:'bennyrhys00'
}
})
</script>
</body>
</html>条件指令
if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- app.message='hi bennyrhys' 可以到页面的console检验-->
<div id="app">
<div v-if="flag">v-if 是移除元素</div>
<div v-show="flag">v-show 是display隐藏元素</div>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
flag:'true'
}
})
</script>
</body>
</html>循环指令
99乘法表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- app.message='hi bennyrhys' 可以到页面的console检验-->
<div id="app">
<table>
<tr v-for="i in num">
<td v-for="j in i">{{i}}*{{j}}={{i * j}}</td>
</tr>
</table>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
num:9
}
})
</script>
</body>
</html>处理用户输入
消息翻转v-on:click=""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- app.message='hi bennyrhys' 可以到页面的console检验-->
<div id="app">
<div>{{message}}</div>
<button v-on:click="reseverMessage"></button>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message: "bennyrhys"
},
methods:{
reseverMessage() {
// alert("hello")
this.message=this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>同步数据Input v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- app.message='hi bennyrhys' 可以到页面的console检验-->
<div id="app">
<div>{{message}}</div>
<input type="text" v-model="message">
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:"bennyrhys"
}
})
</script>
</body>
</html>组件初体验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- app.message='hi bennyrhys' 可以到页面的console检验-->
<div id="app">
直接付给变量<bennyrhys name="vue"></bennyrhys>
<!-- 如果是引用的hello变量，v-bind下边data要定义-->
间接绑定变量<bennyrhys v-bind:name="hello"></bennyrhys>
</div>
<script>
Vue.component('bennyrhys',{
<!-- 声明一个变量-->
props:['name'],
template:'<h1>hello {{name}}</h1>'
})
var app = new Vue({
el:'#app',
data:{
message:"bennyrhys",
hello:'vue1'
}
})
</script>
</body>
</html>实例
其实就是对象
生命周期
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- app.message='hi bennyrhys' 可以到页面的console检验-->
<div id="app">
<div>{{a}}</div>
</div>
<script>
var data = {a : 1, b : null}
// 情况2：冻结data数据，导致后期更改无法影响视图【只读】
// Object.freeze(data)
var app = new Vue({
el:'#app',
data:data,
// 生命周期方法-创建vue时 Vue1.x用created多，现在Mounted初始化数据用的多
created() {
console.log("create init")
}
})
console.log(data.a == app.a) //true
data.a = 99
console.log(app.a) // 99
app.a = 100
console.log(data.a) //100 【双向绑定】
// 情况1：后引入的属性【但是后来加进的数据不会影响视图的更新。可以先在外面初始化b:null】
data.b = 18
console.log(app.b)
// 使用$获取
console.log(app.$el == document.getElementById("app")) //true
console.log(app.$data == data) //true
</script>
</body>
</html>模板语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- app.message='hi bennyrhys' 可以到页面的console检验-->
<div id="app">
<!-- 变量直接插值可以使用{{}}-->
<div>{{a}}</div>
<!-- 如果给特性赋值,不用{{}}，要用v-bind:【简写:】 v-on:click【简写@】-->
<!-- 页面测试app.enableBtn=false-->
<button v-bind:disabled="!enableBtn" @click="num++">按钮</button>
<!-- 直接显示html格式-->
<div v-html="a"></div>
<!-- 注意：表达式只能一个-->
<div>{{num>101 ? 'good' : num}}</div>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
// 直接显示的字符串
a : '<h1>hello 字符串</h1>',
b : null,
enableBtn: true,
num: 99
}
})
</script>
</body>
</html>计算属性
computed比methed方法多出缓存功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- computed和方法的区别，computed可以缓存，methed不行-->
<div>{{reseverMessage}}</div>
<!-- methed调用显示和computed一样-->
<!-- <div>{{reseverMessage()}}</div>-->
<!-- 通过computed的set进行赋值-->
<div>{{copyMessage}}</div>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
// 页面测试app.message='lalassss ss'
message : 'hello bennyrhys',
copyMessage: null
},
methods:{
/*reseverMessage() {
return this.message.split('').reverse().join('')
}*/
},
computed:{
//执行的是简化的get
/* reseverMessage() {
return this.message.split('').reverse().join('')
}*/
// 完整的属性
reseverMessage:{
get() {
// 注意会因methed方法同名报错
return this.message.split('').reverse().join('');
},
// 网页测试app.reseverMessage="343"
set(newVal) {
this.copyMessage=newVal
console.log("set:"+ newVal);
}
}
}
})
</script>
</body>
</html>监听器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- app.message='hi bennyrhys' 可以到页面的console检验-->
<div id="app" v-bind:title="title">
<!-- 网页测试app.firstName='li' app.lastName="si"-->
{{fullName}}
</div>
<script>
var app = new Vue({
el:'#app',
data:{
firstName:'zhang',
lastName:'san',
fullName:'zhang san'
},
/*computed: {
fullName() {
return this.firstName+" "+this.lastName;
}
}*/
// 用于网络请求耗时长的异步、开销很大操作，一般用computed本地变化就行
watch:{
firstName(val) {
this.fullName = val + ' ' + this.lastName;
},
lastName(val) {
this.fullName = this.firstName + ' ' + val;
}
}
})
</script>
</body>
</html>Class绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- app.message='hi bennyrhys' 可以到页面的console检验-->
<div id="app" v-bind:title="title">
<!-- 普通版-->
<div class="m1">{{msg}}</div>
<!-- 想控制样式显示或是隐藏，就用到class绑定【注意{},是单括号}】-->
<!-- 页面测试app.flag=false，样式消失
可以同时绑定多个class样式 测试app.hasBorder=false
-->
<div v-bind:class="{m1:flag, m3:hasBorder }" class="m2">{{msg}}</div>
<!--样式比较多，直接填写定义好的对象-->
<div v-bind:class="classObj" class="m2">{{msg}}</div>
<!--定义样式数组 -->
<div v-bind:class="[flag ? dm1 : '',dm3]">{{msg}}</div>
<!--化简三目运算 -->
<div v-bind:class="[{m1:flag},dm3]">{{msg}}</div>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
msg:'hello bennyrhys!',
flag:true,
hasBorder:true,
// 样式定义比较多，给他封装成对象
classObj: {
m1:true,
m3:true
},
// 定义数组
dm1:'m1',
dm3:'m3'
}
})
</script>
<style>
.m1{
font-weight: bold;
color: red;
}
.m2{
font-size: 20px;
}
.m3{
border: 1px solid #cccccc;
}
</style>
</body>
</html>compted this.flag控制true false
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主要测试computed常用</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- app.message='hi bennyrhys' 可以到页面的console检验-->
<div id="app" v-bind:title="title">
<!-- 普通版-->
<div class="m1">{{msg}}</div>
<!-- 想控制样式显示或是隐藏，就用到class绑定【注意{},是单括号}】-->
<!-- 页面测试app.flag=false，样式消失
可以同时绑定多个class样式 测试app.hasBorder=false
-->
<div v-bind:class="{m1:flag, m3:hasBorder }" class="m2">{{msg}}</div>
<!--样式比较多，直接填写定义好的对象-->
<div v-bind:class="classObj" class="m2">{{msg}}</div>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
msg:'hello bennyrhys!',
flag:true,
hasBorder:true,
},
computed: {
classObj() {
//测试撤销样式app.flag=false app.hasBorder=false
return{
m1:this.flag,
m3:this.hasBorder
}
}
}
})
</script>
<style>
.m1{
font-weight: bold;
color: red;
}
.m2{
font-size: 20px;
}
.m3{
border: 1px solid #cccccc;
}
</style>
</body>
</html>Style绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主要测试computed常用</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" v-bind:title="title">
<!-- 单{}， -->
<div v-bind:style="{color:fontColor, fontSize:fontSize+'px'}">{{msg}}</div>
<!--绑定对象 -->
<div v-bind:style="styleObj">{{msg}}</div>
<!--绑定数组 -->
<div v-bind:style="[styleObj,styleObj2]">{{msg}}</div>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
msg:'hello bennyrhys!',
fontColor: 'red',
fontSize: 30,
// 定义成对象
styleObj: {
color: 'red',
fontSize: '30px'
},
// 数组
styleObj2: {
border: '1px solid #ccc'
}
}
})
</script>
<style>
.m1{
font-weight: bold;
color: red;
}
.m2{
font-size: 20px;
}
.m3{
border: 1px solid #cccccc;
}
</style>
</body>
</html>条件渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" v-bind:title="title">
<!-- 条件渲染 根据变量控制，app.isShow=true-->
<div v-if="isShow">hello bennyrhys</div>
<!-- template不参与页面渲染，但是能控制多条语句，同时显示 测试app.isShow=true-->
<template v-if="isShow">
<p>hello</p>
<h1>bennyrhys</h1>
<span>version</span>
</template>
<!-- v-else-->
<div v-else>瑞新</div>
<!-- v-else-if 测试app.isShow=true app.gender=1-->
性别：
<div v-if="gender == 0">男</div>
<div v-else-if="gender == 1">女</div>
<div v-else>未知</div>
<!-- 渲染缓存复用【默认】 如果不想用默认的【用key区分】 测试app.loginType='email'-->
<template v-if="loginType == 'username'">
<label>用户名</label>
<input type="text" placeholder="请输入用户名" key="username" >
</template>
<template v-else>
<label>邮箱地址</label>
<input type="text" placeholder="请输入邮箱地址" key="email">
</template>
<!-- v-show【if是从dom中删除，show是一直存在控制display显示或隐藏】【不支持和template一起使用】-->
<div v-show="!isHide" >hello v-show</div>
<!-- 【总结：频繁显示隐藏show,偶尔if】-->
</div>
<script>
var app = new Vue({
el:'#app',
data:{
isShow:false,
gender:0,
loginType:'username',
isHide:false
}
})
</script>
</body>
</html>列表渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" v-bind:title="title">
<!-- 遍历数组 【注意key 】-->
<table>
<tr>
<td>索引</td>
<td>书名</td>
<td>作者</td>
</tr>
<tr v-for="(book, index) of books" v-bind:key="index">
<!-- 注意：in等价于of -->
<td>{{index}}</td>
<td>{{book.name}}</td>
<td>{{book.author}}</td>
</tr>
</table>
<!-- 遍历对象元素 ()内元素排序：元素 key index 【注意key，循环渲染被认为同一个div】-->
<div v-for="(s, k, i) in site" v-bind:key="i ">
{{s}}--{{k}}--{{i}}
</div>
<!-- 存在问题：数组无法响应式更新
测试存入，但页面没更新
app.books[4]={name:'故事新编',author:'鲁迅'}
测试存入：调用变异方法，是js原有的vue封装，内含了视图更新
app.books.push({name:'故事新编',author:'鲁迅'})
元素出栈：app.books.pop()
删除元素：app.books.splice(0,1)表示从第0个开始，删除一个
替换数组：非变异方法，不会改变原始数组【filter、concat、slice】
错误做法 app.books.concat({name:'故事新编',author:'鲁迅'})
正确做法 app.books=app.books.concat({name:'故事新编',author:'鲁迅'})
删除替换元素：【参考官方set方法】
app.books.splice(0,1,{name:'故事新编',author:'鲁迅'})
对象更新存在问题：
注意：提前定义元素，保证后期响应式更新
Vue.set(app.site,'ip','0.0.0.0')
app.$set(app.site,'ip','0.0.0.0')
直接写是不会变的
-->
</div>
<script>
var app = new Vue({
el:'#app',
data:{
books:[
{
name:'三国演义',
author:'罗贯中'
},
{
name:'水浒传',
author:'施耐庵'
},
{
name:'西游记',
author:'吴承恩'
},
{
name:'红楼梦',
author:'曹雪芹'
}
],
site:{
url:'www.996cloud.work',
name:'不才工作室',
author:'bennyrhys'
}
}
})
</script>
</body>
</html>事件处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" v-bind:title="title">
<div>{{counter}}</div>
<!-- @click="counter++"写一个方法替代效果和++一样-->
<input type="button" value="自增" @click="increment(2)">
<!-- 注意事件修饰符，按键修饰符-->
<input type="text" v-on:keydown.ctrl.enter="submit">
</div>
<script>
var app = new Vue({
el:'#app',
data:{
counter:0
},
methods:{
increment(step) {
this.counter = this.counter+step;
},
submit(){
console.log("submit")
}
}
})
</script>
</body>
</html>表单输入绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue01</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" v-bind:title="title">
<!-- 单行文本-->
<input type="text" v-model="msg">
<p>{{msg}}</p>
<!-- 多行文本-->
<textarea v-model="textarea" cols="30" rows="10"></textarea>
<P style="white-space: pre-line;" >{{textarea}}</P>
<!-- 复选框-->
<!-- 单个测试-->
<input type="checkbox" v-model="isRead">
<p>{{isRead}}</p>
<!-- 多选兴趣爱好-->
篮球<input type="checkbox" value="篮球" v-model="favorites">
足球<input type="checkbox" value="足球" v-model="favorites">
乒乓球<input type="checkbox" value="乒乓球" v-model="favorites">
<p>{{favorites}}</p>
<!-- 单选框性别-->
性别<input type="radio" value="男" v-model="gender">男 <input type="radio" value="女" v-model="gender">女
<p>{{gender}}</p>
<!-- 选择框-->
<!-- 学历-单选-->
<select v-model="edu">
<option value="本科">本科</option>
<option value="硕士">硕士</option>
<option value="博士">博士</option>
</select>
<p>{{edu}}</p>
<!-- 补充上方爱好的-多选-->
<select v-model="favorites" multiple>
<option value="足球">足球</option>
<option value="篮球">篮球</option>
<option value="乒乓球">乒乓球</option>
</select>
<!-- 优化-->
<select v-model="favorites" multiple>
<option v-for="(f, index) in fs" v-bind:key="index" v-bind:value="f">{{f}}</option>
</select>
<!-- 值选择-->
<input type="checkbox" true-value="yes" false-value="no" v-model="toggle">
<p>{{toggle}}</p>
<!-- 单选框，返回值类似
选择框 value可以传一个对象，但记得v-bind
-->
<!-- .lazy .number .trim修饰符，可以使修改事件触发状态【挪出光标点一下才能触发】-->
<input type="text" v-model.lazy="msg">
<p>{{msg}}</p>
<!-- 改进for的99乘法表-->
<!-- v-model修饰符控制数值【此时即使number类型也没用】-->
<!-- <input type="number" v-model.number="num">-->
</div>
<script>
var app = new Vue({
el:'#app',
data:{
msg:'',
textarea:'',
isRead:false,
favorites:[],
gender:'',
edu:'',
fs:[
'足球',
'篮球',
'乒乓球'
],
toggle:''
}
})
</script>
</body>
</html>组件基础
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--<!– 保证了组件的复用不会同时调用同一个变量，避免结果异常 –>-->
<bennyrhys></bennyrhys>
<bennyrhys></bennyrhys>
<hr>
<!-- 向子组件传递数据 【定义的组件数据像元素属性一样赋值】 -->
<bennyrhys title="组件1"></bennyrhys>
<bennyrhys title="组件2"></bennyrhys>
<!-- 传递了一个数组的数据给子组件 【注意此处引用data的变量，记得加：】 -->
<mybolgs @sayhello="hello" v-for="(blog, index) in blogs" :title="blog.title" :date="blog.date" :author="blog.author" :key="index">
<!-- 插槽占位符-->
<div style="color: red">bennyrhys</div>
</mybolgs>
<hr>
<!-- 动态组件：传组件名字动态切换 -->
<component v-bind:is="currentTabComponent"></component>
</div>
<script>
Vue.component('bennyrhys',{
//返回值一定要是方法，避免变量被属性同时公用造成异常
data() {
return {
counter: 0
}
},
// 向子组件传递数据
props:['title'],
// 外层必须是一个整div包裹
template:'<div><div>{{title}}</div><button @click="counter++" >hello {{counter}}</button></div>'
})
Vue.component('mybolgs',{
// 传递了一个数组的组件
props:['title', 'date', 'author'],
template: '<div>' +
'<div>{{title}}</div>'+
// 插槽占位符 可以起名字
'<slot></slot>'+
'<div>{{date}}--{{author}}</div>'+
// 监听子组件的点击事件，调用app的方法【大小写不敏感的 不要用大写】
// 使用组件抛出一个值传参
'<button @click="$emit(\'sayhello\',title)">监听子组件</button>'+
'</div> '
})
var app = new Vue({
el:'#app',
data:{
currentTabComponent: 'bennyrhys',
message:"bennyrhys",
blogs:[
{
'title':'Spring Boot1',
'date':'时间1',
'author':'bennyrhys'
},
{
'title':'Spring Boot2',
'date':'时间2',
'author':'bennyrhys'
},
{
'title':'Spring Boot3',
'date':'时间3',
'author':'瑞新'
}
]
},
methods:{
// 监听子组件传递过来的方法
hello(val){
console.log("hello zi"+val)
}
}
})
</script>
</body>
</html>git提交-vue核心基础完结
此处静待，后期开源
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-03-15 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录