vue入门笔记（一）（新手必看）
Vue Day 01
B站原视频地址
注：本文只是记录自己的学习过程
文章目录
- Vue Day 01
- 一、邂逅Vuejs
- 1.1.认识Vuejs
- 1.2.Vue的初体验
- 1.3.创建Vue时, options可以放哪些东西
- 二、插值语法
- 三、v-bind
- 3.1. v-bind绑定基本属性
- 3.2. v-bind动态绑定class
- 3.3. v-bind动态绑定style
- 四. 计算属性
一、邂逅Vuejs
1.1.认识Vuejs
- 为什么学习Vuejs
- Vue的渐进式
1.渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。2.或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。3.比如Core+Vue-router+Vuex，也可以满足你各种各样的需求
1.2.Vue的初体验
- let(变量) / const(常量)
- 声明式编程
- mustache语法：{{message}}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<h2>{{message}}h2>
<h1>{{name}}h1>
div>
<div>{{message}}div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app', // 用于挂载要管理的元素
data: { // 定义数据
message: '你好啊,李银河!',
name: 'coderwhy'
}
})
// 元素js的做法(编程范式: 命令式编程)
// 1.创建div元素,设置id属性
// 2.定义一个变量叫message
// 3.将message变量放在前面的div元素中显示
// 4.修改message的数据: 今天天气不错!
// 5.将修改后的数据再次替换到div元素
script>
body>
html>
- 案例一
v-for：遍历打印数组所有数据
<div id="app">
<ul>
<li v-for="item in movies">{{item}}li>
ul>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
movies: ['星际穿越', '大话西游', '少年派', '盗梦空间']
}
})
script>
- 案例二
v-on:click 表示监听一个click事件 绑定事件
<div id="app">
<h2>当前计数: {{counter}}h2>
<button v-on:click="add">+button>
<button v-on:click="sub">-button>
div>
<script src="../js/vue.js">script>
<script>
// 语法糖: 简写
// proxy
const obj = {
counter: 0,
message: 'abc'
}
new Vue()
const app = new Vue({
el: '#app',
data: obj,
methods: {
add: function () {
console.log('add被执行');
this.counter++
},
sub: function () {
console.log('sub被执行');
this.counter--
}
},
beforeCreate: function () {
},
created: function () {
console.log('created');
},
mounted: function () {
console.log('mounted');
}
})
// 1.拿button元素
// 2.添加监听事件
script>
1.3.创建Vue时, options可以放哪些东西
- el:
- data:
- methods:
- 生命周期函数
二、插值语法
- mustache语法
<h2>{{firstName + lastName}}h2>
<h2>{{firstName + ' ' + lastName}}h2>
<h2>{{firstName}} {{lastName}}h2>
<h2>{{counter * 2}}h2>
- v-once(用的少)
该指令表示元素和组件只渲染一次，不会随着数据的改变而改变
<div id="app">
<h2>{{message}}h2>
<h2 v-once>{{message}}h2>
div>
- v-html
从服务器请求到的数据本身就是一个HTML代码 需要解析 不能直接用 {{}}
<div id="app">
<h2>{{url}}h2>
<h2 v-html="url">h2>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
url: '百度一下'
}
})
script>
- v-text(用的少)
和{{}}一样的效果，但是{{}}更好更灵活
<div id="app">
<h2>{{message}}, 李银河!h2>
<h2 v-text="message">, 李银河!h2>
div>
- v-pre: {{}}(用的少)
- 第一个h2元素中的内容会被编译解析出来对应的内容
- 第二个h2元素中会直接显示{{message}}
<div id="app">
<h2>{{message}}h2>
<h2 v-pre>{{message}}h2>
div>
- v-cloak: 斗篷(了解 用得少)
在某些情况下，我们浏览器可能会直接显然出未编译的Mustache标签
<style>
[v-cloak] {
display: none;
}
style>
<script>
// 在vue解析之前, div中有一个属性v-cloak
// 在vue解析之后, div中没有一个属性v-cloak
setTimeout(function () {
const app = new Vue({
el: '#app',
data: {
message: '你好啊'
}
})
}, 1000)
script>
三、v-bind
3.1. v-bind绑定基本属性
- v-bind:src
- :href
<div id="app">
<img v-bind:src="imgURL" alt="">
<a v-bind:href="aHref">百度一下a>
<img :src="imgURL" alt="">
<a :href="aHref">百度一下a>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
imgURL: 'https://img11.360buyimg.com/mobilecms/s350x250_jfs/t1/20559/1/1424/73138/5c125595E3cbaa3c8/74fc2f84e53a9c23.jpg!q90!cc_350x250.webp',
aHref: 'http://www.baidu.com'
}
})
script>
3.2. v-bind动态绑定class
- 对象语法: 作业 :class=’{类名: boolean}’ (用的很多)
<style>
.active {
color: red;
}
style>
head>
<body>
<div id="app">
<h2 class="title" v-bind:class="{active: isActive, line: isLine}">{{message}}h2>
<h2 class="title" v-bind:class="getClasses()">{{message}}h2>
<button v-on:click="btnClick">按钮button>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
isActive: true,
isLine: true
},
methods: {
btnClick: function () {
this.isActive = !this.isActive
},
getClasses: function () {
return {active: this.isActive, line: this.isLine}
}
}
})
script>
- 数组语法:(用的很少)
<div id="app">
<h2 class="title" :class="[active, line]">{{message}}h2>
<h2 class="title" :class="getClasses()">{{message}}h2>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
active: 'aaaaaa',
line: 'bbbbbbb'
},
methods: {
getClasses: function () {
return [this.active, this.line]
}
}
})
script>
- 作业 v-for和v-bind的一起使用
点击列表中的哪一项, 那么该项的文字变成红色
<style>
.active {
color: red;
}
style>
head>
<body>
<div id="app">
<ul>
<li v-for="(item, index) in movies" @click="change(index)" :class="{active:index==currentIndex}">
{{item}}
li>
ul>
div>
<script>
const app = new Vue({
el: '#app',
data: {
movies: ['星际穿越', '盗梦空间', '大话西游', '少年派的奇幻漂流'],
currentIndex: 0
},
methods: {
change:function(Index){
this.currentIndex = Index;
}
}
})
script>
3.3. v-bind动态绑定style
- 对象语法:(用的很多)
<div id="app">
<h2 :style="{fontSize: finalSize + 'px', backgroundColor: finalColor}">{{message}}h2>
<h2 :style="getStyles()">{{message}}h2>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
finalSize: 100,
finalColor: 'red',
},
methods: {
getStyles: function () {
return {fontSize: this.finalSize + 'px', backgroundColor: this.finalColor}
}
}
})
script>
- 数组语法:(用的很少)
<div id="app">
<h2 :style="[baseStyle, baseStyle1]">{{message}}h2>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
baseStyle: {backgroundColor: 'red'},
baseStyle1: {fontSize: '100px'},
}
})
script>
四. 计算属性
// computed: 计算属性() 性能比直接用函数更好 没有缓存
- 案例一: firstName+lastName
<div id="app">
<h2>{{firstName + ' ' + lastName}}h2>
<h2>{{firstName}} {{lastName}}h2>
<h2>{{getFullName()}}h2>
<h2>{{fullName}}h2>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'Lebron',
lastName: 'James'
},
// computed: 计算属性()
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
},
methods: {
getFullName() {
return this.firstName + ' ' + this.lastName
}
}
})
script>
- 案例二: books -> price
<div id="app">
<h2>总价格: {{totalPrice}}h2>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
books: [
{id: 110, name: 'Unix编程艺术', price: 119},
{id: 111, name: '代码大全', price: 105},
{id: 112, name: '深入理解计算机原理', price: 98},
{id: 113, name: '现代操作系统', price: 87},
]
},
computed: {
totalPrice: function () {
let result = 0
for (let i=0; i < this.books.length; i++) {
result += this.books[i].price
}
return result
// for (let i in this.books) {
// this.books[i]
// }
//
// for (let book of this.books) {
//
// }
}
}
})
script>
- 计算属性的setter和getter
一般不希望计算属性有set方法
我们一般写get方法，上面的
fullName: function () { return this.firstName + ’ ’ + this.lastName }
就是get方法的语法糖 ，这里只是介绍一下有set和get方法
<div id="app">
<h2>{{fullName}}h2>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'Kobe',
lastName: 'Bryant'
},
computed: {
// fullName: function () {
// return this.firstName + ' ' + this.lastName
// }
// name: 'coderwhy'
// 计算属性一般是没有set方法, 只读属性.
fullName: {
set: function(newValue) {
// console.log('-----', newValue);
const names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[1];
},
get: function () {
return this.firstName + ' ' + this.lastName
}
},
// fullName: function () {
// return this.firstName + ' ' + this.lastName
// }
}
})
script>
- 计算属性和method的对比
<div id="app">
<h2>{{firstName}} {{lastName}}h2>
<h2>{{fullName}}h2>
<h2>{{fullName}}h2>
<h2>{{fullName}}h2>
<h2>{{fullName}}h2>
div>
<script src="../js/vue.js">script>
<script>
// angular -> google
// TypeScript(microsoft) -> ts(类型检测)
// flow(facebook) ->
const app = new Vue({
el: '#app',
data: {
firstName: 'Kobe',
lastName: 'Bryant'
},
methods: {
getFullName: function () {
console.log('getFullName');
return this.firstName + ' ' + this.lastName
}
},
computed: {
fullName: function () {
console.log('fullName');
return this.firstName + ' ' + this.lastName
}
}
})
script>
调用计算属性的方法只会执行一次，调用method方法回执行四次，可以通过浏览器控制台查看
附链接
vue入门学习(二)