Vue学习笔记
Vue学习笔记
1.概述、特征、以及初始化
- Vue 是一种灵活的渐进式相应框架
- 采用声明式的编程范式
引用Vue的方法
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app', //用于挂载需要挂载的元素
data: {
message: 'fuck you'
}
})
script>
通过采用el挂载和HTML代码定义id的方式来使用Vue.
data是vue实例对应的数据对象
methods定义属于vue的一些方法，可以再其他地方调用，也可以在指令中使用
2. 创建、显示、更新列表
<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: 'ssda',
movies: ['星际穿越', '大话西游', '少年派'],
}
})
script>
声明式的编程范式，使得列表操作变得简易。
3.案例：计数器
包含新的指令，v-on 和新的属性 methods，可以通过函数的形式来匹配复杂的操作
<button v-on:click="add">+button>
<button v-on:click="sub">-button>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
counter: 0
},
methods: {
add: function () {
console.log('+++')
this.counter++
},
sub: function () {
console.log('---')
this.counter--
}
},
})
script>
此处 v-on:click 可以用语法糖 @click 来替代。
4.关于插值的操作
mustache 语法
<h2>{{message}}, 李银河！h2>
<h2>{{firstName + lastName}}h2>
mustache语法中不仅可以写变量，亦可以写简单的表达式。
v-once 指令
表示页面的元素和组件只渲染一次，不会随着数据的改变而改变。
<h2 v-once>{{message}}h2>
v-for 指令
表示循环元素或组件中的内容，后接表达式。
<ul>
<li v-for="item in movies">{{item}}li>
ul>
v-html 指令
表示有选择性地解析html中的内容
<h2 v-html='url'>{{url}}h2>
v-text 指令
<h2 v-text='message'>，栗子h2>
表示显示指定的数据，但是很不灵活，会直接覆盖原标签内的数据，而且不支持拼接等操作。
该指令用得不多
v-pre 指令
<h2 v-pre>{{message}}h2>
表示原封不动地显示标签内的内容，而不会对其进行解析。
该指令用得不多
v-cloak 指令
一般用来消除抖动
<style>
[v-cloak] {
display: none
}
style>
<div id="app">
<h2 v-cloak>{{message}}h2>
div>
<script src="../js/vue.js">script>
<script>
// 由于 v-cloak 在被解析之后会被删除，所以
// 在vue解析之前，div中有v-cloak属性
// 在vue解析之后，div中没有v-cloak
setTimeout(function () {
const app = new Vue({
el: '#app',
data: {
message: '你好'
}
})
}, 1000)
script>
5.v-bind 数据绑定
v-bind 的基本使用
绑定属性
<img v-bind:src='imgURL' alt="谷歌">
<a v-bind:href="ahref">百度一下a>
v-bind 语法糖
<a :href="ahref">百度一下a>
实际上是省略了v-bind指令。
v-bind 绑定到class有两种方式 对象语法和数组语法
用法一 可以直接通过{}绑定一个类
用法二 可以通过判断传入多个值
用法三 和普通的类同时存在，并不冲突
v-bind 绑定到class(对象语法)
此案例添加了一个按钮，并设置了一个监听事件，使得点击按钮时改变绑定到的class中的布尔值，从而实现对样式的改变。
<div id='app'>
<h2 v-bind:class='{active: isActive, line: isLine}'>{{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: false,
},
methods: {
btnClick: function () {
this.isActive = !this.isActive
}
}
})
v-bind 绑定到class(数组语法)
<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: 'hello',
active: 'one',
line: 'two'
},
methods: {
getClasses: function () {
return [this.active, this.line]
}
}
})
script>
v-bind 动态绑定style(对象语法)
原理大致相同，引号后面改成style即可。
<div id='app'>
<h2 v-bind:style='getStyles()'>{{message}}h2>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello',
theSize: 100,
theColor: 'red',
},
methods: {
getStyles: function () {
return { fontSize: this.theSize + "px", color: this.theColor }
},
}
})
script>
v-bind 动态绑定style(数组语法)
<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: 'hello',
baseStyle: { backgroundColor: 'red' },
baseStyle1: { fontSize: '88px' }
}
})
script>
6.计算属性
特点：html代码里面非常清晰
<h2>{{fullMessage}}h2>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'asd',
message2: 'dd',
},
computed: {
fullMessage() {
return this.message + ' ' + this.message2
}
},
methods: {
getFullMessage() {
return this.message + ' ' + this.message2
}
}
})
script>
复杂操作
<script>
const app = new Vue({
el: '#app',
data: {
books: [
{ id: 110, name: 'Unix程艺术', price: 119 },
{ id: 111, name: 'Unx编程艺术', price: 1192 },
{ id: 112, name: 'Uix编程艺术', price: 1191 },
{ id: 113, name: 'Uni编程艺术', price: 11945 },
]
},
methods: {},
computed: {
totalPrice: function () {
let result = 0
// for (let i = 0; i < this.books.length; i++) {
// result += this.books[i].price
// }
for (let book of this.books) {
result += book.price
}
return result
}
}
});
script>
7.es6语法补充
<script>
// 属性的增强写法
const name = 'chen'
const age = 18
const obj = {
name: name,
age: age
}
//以上是es5的写法
// es60的写法如下
const obj = {
name, age
}
// 函数的增强写法
//es5中的
const obj = {
run: function () {
},
eat: function () {
},
}
//es6中的
const obj = {
run() {
},
eat() {
},
}
script>
var没有块级作用域，所以用let
const指定对象之后不可更改，但是const内部可以进行更改
8.事件监听
v-on的基本使用
<div id='app'>
<h2>{{message}}h2>
<h2>{{counter}}h2>
<button @click="increment">+button>
<button @click="decrement">-button>
div>
<script src='../js/vue.js'>script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'Hello, world!',
counter: 0
},
methods: {
increment() {
return this.counter++
},
decrement() {
return this.counter--
},
},
computed: {
},
})
script>
v-on的参数问题
<div id='app'>
<button @click="btnClick()">按钮1button>
<button @click="btn2Click">按钮2button>
<button @click="btn3Click(123, $event)">按钮3button>
<button>按钮4button>
div>
<script src='../js/vue.js'>script>
<script>
const app = new Vue({
el: '#app',
data: {
event: 'chen'
},
methods: {
btnClick() {
console.log('hello world!')
},
btn2Click(item) {
console.log('====', item)
},
btn3Click(item, event) {
console.log('+++++', item, event);
}
}
})
script>