Vue学习笔记之应用创建和基础知识
1、安装方式
CDN方式安装：
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
2、创建应用
使用Vue内置对象创建一个应用，基本代码结构如下：
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app"></div>
<script>
const { createApp } = Vue;
createApp({
data(){
return {
}
},
methods: {
},
mounted() {
},
computed: {
}
}).mount('#app');
</script>id为app的div元素，代表vue应用绑定的dom元素，vue对内部数据的操作都会直接影响dom的数据更新；
data：响应式数据均定义在data内部
methods：自定义函数定义在区域
mounted：DOM元素挂在应用后，可再此执行初始化操作，使用this对象操作data数据
computed：计算属性定义在此区域，一般只涉及读操作，基于响应式数据组合为一个新属性，提供给DOM元素渲染，也支持修改计算属性，但不建议这么做。
3、插值语法
使用两个{{}}大括号表示，如在data部分定义返回属性count，
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
{{count}}
</div>
<script>
const { createApp } = Vue;
createApp(
{
data() {
return {
count: 1
}
},
}).mount('#app');
</script>3、v-if,v-else判断指令
cansee为真时展示v-if的p元素，否则展示v-else的p元素
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
<p v-if="cansee">can see me!</p>
<p v-else>you can't see me!</p>
</div>
<script>
const { createApp } = Vue;
createApp(
{
data() {
return {
cansee: true,
}
}
}).mount('#app');
</script>4、v-on事件指令
v-on：click代表绑定onclick事件，在methods区域定义了事件处理函数，将响应式数据count执行加1操作，如下所示：
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
{{count}}
<button v-on:click="increment">点击我</button>
</div>
<script>
const { createApp } = Vue;
createApp(
{
data() {
return {
count: null,
}
},
mounted() {
this.count = 1;
},
methods: {
increment() {
this.count++;
}
}
}).mount('#app');
</script>5、嵌套对象的使用
可以使用嵌套对象语法给DOM元素绑定数据，如下所示：
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
<p>{{obj.nested.count}}</p>
<button v-on:click="increment">点击我</button>
</div>
<script>
const { createApp } = Vue;
createApp(
{
data() {
return {
obj: {
nested: { count: 0 }
}
}
},
mounted() {
},
methods: {
increment() {
this.obj.nested.count++;
}
}
}).mount('#app');
</script>6、计算属性的使用
计算属性基于响应式数据组合新的数据，计算属性的 getter 应只做计算而没有任何其他的副作用，不要改变其他状态、在 getter 中做异步请求或者更改 DOM。另外，避免直接修改计算属性的值。
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
<p>Has published books:</p>
<span>{{isPublishedBooks}}</span><br/>
<button v-on:click="removeAll">删除所有</button>
<p>总指导是：{{fullName}}</p>
<button v-on:click="modifyZonzhidao">改名</button>
</div>
<script>
const { createApp } = Vue;
createApp({
data(){
return {
author: {
name: 'John Doe',
books: [
'Java guide 3',
'C# 高级编程',
'数据库基础'
],
firstName: 'Pan',
lastName: 'three big stones'
}
}
},
methods: {
removeAll() {
this.author.books = [];
},
modifyZonzhidao() {
this.fullName = '黄 飞鸿';
}
},
computed: {
isPublishedBooks() {
return this.author.books.length > 0 ? 'Yes' : 'No';
},
fullName: {
get() {
return this.author.firstName + ' ' + this.author.lastName;
},
set(newValue) {
//注意：这里使用解构赋值语法
[this.author.firstName, this.author.lastName] = newValue.split(' ');
}
}
}
}).mount('#app');
</script>6、类的绑定
使用vue将class绑定到DOM元素有以下5种方式：
1)单属性语法赋值class方式，：class="{active:isActive,'text-danger':hasError}"，isActive为真将绑定active类，hasError为真将绑定text-danger类，同时为真将绑定两者
2)使用对象直接赋值class方式，:class="classObj"，直接绑定classObj中所有为真的类
3)使用计算表达式方式赋值，:class="classObj2"，classObj2是一个计算表达式，如下代码所示，也是绑定计算表达式返回对象中所有为真的class
4)使用数组方式赋值class，:class="[activeClass,errorClass]"，直接绑定activeClass和errorClass所对应的class
5)基于条件判断+数组的混合方式赋值class，:class="[{active:isActive},errorClass]"，如isActive为真，将绑定active和errorClass属性对应的class，否则只会绑定errorClass属性对应的class
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style>
.active{
background-color:lightcoral;
border:1px dotted black;
width:200px;
height:200px;
opacity:0.5;
}
.text-danger{
opacity:1;
background-color:red;
}
</style>
<div id="app">
<div class="static" :class="{active:isActive,'text-danger':hasError}">单属性赋值class方式</div>
<div :class="classObj">多属性对象赋值class方式</div>
<div :class="classObj2">计算表达式赋值class方式</div>
<div :class="[activeClass,errorClass]">class赋值数组对象方式</div>
<div :class="[{active:isActive},errorClass]">class赋值数组对象带条件判断方式</div>
</div>
<script>
const { createApp } = Vue;
createApp({
data(){
return {
isActive: true,
hasError: false,
classObj: {
active: true,
'text-danger': true
},
activeClass: 'active',
errorClass: 'text-danger',
}
},
methods: {
},
computed: {
classObj2() {
return {
active: this.isActive && !this.hasError,
'text-danger': !this.hasError
}
}
}
}).mount('#app');
</script>6、内联样式的绑定
使用vue将内联元素绑定到DOM元素有以下3种方式：
1)单属性语法赋值style方式，:style="{color:activeColor,fontSize:fontSize+'px'}"，绑定颜色和字体大小两个内联元素
2)使用对象直接赋值style方式，:class="styleObj"，直接绑定styleObj中所有的内联元素
3)使用数组方式赋值style方式，:class="[styleObj,styleObj2]"，将合并数组中所有对象下的内联元素
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
<div :style="{color:activeColor,fontSize:fontSize+'px'}">内联样式直接赋值方式</div>
<div :style="styleObj">内联样式使用对象赋值方式</div>
<div :style="[styleObj,styleObj2]">内联样式使用数组对象赋值方式</div>
</div>
<script>
const { createApp } = Vue;
createApp({
data(){
return {
activeColor: 'red',
fontSize: 30,
styleObj: {
color: 'green',
fontSize: '28px'
},
styleObj2: {
fontWeight: 'bold',
fontFamily: 'cursive'
}
}
},
methods: {
},
computed: {
}
}).mount('#app');
</script>