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>